From 2344c1701d7a53a28fafe2e9ba7ce5dc2e75855e Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Tue, 15 Mar 2022 13:48:52 -0700
Subject: [PATCH 01/10] Update to JavaScript dependencies file

---
 source/html/package-lock.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/html/package-lock.json b/source/html/package-lock.json
index 7223e918..b1cecaa3 100644
--- a/source/html/package-lock.json
+++ b/source/html/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "html",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.4",
         "bootstrap": "^4.6.1",

From 8d30f3a2bb08f306be24a1ab031582977054003d Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 11:16:21 -0700
Subject: [PATCH 02/10] Rework from RequireJS modules to native JavaScript
 modules #267

---
 source/events/cloudwatch_alarm.py             |    2 +-
 source/events/media_events.py                 |    2 +-
 source/html/.eslintrc.json                    |   26 +
 source/html/.jshintrc                         |    4 +-
 source/html/index.html                        |   11 +-
 source/html/js/app.js                         |   18 -
 source/html/js/app/alarms.js                  |  442 ++--
 source/html/js/app/api_check.js               |   18 +-
 source/html/js/app/build-tmp.js               |   16 +-
 source/html/js/app/build.js                   |   16 +-
 source/html/js/app/channels.js                |  302 +--
 source/html/js/app/cloudwatch_events.js       |   44 +-
 source/html/js/app/connections.js             |  167 +-
 source/html/js/app/events.js                  |  237 +-
 source/html/js/app/main.js                    |   26 +-
 .../connections/cloudfront_medialive_input.js |   64 +-
 .../link_device_medialive_input.js            |   64 +-
 .../mediaconnect_flow_mediaconnect_flow.js    |   67 +-
 .../mediaconnect_flow_medialive_input.js      |   69 +-
 .../connections/medialive_channel_input.js    |   62 +-
 .../medialive_channel_mediaconnect_flow.js    |   63 +-
 .../medialive_channel_mediapackage_channel.js |  112 +-
 .../medialive_channel_mediastore_container.js |   66 +-
 .../medialive_channel_multiplex.js            |  103 +-
 .../medialive_channel_s3_bucket.js            |   66 +-
 .../connections/medialive_input_channel.js    |  105 +-
 .../mediapackage_channel_endpoint.js          |   72 +-
 .../mediapackage_endpoint_cloudfront.js       |   63 +-
 ...kage_endpoint_mediatailor_configuration.js |   65 +-
 .../mediastore_container_cloudfront.js        |   62 +-
 .../mediastore_container_medialive_input.js   |   62 +-
 ...ore_container_mediatailor_configuration.js |   62 +-
 .../multiplex_mediaconnect_flow.js            |   63 +-
 .../connections/s3_bucket_cloudfront.js       |   62 +-
 .../connections/s3_bucket_medialive_input.js  |   62 +-
 .../s3_bucket_mediatailor_configuration.js    |   69 +-
 .../html/js/app/mappers/connections/speke.js  |   62 +-
 .../connections/user_defined_connection.js    |  164 +-
 source/html/js/app/mappers/mappers.js         |   68 +
 .../html/js/app/mappers/nodes/cloudfront.js   |  212 +-
 source/html/js/app/mappers/nodes/ec2.js       |  225 +-
 .../html/js/app/mappers/nodes/mediaconnect.js |  210 +-
 source/html/js/app/mappers/nodes/medialive.js |  640 +++---
 .../html/js/app/mappers/nodes/mediapackage.js |  392 ++--
 .../html/js/app/mappers/nodes/mediastore.js   |  197 +-
 .../html/js/app/mappers/nodes/mediatailor.js  |  205 +-
 source/html/js/app/mappers/nodes/s3.js        |  199 +-
 source/html/js/app/mappers/nodes/speke.js     |  199 +-
 .../app/mappers/nodes/ssm_managed_instance.js |  225 +-
 .../js/app/mappers/nodes/user_defined_node.js |  197 +-
 source/html/js/app/model.js                   |  177 +-
 source/html/js/app/plugins.js                 |   51 -
 source/html/js/app/regions.js                 |   77 +-
 source/html/js/app/search.js                  |  244 +--
 source/html/js/app/server.js                  |  206 +-
 source/html/js/app/settings.js                |  118 +-
 source/html/js/app/statemachine.js            |  512 +++--
 source/html/js/app/tools/build_numbers.js     |   70 +-
 source/html/js/app/tools/clear_http.js        |   34 +-
 source/html/js/app/tools/cross_region.js      |   71 -
 source/html/js/app/tools/duplicate_names.js   |   36 +-
 source/html/js/app/ui/alarm_indicators.js     |  124 +-
 source/html/js/app/ui/alarms_menu.js          |  451 ++--
 source/html/js/app/ui/alert.js                |   27 +-
 source/html/js/app/ui/channels_menu.js        |  330 +--
 source/html/js/app/ui/confirmation.js         |   33 +-
 source/html/js/app/ui/diagram_factory.js      |  993 ++++-----
 source/html/js/app/ui/diagram_menu.js         |  539 ++---
 .../js/app/ui/diagram_statemachine_factory.js |  439 ++--
 source/html/js/app/ui/diagrams.js             |  446 ++--
 source/html/js/app/ui/dragdrop.js             |  466 ++--
 .../html/js/app/ui/event_alert_indicators.js  |  469 ++--
 source/html/js/app/ui/help_menu.js            |   34 +-
 .../html/js/app/ui/information_compartment.js |  108 +-
 .../html/js/app/ui/informational_overlays.js  |  118 +-
 source/html/js/app/ui/layout.js               |  134 +-
 source/html/js/app/ui/monitor_view.js         |  775 ++++---
 source/html/js/app/ui/nodes_menu.js           |  177 +-
 source/html/js/app/ui/overlays/alarms_only.js |   35 +-
 .../html/js/app/ui/overlays/ec2_instance.js   |   69 +-
 .../js/app/ui/overlays/mediaconnect_flow.js   |   93 +-
 .../js/app/ui/overlays/medialive_channel.js   |   78 +-
 .../js/app/ui/overlays/medialive_multiplex.js |   72 +-
 .../html/js/app/ui/overlays/overlay_tools.js  |  100 +-
 source/html/js/app/ui/overlays/overlays.js    |   16 +
 .../app/ui/overlays/ssm_managed_instance.js   |   68 +-
 source/html/js/app/ui/search_view.js          |  443 ++--
 source/html/js/app/ui/selected_item_view.js   |  424 ++--
 source/html/js/app/ui/settings_menu.js        |  679 +++---
 source/html/js/app/ui/status_view.js          |   90 +-
 source/html/js/app/ui/svg_node.js             |  142 +-
 source/html/js/app/ui/tile_view.js            | 1011 ++++-----
 source/html/js/app/ui/tools_menu.js           |   34 -
 source/html/js/app/ui/user_defined.js         |  423 ++--
 source/html/js/app/ui/util.js                 |   86 +-
 source/html/js/app/ui/vis_options.js          |  287 +--
 source/html/js/app/window.js                  |    6 -
 source/html/js/lib/jquery.js                  |    6 -
 source/html/package-lock.json                 | 1923 ++++++++++++++++-
 source/html/package.json                      |    5 +-
 source/msam/app.py                            |    2 +-
 source/msam/chalicelib/cache.py               |    2 +-
 source/msam/chalicelib/channels.py            |    2 +-
 source/msam/chalicelib/cloudwatch.py          |    2 +-
 source/msam/chalicelib/connections.py         |    2 +-
 source/msam/chalicelib/content.py             |    2 +-
 source/msam/chalicelib/layout.py              |    2 +-
 source/msam/chalicelib/nodes.py               |    2 +-
 source/msam/chalicelib/periodic.py            |    2 +-
 source/msam/chalicelib/settings.py            |    2 +-
 source/msam/chalicelib/tags.py                |    2 +-
 source/msam/db/lambda_function.py             |    2 +-
 source/msam/db/makezip.sh                     |    2 +-
 source/tools/autopep8.sh                      |    2 +-
 source/tools/delete_disconnected.py           |    2 +-
 source/tools/js-beautify.sh                   |    2 +-
 source/tools/jslint-report.sh                 |    2 +-
 .../web-cloudformation/cfn_bucket_loader.py   |    2 +-
 source/web-cloudformation/makezip.sh          |    2 +-
 119 files changed, 10504 insertions(+), 8892 deletions(-)
 create mode 100644 source/html/.eslintrc.json
 delete mode 100644 source/html/js/app.js
 create mode 100644 source/html/js/app/mappers/mappers.js
 delete mode 100644 source/html/js/app/plugins.js
 delete mode 100644 source/html/js/app/tools/cross_region.js
 create mode 100644 source/html/js/app/ui/overlays/overlays.js
 delete mode 100644 source/html/js/app/ui/tools_menu.js
 delete mode 100644 source/html/js/app/window.js
 delete mode 100644 source/html/js/lib/jquery.js

diff --git a/source/events/cloudwatch_alarm.py b/source/events/cloudwatch_alarm.py
index 02279281..01d7fef7 100644
--- a/source/events/cloudwatch_alarm.py
+++ b/source/events/cloudwatch_alarm.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This Lambda is responsible for receiving and storing CloudWatch alarm events.
diff --git a/source/events/media_events.py b/source/events/media_events.py
index 795d6507..7e079b0c 100644
--- a/source/events/media_events.py
+++ b/source/events/media_events.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This Lambda is responsible for receiving and storing CloudWatch events
diff --git a/source/html/.eslintrc.json b/source/html/.eslintrc.json
new file mode 100644
index 00000000..19edaa16
--- /dev/null
+++ b/source/html/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jquery": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {},
+    "globals": {
+        "_": true,
+        "Cookies": true,
+        "Fuse": true,
+        "machina": true,
+        "moment": true,
+        "objectHash": true,
+        "renderjson": true,
+        "SVG": true,
+        "Tabulator": true,
+        "URI": true,
+        "vis": true
+    }
+}
\ No newline at end of file
diff --git a/source/html/.jshintrc b/source/html/.jshintrc
index 5a909d61..0402be4a 100644
--- a/source/html/.jshintrc
+++ b/source/html/.jshintrc
@@ -1,7 +1,7 @@
 {
-    "esversion": 8,
+    "esversion": 11,
     "browser": true,
-    "loopfunc": false,
+    "loopfunc": true,
     "globals": {
         "console": true,
         "define": true,
diff --git a/source/html/index.html b/source/html/index.html
index 7ea71d5b..74e03f60 100644
--- a/source/html/index.html
+++ b/source/html/index.html
@@ -19,6 +19,7 @@
     <link rel="stylesheet" href="/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
     <script src="/node_modules/jquery/dist/jquery.min.js"></script>
     <script src="/node_modules/jqueryui/jquery-ui.min.js"></script>
+    <script src="/node_modules/lodash/lodash.min.js"></script>
     <script src="/node_modules/vis/dist/vis.min.js"></script>
     <script src="/node_modules/tabulator-tables/dist/js/tabulator.min.js"></script>
     <script src="/node_modules/tabulator-tables/dist/js/jquery_wrapper.min.js"></script>
@@ -30,7 +31,11 @@
     <script src="/node_modules/renderjson/renderjson.js"></script>
     <script src="/node_modules/urijs/src/URI.min.js"></script>
     <script src="/node_modules/moment/min/moment.min.js"></script>
-    <script data-main="js/app" src="/node_modules/requirejs/require.js"></script>
+    <script src="/node_modules/machina/lib/machina.min.js"></script>
+    <script src="/node_modules/js-cookie/src/js.cookie.js"></script>
+    <script src="/node_modules/object-hash/dist/object_hash.js"></script>
+    <script src="js/app/main.js" type="module"></script>
+    
     <style>
         .borderless td,
         .borderless th {
@@ -213,9 +218,9 @@
                     class="btn btn-outline-info mx-1 p-1 pt-2 px-2 hidden-compartment" title="Delete Connection"><i
                         class="material-icons">remove_circle_outline</i></button>
             </span>
-            <span class="form-inline pl-4 my-2 my-lg-0" onsubmit="return false;">
+            <span class="form-inline pl-4 my-2 my-lg-0" onsubmit="() => { return false; }">
                 <input class="form-control mx-1" id="search_input" placeholder="Search Terms" title="Search Terms"
-                    onsubmit="return false;">
+                    onsubmit="() => { return false; }">
                 <a href="#" class="btn btn-outline-info mx-1 p-1 pt-2 px-2" title="Search Now" id="search-now-button">
                     <i class="material-icons">search</i>
                 </a>
diff --git a/source/html/js/app.js b/source/html/js/app.js
deleted file mode 100644
index a6e8d02f..00000000
--- a/source/html/js/app.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-       SPDX-License-Identifier: Apache-2.0 */
-
-// define the various loading paths
-requirejs.config({
-    "baseUrl": "js/lib",
-    "paths": {
-        "app": "../app",
-        "cookie": "/node_modules/js-cookie/src/js.cookie",
-        "object_hash": "/node_modules/object-hash/dist/object_hash",
-        "lodash": "/node_modules/lodash/lodash.min",
-        "machina": "/node_modules/machina/lib/machina.min",
-        "vis": "/node_modules/vis/dist/vis.min"
-    },
-    "waitSeconds": 15
-});
-// load the main module and go
-requirejs(["app/main"]);
\ No newline at end of file
diff --git a/source/html/js/app/alarms.js b/source/html/js/app/alarms.js
index a7e235b0..df5031f4 100644
--- a/source/html/js/app/alarms.js
+++ b/source/html/js/app/alarms.js
@@ -1,227 +1,231 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["lodash", "app/server", "app/connections", "app/settings"],
-    function(_, server, connections, settings) {
-
-        var listeners = [];
-
-        var region_cache_clear_interval_ms = 60000;
-
-        // cache alarms in 'set' state
-        // several modules use this at the same time
-
-        var current_subscribers_with_alarms = [];
-        var previous_subscribers_with_alarms = [];
-
-        // interval in millis to update the cache
-
-        var update_interval;
-
-        var intervalID;
-
-        var settings_key = "app-alarm-update-interval";
-
-        var subscribers_with_alarm_state = function(state) {
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            var current_endpoint = `${url}/cloudwatch/alarms/${state}/subscribers`;
-            return new Promise(function(resolve, reject) {
-                server.get(current_endpoint, api_key).then(function(response) {
-                    // console.log(response);
-                    resolve(response);
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
-
-
-        var all_alarms_for_region = _.memoize(function(region) {
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            region = encodeURIComponent(region);
-            var current_endpoint = `${url}/cloudwatch/alarms/all/${region}`;
-            return new Promise(function(resolve, reject) {
-                server.get(current_endpoint, api_key).then(function(response) {
-                    // console.log(response);
-                    resolve(response);
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        });
+import * as server from "./server.js";
+import * as connections from "./connections.js";
+import * as settings from "./settings.js";
 
-        var alarms_for_subscriber = _.memoize(function(arn) {
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            arn = encodeURIComponent(arn);
-            var current_endpoint = `${url}/cloudwatch/alarms/subscriber/${arn}`;
-            return new Promise(function(resolve, reject) {
-                server.get(current_endpoint, api_key).then(function(response) {
-                    resolve(response);
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        });
+var listeners = [];
 
-        var subscribe_to_alarm = function(region, alarm_name, resource_arns) {
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            alarm_name = encodeURIComponent(alarm_name);
-            var current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/subscribe`;
-            return new Promise(function(resolve, reject) {
-                server.post(current_endpoint, api_key, resource_arns).then(function(response) {
-                    for (let arn of resource_arns) {
-                        clear_alarms_for_subscriber_cache(arn);
-                    }
-                    resolve(response);
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
-
-        var unsubscribe_from_alarm = function(region, alarm_name, resource_arns) {
-            // console.log(region, alarm_name, resource_arns);
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            alarm_name = encodeURIComponent(alarm_name);
-            var current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/unsubscribe`;
-            return new Promise(function(resolve, reject) {
-                server.post(current_endpoint, api_key, resource_arns).then(function(response) {
-                    for (let arn of resource_arns) {
-                        clear_alarms_for_subscriber_cache(arn);
-                    }
-                    resolve(response);
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
-
-        var delete_all_subscribers = function() {
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            var current_endpoint = `${url}/cloudwatch/alarms/subscribed`;
-            return new Promise((resolve, reject) => {
-                server.delete_method(current_endpoint, api_key).then((response) => {
-                    alarms_for_subscriber.cache.clear();
-                    resolve(response);
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
-
-        var clear_alarms_for_subscriber_cache = function(subscribers) {
-            if (Array.isArray(subscribers)) {
-                for (let subscriber of subscribers) {
-                    alarms_for_subscriber.cache.delete(subscriber.ResourceArn);
-                }
-            } else if (typeof subscribers == 'string') {
-                alarms_for_subscriber.cache.delete(subscribers);
-            } else {
-                alarms_for_subscriber.cache.clear();
-            }
-        };
-
-        var cache_update = function() {
-            // console.log("cache_update()");
-            subscribers_with_alarm_state("ALARM").then(function(response) {
-                // console.log("updated set event cache");
-                previous_subscribers_with_alarms = current_subscribers_with_alarms;
-                current_subscribers_with_alarms = _.sortBy(response, "ResourceArn");
-                var added = _.differenceBy(current_subscribers_with_alarms, previous_subscribers_with_alarms, "ResourceArn");
-                var removed = _.differenceBy(previous_subscribers_with_alarms, current_subscribers_with_alarms, "ResourceArn");
-                if (added.length || removed.length) {
-                    clear_alarms_for_subscriber_cache(added);
-                    clear_alarms_for_subscriber_cache(removed);
-                    for (let f of listeners) {
-                        f(current_subscribers_with_alarms, previous_subscribers_with_alarms);
-                    }
-                }
-                // }
-            }).catch(function(error) {
-                console.log(error);
-            });
-        };
-
-        var load_update_interval = function() {
-            return new Promise(function(resolve, reject) {
-                settings.get(settings_key).then(function(value) {
-                    let seconds = Number.parseInt(value);
-                    update_interval = seconds * 1000;
-                    resolve();
-                });
-            });
-        };
-
-        var set_update_interval = function(seconds) {
-            // create a default
-            update_interval = seconds * 1000;
-            return settings.put(settings_key, seconds);
-        };
+var region_cache_clear_interval_ms = 60000;
 
-        var schedule_interval = function() {
-            if (intervalID) {
-                clearInterval(intervalID);
-            }
-            intervalID = setInterval(cache_update, update_interval);
-            console.log("alarms: interval scheduled " + update_interval + "ms");
-        };
+// cache alarms in 'set' state
+// several modules use this at the same time
 
-        load_update_interval();
+var current_subscribers_with_alarms = [];
+var previous_subscribers_with_alarms = [];
 
-        setInterval(function() {
-            try {
-                all_alarms_for_region.cache.clear();
-            } catch (error) {
-                console.log(error);
+// interval in millis to update the cache
+
+var update_interval;
+
+var intervalID;
+
+var settings_key = "app-alarm-update-interval";
+
+var subscribers_with_alarm_state = function (state) {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/cloudwatch/alarms/${state}/subscribers`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key).then(function (response) {
+            // console.log(response);
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
+
+
+var all_alarms_for_region = _.memoize(function (region) {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    region = encodeURIComponent(region);
+    var current_endpoint = `${url}/cloudwatch/alarms/all/${region}`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key).then(function (response) {
+            // console.log(response);
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+});
+
+var alarms_for_subscriber = _.memoize(function (arn) {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    arn = encodeURIComponent(arn);
+    var current_endpoint = `${url}/cloudwatch/alarms/subscriber/${arn}`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key).then(function (response) {
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+});
+
+var subscribe_to_alarm = function (region, alarm_name, resource_arns) {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    alarm_name = encodeURIComponent(alarm_name);
+    var current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/subscribe`;
+    return new Promise(function (resolve, reject) {
+        server.post(current_endpoint, api_key, resource_arns).then(function (response) {
+            for (let arn of resource_arns) {
+                clear_alarms_for_subscriber_cache(arn);
             }
-        }, region_cache_clear_interval_ms);
-
-        return {
-            "get_subscribers_with_alarms": function() {
-                return {
-                    "current": current_subscribers_with_alarms,
-                    "previous": previous_subscribers_with_alarms
-                };
-            },
-            "add_callback": function(f) {
-                if (!listeners.includes(f)) {
-                    listeners.push(f);
-                }
-                if (!intervalID) {
-                    schedule_interval();
-                }
-            },
-            "all_alarms_for_region": all_alarms_for_region,
-            "subscribe_to_alarm": subscribe_to_alarm,
-            "unsubscribe_from_alarm": unsubscribe_from_alarm,
-            "alarms_for_subscriber": alarms_for_subscriber,
-            "set_update_interval": function(seconds) {
-                set_update_interval(seconds).then(function() {
-                    schedule_interval();
-                });
-            },
-            "get_update_interval": function() {
-                return update_interval;
-            },
-            "delete_all_subscribers": delete_all_subscribers
-        };
-
-    });
\ No newline at end of file
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
+
+var unsubscribe_from_alarm = function (region, alarm_name, resource_arns) {
+    // console.log(region, alarm_name, resource_arns);
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    alarm_name = encodeURIComponent(alarm_name);
+    var current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/unsubscribe`;
+    return new Promise(function (resolve, reject) {
+        server.post(current_endpoint, api_key, resource_arns).then(function (response) {
+            for (let arn of resource_arns) {
+                clear_alarms_for_subscriber_cache(arn);
+            }
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
+
+var delete_all_subscribers = function () {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/cloudwatch/alarms/subscribed`;
+    return new Promise((resolve, reject) => {
+        server.delete_method(current_endpoint, api_key).then((response) => {
+            alarms_for_subscriber.cache.clear();
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
+
+var clear_alarms_for_subscriber_cache = function (subscribers) {
+    if (Array.isArray(subscribers)) {
+        for (let subscriber of subscribers) {
+            alarms_for_subscriber.cache.delete(subscriber.ResourceArn);
+        }
+    } else if (typeof subscribers == 'string') {
+        alarms_for_subscriber.cache.delete(subscribers);
+    } else {
+        alarms_for_subscriber.cache.clear();
+    }
+};
+
+var cache_update = function () {
+    // console.log("cache_update()");
+    subscribers_with_alarm_state("ALARM").then(function (response) {
+        // console.log("updated set event cache");
+        previous_subscribers_with_alarms = current_subscribers_with_alarms;
+        current_subscribers_with_alarms = _.sortBy(response, "ResourceArn");
+        var added = _.differenceBy(current_subscribers_with_alarms, previous_subscribers_with_alarms, "ResourceArn");
+        var removed = _.differenceBy(previous_subscribers_with_alarms, current_subscribers_with_alarms, "ResourceArn");
+        if (added.length || removed.length) {
+            clear_alarms_for_subscriber_cache(added);
+            clear_alarms_for_subscriber_cache(removed);
+            for (let f of listeners) {
+                f(current_subscribers_with_alarms, previous_subscribers_with_alarms);
+            }
+        }
+        // }
+    }).catch(function (error) {
+        console.error(error);
+    });
+};
+
+var load_update_interval = function () {
+    return new Promise(function (resolve) {
+        settings.get(settings_key).then(function (value) {
+            let seconds = Number.parseInt(value);
+            update_interval = seconds * 1000;
+            resolve();
+        });
+    });
+};
+
+var set_update_interval_setting = function (seconds) {
+    // create a default
+    update_interval = seconds * 1000;
+    return settings.put(settings_key, seconds);
+};
+
+var schedule_interval = function () {
+    if (intervalID) {
+        clearInterval(intervalID);
+    }
+    intervalID = setInterval(cache_update, update_interval);
+    console.log("alarms: interval scheduled " + update_interval + "ms");
+};
+
+load_update_interval();
+
+setInterval(function () {
+    try {
+        all_alarms_for_region.cache.clear();
+    } catch (error) {
+        console.log(error);
+    }
+}, region_cache_clear_interval_ms);
+
+// return {
+export function get_subscribers_with_alarms() {
+    return {
+        "current": current_subscribers_with_alarms,
+        "previous": previous_subscribers_with_alarms
+    };
+}
+
+export function add_callback(f) {
+    if (!listeners.includes(f)) {
+        listeners.push(f);
+    }
+    if (!intervalID) {
+        schedule_interval();
+    }
+}
+
+export {
+    all_alarms_for_region,
+    subscribe_to_alarm,
+    unsubscribe_from_alarm,
+    alarms_for_subscriber,
+    delete_all_subscribers
+};
+
+export function set_update_interval(seconds) {
+    set_update_interval_setting(seconds).then(function () {
+        schedule_interval();
+    });
+}
+
+export function get_update_interval() {
+    return update_interval;
+}
diff --git a/source/html/js/app/api_check.js b/source/html/js/app/api_check.js
index f680b3c1..689f6c0f 100644
--- a/source/html/js/app/api_check.js
+++ b/source/html/js/app/api_check.js
@@ -1,15 +1,9 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/server"], function(server) {
+import * as server from "./server.js";
 
-    var ping = function(url, api_key) {
-        var current_endpoint = `${url}/ping`;
-        return server.get(current_endpoint, api_key);
-    };
-
-    return {
-        "ping": ping
-    };
-
-});
\ No newline at end of file
+export function ping(url, api_key) {
+    var current_endpoint = `${url}/ping`;
+    return server.get(current_endpoint, api_key);
+}
diff --git a/source/html/js/app/build-tmp.js b/source/html/js/app/build-tmp.js
index ee4033fb..79b99f25 100644
--- a/source/html/js/app/build-tmp.js
+++ b/source/html/js/app/build-tmp.js
@@ -1,14 +1,8 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/server"], function(server) {
+const version = "VERSION";
 
-    var version = "VERSION";
-
-    return {
-        "get_version": function() {
-            return version;
-        }
-    };
-
-});
\ No newline at end of file
+export function get_version() {
+    return version;
+}
diff --git a/source/html/js/app/build.js b/source/html/js/app/build.js
index 3ce4eb0d..79b99f25 100644
--- a/source/html/js/app/build.js
+++ b/source/html/js/app/build.js
@@ -1,14 +1,8 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/server"], function(server) {
+const version = "VERSION";
 
-    var stamp = "1638315990";
-
-    return {
-        "get_timestamp": function() {
-            return stamp;
-        }
-    };
-
-});
\ No newline at end of file
+export function get_version() {
+    return version;
+}
diff --git a/source/html/js/app/channels.js b/source/html/js/app/channels.js
index e2b93765..b27a90e9 100644
--- a/source/html/js/app/channels.js
+++ b/source/html/js/app/channels.js
@@ -1,180 +1,180 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["lodash", "app/server", "app/connections"], function(_, server, connections) {
+import * as server from "./server.js";
+import * as connections from "./connections.js";
 
-    const retrieve_channel = _.memoize(function(name) {
-        const current_connection = connections.get_current();
-        const url = current_connection[0];
-        const api_key = current_connection[1];
-        const current_endpoint = `${url}/channel/${name}`;
-        return new Promise(function(resolve, reject) {
-            server.get(current_endpoint, api_key).then(function(response) {
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const retrieve_channel = _.memoize(function (name) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/channel/${name}`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key).then(function (response) {
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
     });
+});
 
-    const have_any = _.memoize(function(node_ids) {
-        const local_lodash = _;
-        const local_node_ids = node_ids;
-        // console.log(node_ids);
-        const matches = [];
-        // return a list of channel names that have any of these nodes
-        return new Promise(function(outer_resolve, outer_reject) {
-            const promises = [];
-            channel_list().then(function(channel_names) {
-                for (let name of channel_names) {
-                    const local_name = name;
-                    promises.push(
-                        new Promise(function(resolve, reject) {
-                            // console.log(name);
-                            // look for model matches
-                            retrieve_channel(local_name).then(function(contents) {
-                                const channel_keys = Object.keys(contents).sort();
-                                const intersect = local_lodash.intersection(local_node_ids, channel_keys);
-                                // console.log(intersect);
-                                if (intersect.length > 0) {
-                                    matches.push(local_name);
-                                }
-                                resolve();
-                            });
-                        })
-                    );
-                }
-            });
-            Promise.all(promises).then(function() {
-                // return it all
-                outer_resolve(matches);
-            });
+const have_any = _.memoize(function (node_ids) {
+    const local_lodash = _;
+    const local_node_ids = node_ids;
+    // console.log(node_ids);
+    const matches = [];
+    // return a list of channel names that have any of these nodes
+    return new Promise(function (outer_resolve) {
+        const promises = [];
+        channel_list().then(function (channel_names) {
+            for (let name of channel_names) {
+                const local_name = name;
+                promises.push(
+                    new Promise(function (resolve) {
+                        // console.log(name);
+                        // look for model matches
+                        retrieve_channel(local_name).then(function (contents) {
+                            const channel_keys = Object.keys(contents).sort();
+                            const intersect = local_lodash.intersection(local_node_ids, channel_keys);
+                            // console.log(intersect);
+                            if (intersect.length > 0) {
+                                matches.push(local_name);
+                            }
+                            resolve();
+                        });
+                    })
+                );
+            }
+        });
+        Promise.all(promises).then(function () {
+            // return it all
+            outer_resolve(matches);
         });
     });
+});
 
-    const create_channel = function(name, nodes) {
-        const current_connection = connections.get_current();
-        const url = current_connection[0];
-        const api_key = current_connection[1];
-        const current_endpoint = `${url}/channel/${name}`;
-        return new Promise(function(resolve, reject) {
-            const data = nodes;
-            server.post(current_endpoint, api_key, data).then(function(response) {
-                clear_function_cache();
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const create_channel = function (name, nodes) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/channel/${name}`;
+    return new Promise(function (resolve, reject) {
+        const data = nodes;
+        server.post(current_endpoint, api_key, data).then(function (response) {
+            clear_function_cache();
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    const update_channel = create_channel;
+const update_channel = create_channel;
 
-    const delete_channel = function(name) {
-        const current_connection = connections.get_current();
-        const url = current_connection[0];
-        const api_key = current_connection[1];
-        const current_endpoint = `${url}/channel/${name}`;
-        return new Promise((resolve, reject) => {
-            server.delete_method(current_endpoint, api_key).then((response) => {
-                clear_function_cache();
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const delete_channel = function (name) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/channel/${name}`;
+    return new Promise((resolve, reject) => {
+        server.delete_method(current_endpoint, api_key).then((response) => {
+            clear_function_cache();
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    const channel_list = _.memoize(function() {
-        const current_connection = connections.get_current();
-        const url = current_connection[0];
-        const api_key = current_connection[1];
-        const current_endpoint = `${url}/channels`;
-        return new Promise(function(resolve, reject) {
-            server.get(current_endpoint, api_key).then(function(response) {
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const channel_list = _.memoize(function () {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/channels`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key).then(function (response) {
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
     });
+});
 
-    const arn_to_channels = _.memoize(function(arn) {
-        const local_arn = arn;
-        return new Promise(function(outerResolve, outerReject) {
-            channel_list().then(function(channels) {
-                const matches = [];
-                const promises = [];
-                for (let channel_name of channels) {
-                    const local_channel_name = channel_name;
-                    promises.push(new Promise(function(resolve, reject) {
-                        retrieve_channel(local_channel_name).then(function(members) {
-                            for (let member_value of members) {
-                                if (member_value.id === local_arn) {
-                                    matches.push(local_channel_name);
-                                    break;
-                                }
+const arn_to_channels = _.memoize(function (arn) {
+    const local_arn = arn;
+    return new Promise(function (outerResolve, outerReject) {
+        channel_list().then(function (channels) {
+            const matches = [];
+            const promises = [];
+            for (let channel_name of channels) {
+                const local_channel_name = channel_name;
+                promises.push(new Promise(function (resolve) {
+                    retrieve_channel(local_channel_name).then(function (members) {
+                        for (let member_value of members) {
+                            if (member_value.id === local_arn) {
+                                matches.push(local_channel_name);
+                                break;
                             }
-                            resolve();
-                        });
-                    }));
-                }
-                Promise.all(promises).then(function() {
-                    outerResolve(matches.sort());
-                });
-            }).catch(function(error) {
-                console.log(error);
-                outerReject(error);
+                        }
+                        resolve();
+                    });
+                }));
+            }
+            Promise.all(promises).then(function () {
+                outerResolve(matches.sort());
             });
+        }).catch(function (error) {
+            console.error(error);
+            outerReject(error);
         });
     });
+});
 
-    const clear_function_cache = function() {
-        have_any.cache.clear();
-        retrieve_channel.cache.clear();
-        channel_list.cache.clear();
-        arn_to_channels.cache.clear();
-    };
+const clear_function_cache = function () {
+    have_any.cache.clear();
+    retrieve_channel.cache.clear();
+    channel_list.cache.clear();
+    arn_to_channels.cache.clear();
+};
 
-    const delete_all_channels = function() {
-        const current_connection = connections.get_current();
-        const url = current_connection[0];
-        const api_key = current_connection[1];
-        const current_endpoint = `${url}/channels`;
-        return new Promise((resolve, reject) => {
-            server.delete_method(current_endpoint, api_key).then((response) => {
-                clear_function_cache();
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const delete_all_channels = function () {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/channels`;
+    return new Promise((resolve, reject) => {
+        server.delete_method(current_endpoint, api_key).then((response) => {
+            clear_function_cache();
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    // pre-warming the function cache to speed tile drawing
+// pre-warming the function cache to speed tile drawing
 
-    async function prewarm() {
-        const channels = await channel_list();
-        for (let name of channels) {
-            retrieve_channel(name);
-        }
+async function prewarm() {
+    const channels = await channel_list();
+    for (let name of channels) {
+        retrieve_channel(name);
     }
+}
 
-    prewarm();
+prewarm();
 
-    return {
-        "create_channel": create_channel,
-        "update_channel": update_channel,
-        "delete_channel": delete_channel,
-        "retrieve_channel": retrieve_channel,
-        "channel_list": channel_list,
-        "arn_to_channels": arn_to_channels,
-        "have_any": have_any,
-        "delete_all": delete_all_channels
-    };
-});
\ No newline at end of file
+export {
+    create_channel,
+    update_channel,
+    delete_channel,
+    retrieve_channel,
+    channel_list,
+    arn_to_channels,
+    have_any,
+    delete_all_channels as delete_all
+};
diff --git a/source/html/js/app/cloudwatch_events.js b/source/html/js/app/cloudwatch_events.js
index 3898e9c9..d5e49b42 100644
--- a/source/html/js/app/cloudwatch_events.js
+++ b/source/html/js/app/cloudwatch_events.js
@@ -1,26 +1,22 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-       define(["app/server", "app/connections"],
-       function(server, connections) {
-      
-           var get_cloudwatch_events = function(arn) {
-               //console.log(arn);
-               var current_connection = connections.get_current();
-               var url = current_connection[0];
-               var api_key = current_connection[1];
-               var current_endpoint = `${url}/cloudwatch/events/all/${encodeURIComponent(arn)}`;
-               return new Promise(function(resolve, reject) {
-                   server.get(current_endpoint, api_key).then(function(response) {
-                       resolve(response);
-                   }).catch(function(error) {
-                       console.log(error);
-                       reject(error);
-                   });
-               });
-           };
-      
-           return {
-               "get_cloudwatch_events": get_cloudwatch_events               
-           };   
-       });
\ No newline at end of file
+import * as server from "./server.js";
+import * as connections from "./connections.js";
+
+export function get_cloudwatch_events(arn) {
+    //console.log(arn);
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/cloudwatch/events/all/${encodeURIComponent(arn)}`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key).then(function (response) {
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+}
+
diff --git a/source/html/js/app/connections.js b/source/html/js/app/connections.js
index a7ad1048..fd8fd5e8 100644
--- a/source/html/js/app/connections.js
+++ b/source/html/js/app/connections.js
@@ -1,105 +1,100 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "cookie", "app/window", "object_hash", "lodash"], function($, cookie, window, hash, _) {
+// Cookie: MSAM_CURRENT = "Cookie Name" or missing (not saved)
+// Cookie: MSAM_ENDPOINT_<ID> = "{ URL, Key, Last }"
 
-    'use strict';
 
-    // Cookie: MSAM_CURRENT = "Cookie Name" or missing (not saved)
-    // Cookie: MSAM_ENDPOINT_<ID> = "{ URL, Key, Last }"
+const cookie_name_current = "MSAM_CURRENT",
+    cookie_name_prefix = "MSAM_ENDPOINT_",
+    session_current = "MSAM_CURRENT",
+    max_age = 7;
 
-    var cookie_name_current = "MSAM_CURRENT",
-        cookie_name_prefix = "MSAM_ENDPOINT_",
-        session_current = "MSAM_CURRENT",
-        max_age = 7;
-
-    // return the stored connection objects
-    var get_remembered = _.memoize(function() {
-        var history = [],
-            cookies = cookie.get();
-        for (let name of Object.keys(cookies)) {
-            if (name.startsWith(cookie_name_prefix)) {
-                var payload = cookies[name],
-                    content = JSON.parse(window.atob(payload));
-                history.push(content);
-            }
+// return the stored connection objects
+const get_remembered = _.memoize(function () {
+    var history = [],
+        cookies = Cookies.get();
+    for (let name of Object.keys(cookies)) {
+        if (name.startsWith(cookie_name_prefix)) {
+            var payload = cookies[name],
+                content = JSON.parse(window.atob(payload));
+            history.push(content);
         }
-        return history;
-    });
+    }
+    return history;
+});
 
-    // return the session copy or the cookie copy, or null
-    var get_current = _.memoize(function() {
-        var current = null;
-        var encoded = window.sessionStorage.getItem(session_current);
-        if (encoded) {
-            current = JSON.parse(window.atob(encoded));
-        }
-        // get the cookie and refresh the expiration
-        var payload = cookie.get(cookie_name_current);
+// return the session copy or the cookie copy, or null
+const get_current = _.memoize(function () {
+    var current = null;
+    var encoded = window.sessionStorage.getItem(session_current);
+    if (encoded) {
+        current = JSON.parse(window.atob(encoded));
+    }
+    // get the cookie and refresh the expiration
+    var payload = Cookies.get(cookie_name_current);
+    if (payload) {
+        // set the cookie again for expiration
+        Cookies.set(cookie_name_current, payload, {
+            expires: max_age
+        });
+        var name = payload;
+        payload = Cookies.get(name);
+        // something?
         if (payload) {
             // set the cookie again for expiration
-            cookie.set(cookie_name_current, payload, {
+            Cookies.set(name, payload, {
                 expires: max_age
             });
-            var name = payload;
-            payload = cookie.get(name);
-            // something?
-            if (payload) {
-                // set the cookie again for expiration
-                cookie.set(name, payload, {
-                    expires: max_age
-                });
-                // set the session storage if not already
-                if (!current) {
-                    window.sessionStorage.setItem(session_current, payload);
-                    current = JSON.parse(window.atob(payload));
-                }
+            // set the session storage if not already
+            if (!current) {
+                window.sessionStorage.setItem(session_current, payload);
+                current = JSON.parse(window.atob(payload));
             }
         }
-        return current;
-    });
+    }
+    return current;
+});
 
-    // update the history with another connection
-    var set_current = function(url, api_key, store = true) {
-        clear_function_cache();
-        var current = [url, api_key];
-        window.sessionStorage.setItem(session_current, window.btoa(JSON.stringify(current)));
-        var cookie_name = cookie_name_prefix + hash.sha1(url);
-        var encoded = window.btoa(JSON.stringify(current));
-        if (store) {
-            // add or update MSAM_ENDPOINT_<ID> cookie
-            cookie.set(cookie_name, encoded, {
-                expires: max_age
-            });
-            // rewrite MSAM_CURRENT cookie
-            cookie.set(cookie_name_current, cookie_name, {
-                expires: max_age
-            });
-        } else {
-            cookie.remove(cookie_name_current);
-            cookie.remove(cookie_name);
-        }
-    };
+// update the history with another connection
+const set_current = function (url, api_key, store = true) {
+    clear_function_cache();
+    var current = [url, api_key];
+    window.sessionStorage.setItem(session_current, window.btoa(JSON.stringify(current)));
+    var cookie_name = cookie_name_prefix + objectHash.sha1(url);
+    var encoded = window.btoa(JSON.stringify(current));
+    if (store) {
+        // add or update MSAM_ENDPOINT_<ID> cookie
+        Cookies.set(cookie_name, encoded, {
+            expires: max_age
+        });
+        // rewrite MSAM_CURRENT cookie
+        Cookies.set(cookie_name_current, cookie_name, {
+            expires: max_age
+        });
+    } else {
+        Cookies.remove(cookie_name_current);
+        Cookies.remove(cookie_name);
+    }
+};
 
-    var clear_function_cache = function() {
-        get_current.cache.clear();
-        get_remembered.cache.clear();
-    };
+const clear_function_cache = function () {
+    get_current.cache.clear();
+    get_remembered.cache.clear();
+};
 
-    // is there a connection override on the URL parameters?
-    var current_url = new URL(window.location);
-    var endpoint = current_url.searchParams.get("endpoint");
-    var key = current_url.searchParams.get("key");
+// is there a connection override on the URL parameters?
+var current_url = new URL(window.location);
+var endpoint = current_url.searchParams.get("endpoint");
+var key = current_url.searchParams.get("key");
 
-    if (endpoint && key) {
-        // strip any trailing slashes
-        if (endpoint.endsWith("/")) {
-            var length = endpoint.length - 1;
-            endpoint = endpoint.substr(0, length);
-        }
-        console.log("Connection override with URL parameters");
-        set_current(endpoint, key, false);
+if (endpoint && key) {
+    // strip any trailing slashes
+    if (endpoint.endsWith("/")) {
+        endpoint = endpoint.substring(0, (endpoint.length - 1));
     }
+    console.log("Connection override with URL parameters");
+    set_current(endpoint, key, false);
+}
 
-    return { get_remembered, set_current, get_current };
-});
\ No newline at end of file
+export { get_remembered, set_current, get_current };
diff --git a/source/html/js/app/events.js b/source/html/js/app/events.js
index 1cee6d95..62c0360a 100644
--- a/source/html/js/app/events.js
+++ b/source/html/js/app/events.js
@@ -1,131 +1,132 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/server", "app/connections", "app/settings"],
-    function(server, connections, settings) {
+import * as server from "./server.js";
+import * as connections from "./connections.js";
+import * as settings from "./settings.js";
 
-        var listeners = [];
+var listeners = [];
 
-        // cache events in 'set' state
-        // several modules use this at the same time
+// cache events in 'set' state
+// several modules use this at the same time
 
-        var current_set_events = []; // superset of all alert events
-        var previous_set_events = [];
-        var current_mediaconnect_events = [];
-        var previous_mediaconnect_events = [];
-        var current_medialive_events = [];
-        var previous_medialive_events = [];
+var current_set_events = []; // superset of all alert events
+var previous_set_events = [];
+var current_mediaconnect_events = [];
+var previous_mediaconnect_events = [];
+var current_medialive_events = [];
+var previous_medialive_events = [];
 
-        // interval in millis to update the cache
+// interval in millis to update the cache
 
-        var update_interval;
+var update_interval;
 
-        var intervalID;
+var intervalID;
 
-        var settings_key = "app-event-update-interval";
+var settings_key = "app-event-update-interval";
 
-        // or does this have to be union of eml and emx sets??
-        var retrieve_for_state = function(state) {
-            var current_connection = connections.get_current();
-            var url = current_connection[0];
-            var api_key = current_connection[1];
-            var current_endpoint = `${url}/cloudwatch/events/state/${state}`;
-            return new Promise(function(resolve, reject) {
-                server.get(current_endpoint, api_key)
-                    .then(resolve)
-                    .catch(function(error) {
-                        console.log(error);
-                        reject(error);
-                    });
+// or does this have to be union of eml and emx sets??
+var retrieve_for_state = function (state) {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/cloudwatch/events/state/${state}`;
+    return new Promise(function (resolve, reject) {
+        server.get(current_endpoint, api_key)
+            .then(resolve)
+            .catch(function (error) {
+                console.error(error);
+                reject(error);
             });
-        };
-
-        var cache_update = function() {
-            retrieve_for_state("set").then(function(response) {
-                // console.log("updated set event cache");
-                previous_set_events = current_set_events;
-                current_set_events = response;
-                previous_medialive_events = _.filter(previous_set_events, function(i) {
-                    return (i.source == "aws.medialive");
-                });
-                current_medialive_events = _.filter(current_set_events, function(i) {
-                    return (i.source == "aws.medialive");
-                });
-                previous_mediaconnect_events = _.filter(previous_set_events, function(i) {
-                    return (i.source == "aws.mediaconnect");
-                });
-                current_mediaconnect_events = _.filter(current_set_events, function(i) {
-                    return (i.source == "aws.mediaconnect");
-                });
-                var added = _.differenceBy(current_set_events, previous_set_events, "alarm_id");
-                var removed = _.differenceBy(previous_set_events, current_set_events, "alarm_id");
-                if (added.length || removed.length) {
-                    for (let f of listeners) {
-                        f(current_set_events, previous_set_events);
-                    }
-                }
-            }).catch(function(error) {
-                console.log(error);
-            });
-        };
-
-        var load_update_interval = function() {
-            return new Promise(function(resolve, reject) {
-                settings.get(settings_key).then(function(value) {
-                    let seconds = Number.parseInt(value);
-                    update_interval = seconds * 1000;
-                    resolve();
-                });
-            });
-        };
-
-        var set_update_interval = function(seconds) {
-            // create a default
-            update_interval = seconds * 1000;
-            return settings.put(settings_key, seconds);
-        };
-
-        var schedule_interval = function() {
-            if (intervalID) {
-                clearInterval(intervalID);
-            }
-            intervalID = setInterval(cache_update, update_interval);
-            console.log("events: interval scheduled " + update_interval + "ms");
-        };
-
-        // load_update_interval().then(function() {
-        //     schedule_interval();
-        // });
-
-        load_update_interval();
-
-        return {
-            "get_cached_events": function() {
-                return {
-                    "current": current_set_events,
-                    "previous": previous_set_events,
-                    "current_mediaconnect": current_mediaconnect_events,
-                    "previous_mediaconnect": previous_mediaconnect_events,
-                    "current_medialive": current_medialive_events,
-                    "previous_medialive": previous_medialive_events
-                };
-            },
-            "add_callback": function(f) {
-                if (!listeners.includes(f)) {
-                    listeners.push(f);
-                }
-                if (!intervalID) {
-                    schedule_interval();
-                }
-            },
-            "set_update_interval": function(seconds) {
-                set_update_interval(seconds).then(function() {
-                    schedule_interval();
-                });
-            },
-            "get_update_interval": function() {
-                return update_interval;
+    });
+};
+
+var cache_update = function () {
+    retrieve_for_state("set").then(function (response) {
+        // console.log("updated set event cache");
+        previous_set_events = current_set_events;
+        current_set_events = response;
+        previous_medialive_events = _.filter(previous_set_events, function (i) {
+            return (i.source == "aws.medialive");
+        });
+        current_medialive_events = _.filter(current_set_events, function (i) {
+            return (i.source == "aws.medialive");
+        });
+        previous_mediaconnect_events = _.filter(previous_set_events, function (i) {
+            return (i.source == "aws.mediaconnect");
+        });
+        current_mediaconnect_events = _.filter(current_set_events, function (i) {
+            return (i.source == "aws.mediaconnect");
+        });
+        var added = _.differenceBy(current_set_events, previous_set_events, "alarm_id");
+        var removed = _.differenceBy(previous_set_events, current_set_events, "alarm_id");
+        if (added.length || removed.length) {
+            for (let f of listeners) {
+                f(current_set_events, previous_set_events);
             }
-        };
+        }
+    }).catch(function (error) {
+        console.error(error);
+    });
+};
+
+var load_update_interval = function () {
+    return new Promise(function (resolve) {
+        settings.get(settings_key).then(function (value) {
+            let seconds = Number.parseInt(value);
+            update_interval = seconds * 1000;
+            resolve();
+        });
+    });
+};
+
+var set_update_interval_setting = function (seconds) {
+    // create a default
+    update_interval = seconds * 1000;
+    return settings.put(settings_key, seconds);
+};
+
+var schedule_interval = function () {
+    if (intervalID) {
+        clearInterval(intervalID);
+    }
+    intervalID = setInterval(cache_update, update_interval);
+    console.log("events: interval scheduled " + update_interval + "ms");
+};
+
+load_update_interval();
+
+// return {
+export function get_cached_events() {
+    return {
+        "current": current_set_events,
+        "previous": previous_set_events,
+        "current_mediaconnect": current_mediaconnect_events,
+        "previous_mediaconnect": previous_mediaconnect_events,
+        "current_medialive": current_medialive_events,
+        "previous_medialive": previous_medialive_events
+    };
+}
+
+export function add_callback(f) {
+    if (!listeners.includes(f)) {
+        listeners.push(f);
+    }
+    // schedule the interval only when there's at least 1 listener
+    if (!intervalID) {
+        schedule_interval();
+    }
+}
+
+export function set_update_interval(seconds) {
+    set_update_interval_setting(seconds).then(function () {
+        if (intervalID) {
+            schedule_interval();
+        }
+    });
+}
+
+export function get_update_interval() {
+    return update_interval;
+}
 
-    });
\ No newline at end of file
diff --git a/source/html/js/app/main.js b/source/html/js/app/main.js
index 12cadb20..29f320b5 100644
--- a/source/html/js/app/main.js
+++ b/source/html/js/app/main.js
@@ -1,17 +1,19 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
 // this module bootstraps the state machine, which starts the application running
+// wait for the signal from JQuery before loading and initializing
 
-define(["jquery", "app/window"], function($, window) {
-    // wait for the signal before loading and initializing
-    $(window.document).ready(function() {
+$(window.document).ready(async function () {
+    // say hello
+    console.log("main");
+    try {
         // minimal modules required to start running
-        require(["app/statemachine", "app/ui/status_view"], function(statemachine) {
-            // say hello
-            console.log("main");
-            // start the outer FSM at the beginning
-            statemachine.getToolStateMachine().start();
-        });
-    });
-});
\ No newline at end of file
+        const statemachine = await import("./statemachine.js");
+        await import("./ui/status_view.js");
+        // start the outer FSM at the beginning
+        statemachine.getToolStateMachine().start();
+    } catch (error) {
+        console.error(error);
+    }
+});
diff --git a/source/html/js/app/mappers/connections/cloudfront_medialive_input.js b/source/html/js/app/mappers/connections/cloudfront_medialive_input.js
index c950a018..2b92f3a2 100644
--- a/source/html/js/app/mappers/connections/cloudfront_medialive_input.js
+++ b/source/html/js/app/mappers/connections/cloudfront_medialive_input.js
@@ -1,43 +1,33 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
-
-        'use strict';
-
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/cloudfront-distribution-medialive-input", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "label": data.scheme,
-                            "data": data,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/cloudfront-distribution-medialive-input", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "label": data.scheme,
+                    "data": data,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "CloudFront Distribution to MediaLive Input",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "CloudFront Distribution to MediaLive Input";
diff --git a/source/html/js/app/mappers/connections/link_device_medialive_input.js b/source/html/js/app/mappers/connections/link_device_medialive_input.js
index 67d8bf4a..c6cf1d46 100644
--- a/source/html/js/app/mappers/connections/link_device_medialive_input.js
+++ b/source/html/js/app/mappers/connections/link_device_medialive_input.js
@@ -1,43 +1,33 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
-
-        'use strict';
-
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/link-device-medialive-input", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "label": data.scheme,
-                            "data": data,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/link-device-medialive-input", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "label": data.scheme,
+                    "data": data,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "Elemental Link to MediaLive Input",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "Elemental Link to MediaLive Input";
diff --git a/source/html/js/app/mappers/connections/mediaconnect_flow_mediaconnect_flow.js b/source/html/js/app/mappers/connections/mediaconnect_flow_mediaconnect_flow.js
index 199949c5..4628c4c3 100644
--- a/source/html/js/app/mappers/connections/mediaconnect_flow_mediaconnect_flow.js
+++ b/source/html/js/app/mappers/connections/mediaconnect_flow_mediaconnect_flow.js
@@ -1,42 +1,35 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediaconnect-flow-mediaconnect-flow", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        var human_type = data.scheme.replace("-", " ");
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": human_type,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            },
-                            dashes: false,
-                        });
-                    }
-                    resolve();
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediaconnect-flow-mediaconnect-flow", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                const human_type = data.scheme.replace("-", " ");
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": human_type,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
+                    },
+                    dashes: false,
                 });
-            });
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        var update = function() {
-            return update_connections();
-        };
-
-        return {
-            "name": "MediaConnect Flow to MediaConnect Flow",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaConnect Flow to MediaConnect Flow";
diff --git a/source/html/js/app/mappers/connections/mediaconnect_flow_medialive_input.js b/source/html/js/app/mappers/connections/mediaconnect_flow_medialive_input.js
index 115f904d..332501e4 100644
--- a/source/html/js/app/mappers/connections/mediaconnect_flow_medialive_input.js
+++ b/source/html/js/app/mappers/connections/mediaconnect_flow_medialive_input.js
@@ -1,42 +1,37 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediaconnect-flow-medialive-input", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        var human_type = data.scheme.replace(/\_/, " ");
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": human_type,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            },
-                            dashes: false,
-                        });
-                    }
-                    resolve();
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
 
-        var update = function() {
-            return update_connections();
-        };
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediaconnect-flow-medialive-input", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                const human_type = data.scheme.replace(/_/, " ");
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": human_type,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
+                    },
+                    dashes: false,
+                });
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaConnect Flow to MediaLive Input",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaConnect Flow to MediaLive Input";
diff --git a/source/html/js/app/mappers/connections/medialive_channel_input.js b/source/html/js/app/mappers/connections/medialive_channel_input.js
index 6b38ab36..6a287869 100644
--- a/source/html/js/app/mappers/connections/medialive_channel_input.js
+++ b/source/html/js/app/mappers/connections/medialive_channel_input.js
@@ -1,39 +1,35 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/server", "app/connections"],
-    function($, _, model, server, connections) {
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-        const update_connections = () => {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-
-            return new Promise((resolve, reject) => {
-                server.get(`${url}/cached/medialive-channel-medialive-input`, api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            },
-                            dashes: false,
-                        });
-                    }
-                    resolve();
+export const update = () => {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(`${url}/cached/medialive-channel-medialive-input`, api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
+                    },
+                    dashes: false,
                 });
-            });
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        const update = () => {
-            return update_connections();
-        };
 
-        return { name: 'MediaLive Channel to MediaLive Input', update };
-    });
\ No newline at end of file
+export const module_name = 'MediaLive Channel to MediaLive Input';
diff --git a/source/html/js/app/mappers/connections/medialive_channel_mediaconnect_flow.js b/source/html/js/app/mappers/connections/medialive_channel_mediaconnect_flow.js
index 54ff4298..5961e38e 100644
--- a/source/html/js/app/mappers/connections/medialive_channel_mediaconnect_flow.js
+++ b/source/html/js/app/mappers/connections/medialive_channel_mediaconnect_flow.js
@@ -1,39 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/server", "app/connections"],
-    function($, _, model, server, connections) {
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-        const update_connections = () => {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-
-            return new Promise((resolve, reject) => {
-                server.get(`${url}/cached/medialive-channel-mediaconnect-flow`, api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            },
-                            dashes: false,
-                        });
-                    }
-                    resolve();
+export const update = () => {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(`${url}/cached/medialive-channel-mediaconnect-flow`, api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
+                    },
+                    dashes: false,
                 });
-            });
-        };
-
-        const update = () => {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return { name: 'MediaLive Channel to MediaConnect Flow', update };
-    });
\ No newline at end of file
+export const module_name = 'MediaLive Channel to MediaConnect Flow';
diff --git a/source/html/js/app/mappers/connections/medialive_channel_mediapackage_channel.js b/source/html/js/app/mappers/connections/medialive_channel_mediapackage_channel.js
index 7a87ed49..e3cdca8b 100644
--- a/source/html/js/app/mappers/connections/medialive_channel_mediapackage_channel.js
+++ b/source/html/js/app/mappers/connections/medialive_channel_mediapackage_channel.js
@@ -1,63 +1,57 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/server", "app/connections"],
-    function($, _, model, server, connections) {
-
-        const update_connections = () => {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-
-            return new Promise((resolve, reject) => {
-                server.get(`${url}/cached/medialive-channel-mediapackage-channel`, api_key).then((connections) => {
-                    for (let connection of connections) {
-                        const data = JSON.parse(connection.data);
-                        const options = {
-                            id: connection.arn,
-                            to: connection.to,
-                            from: connection.from,
-                            data: data,
-                            label: 'HLS',
-                            arrows: "to",
-                            color: { color: "black" },
-                            dashes: false,
-                        };
-                        const hasMoreConnections = _.filter(connections, (function(local_connection) {
-                            return function(o) {
-                                if (o.from === local_connection.from && o.to === local_connection.to) {
-                                    let shouldEndWith = '0';
-                                    if (local_connection.arn.endsWith('0'))
-                                        shouldEndWith = '1';
-                                    if (o.arn.endsWith(shouldEndWith))
-                                        return true;
-                                }
-                                return false;
-                            };
-                        })(connection));
-
-                        if (hasMoreConnections.length) {
-                            /** curve it */
-                            options.smooth = { enabled: true };
-                            options.smooth.type = 'discrete';
-
-                            if (_.has(data, "pipeline")) {
-                                options.label += ` ${data.pipeline}`;
-                                options.smooth.type = data.pipeline === 1 ? 'curvedCCW' : 'curvedCW';
-                                options.smooth.roundness = 0.15;
-                            }
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = () => {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(`${url}/cached/medialive-channel-mediapackage-channel`, api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                const options = {
+                    id: connection.arn,
+                    to: connection.to,
+                    from: connection.from,
+                    data: data,
+                    label: 'HLS',
+                    arrows: "to",
+                    color: { color: "black" },
+                    dashes: false,
+                };
+                const hasMoreConnections = _.filter(connections, (function (local_connection) {
+                    return function (o) {
+                        if (o.from === local_connection.from && o.to === local_connection.to) {
+                            let shouldEndWith = '0';
+                            if (local_connection.arn.endsWith('0'))
+                                shouldEndWith = '1';
+                            if (o.arn.endsWith(shouldEndWith))
+                                return true;
                         }
-
-                        model.edges.update(options);
+                        return false;
+                    };
+                })(connection));
+
+                if (hasMoreConnections.length) {
+                    /** curve it */
+                    options.smooth = { enabled: true };
+                    options.smooth.type = 'discrete';
+
+                    if (_.has(data, "pipeline")) {
+                        options.label += ` ${data.pipeline}`;
+                        options.smooth.type = data.pipeline === 1 ? 'curvedCCW' : 'curvedCW';
+                        options.smooth.roundness = 0.15;
                     }
-                    resolve();
-                });
-            });
-        };
-
-        const update = () => {
-            return update_connections();
-        };
-
-        return { name: 'MediaLive Channel to MediaPackage Channel', update };
-    });
\ No newline at end of file
+                }
+                items.push(options);
+            }
+            resolve(items);
+        });
+    });
+};
+
+export const module_name = 'MediaLive Channel to MediaPackage Channel';
diff --git a/source/html/js/app/mappers/connections/medialive_channel_mediastore_container.js b/source/html/js/app/mappers/connections/medialive_channel_mediastore_container.js
index 2d1db42b..3872b982 100644
--- a/source/html/js/app/mappers/connections/medialive_channel_mediastore_container.js
+++ b/source/html/js/app/mappers/connections/medialive_channel_mediastore_container.js
@@ -1,41 +1,35 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/medialive-channel-mediastore-container", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme + ":",
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            },
-                            dashes: false,
-                        });
-                    }
-                    resolve();
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-        var update = function() {
-            return update_connections();
-        };
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/medialive-channel-mediastore-container", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme + ":",
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
+                    },
+                    dashes: false,
+                });
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaLive Channel to MediaStore Container",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaLive Channel to MediaStore Container";
diff --git a/source/html/js/app/mappers/connections/medialive_channel_multiplex.js b/source/html/js/app/mappers/connections/medialive_channel_multiplex.js
index 167baff1..21fff3de 100644
--- a/source/html/js/app/mappers/connections/medialive_channel_multiplex.js
+++ b/source/html/js/app/mappers/connections/medialive_channel_multiplex.js
@@ -1,62 +1,57 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        const update_connections = () => {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-
-            return new Promise(resolve => {
-                const endpoint = `${url}/cached/medialive-channel-multiplex`;
-                server.get(endpoint, api_key)
-                    .then(connections => {
-                        for (let connection of connections) {
-                            const data = JSON.parse(connection.data);
-                            const options = {
-                                id: connection.arn,
-                                to: connection.to,
-                                from: connection.from,
-                                data: data,
-                                label: data.program,
-                                arrows: 'to',
-                                color: { color: 'black' },
-                                dashes: false,
-                            };
-                            const shouldEndWith = connection.arn.endsWith('0') ? '1' : '0';
-                            const local_connection = connection;
-                            const hasMoreConnections = _.filter(connections, function(o) {
-                                if (o.from === local_connection.from && o.to === local_connection.to) {
-                                    if (o.arn.endsWith(shouldEndWith))
-                                        return true;
-                                }
-                                return false;
-                            });
-
-                            if (hasMoreConnections.length) {
-                                /** curve it */
-                                options.smooth = { enabled: true };
-                                options.smooth.type = 'discrete';
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = () => {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise(resolve => {
+        const endpoint = `${url}/cached/medialive-channel-multiplex`;
+        server.get(endpoint, api_key)
+            .then(connections => {
+                for (let connection of connections) {
+                    const data = JSON.parse(connection.data);
+                    const options = {
+                        id: connection.arn,
+                        to: connection.to,
+                        from: connection.from,
+                        data: data,
+                        label: data.program,
+                        arrows: 'to',
+                        color: { color: 'black' },
+                        dashes: false,
+                    };
+                    const shouldEndWith = connection.arn.endsWith('0') ? '1' : '0';
+                    const local_connection = connection;
+                    const hasMoreConnections = _.filter(connections, function (o) {
+                        if (o.from === local_connection.from && o.to === local_connection.to) {
+                            if (o.arn.endsWith(shouldEndWith))
+                                return true;
+                        }
+                        return false;
+                    });
 
-                                if (_.has(data, 'pipeline')) {
-                                    options.label += ` ${data.pipeline}`;
-                                    options.smooth.type = data.pipeline === 1 ? 'curvedCCW' : 'curvedCW';
-                                    options.smooth.roundness = 0.15;
-                                }
-                            }
+                    if (hasMoreConnections.length) {
+                        /** curve it */
+                        options.smooth = { enabled: true };
+                        options.smooth.type = 'discrete';
 
-                            model.edges.update(options);
+                        if (_.has(data, 'pipeline')) {
+                            options.label += ` ${data.pipeline}`;
+                            options.smooth.type = data.pipeline === 1 ? 'curvedCCW' : 'curvedCW';
+                            options.smooth.roundness = 0.15;
                         }
-                        resolve();
-                    });
+                    }
+                    items.push(options);
+                }
+                resolve(items);
             });
-        };
-
-        const update = () => {
-            return update_connections();
-        };
+    });
+};
 
-        return { name: 'MediaLive Channel to Multiplex', update };
-    });
\ No newline at end of file
+export const module_name = 'MediaLive Channel to Multiplex';
diff --git a/source/html/js/app/mappers/connections/medialive_channel_s3_bucket.js b/source/html/js/app/mappers/connections/medialive_channel_s3_bucket.js
index 0f5b9024..17fb5676 100644
--- a/source/html/js/app/mappers/connections/medialive_channel_s3_bucket.js
+++ b/source/html/js/app/mappers/connections/medialive_channel_s3_bucket.js
@@ -1,41 +1,35 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/medialive-channel-s3-bucket", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            },
-                            dashes: false,
-                        });
-                    }
-                    resolve();
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-        var update = function() {
-            return update_connections();
-        };
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/medialive-channel-s3-bucket", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
+                    },
+                    dashes: false,
+                });
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaLive Channels to S3 Buckets",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaLive Channels to S3 Buckets";
diff --git a/source/html/js/app/mappers/connections/medialive_input_channel.js b/source/html/js/app/mappers/connections/medialive_input_channel.js
index 945db24e..ca218521 100644
--- a/source/html/js/app/mappers/connections/medialive_input_channel.js
+++ b/source/html/js/app/mappers/connections/medialive_input_channel.js
@@ -1,64 +1,57 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/server", "app/connections"],
-    function($, _, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/medialive-input-medialive-channel", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        const data = JSON.parse(connection.data);
-                        const options = {
-                            id: connection.arn,
-                            to: connection.to,
-                            from: connection.from,
-                            data: data,
-                            label: data.type.replace(/\_/, " "),
-                            arrows: "to",
-                            color: { color: "black" },
-                        };
-                        const hasMoreConnections = _.filter(connections, (function(local_connection) {
-                            return function(o) {
-                                if (o.from === local_connection.from && o.to === local_connection.to) {
-                                    let shouldEndWith = '0';
-                                    if (local_connection.arn.endsWith('0'))
-                                        shouldEndWith = '1';
-                                    if (o.arn.endsWith(shouldEndWith))
-                                        return true;
-                                }
-                                return false;
-                            };
-                        })(connection));
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-                        if (hasMoreConnections.length) {
-                            /** curve it */
-                            options.smooth = { enabled: true };
-                            options.smooth.type = 'discrete';
-
-                            if (_.has(data, "pipeline")) {
-                                options.label += ` ${data.pipeline}`;
-                                options.smooth.type = data.pipeline === 1 ? 'curvedCCW' : 'curvedCW';
-                                options.smooth.roundness = 0.15;
-                            }
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/medialive-input-medialive-channel", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                const options = {
+                    id: connection.arn,
+                    to: connection.to,
+                    from: connection.from,
+                    data: data,
+                    label: data.type.replace(/_/, " "),
+                    arrows: "to",
+                    color: { color: "black" },
+                };
+                const hasMoreConnections = _.filter(connections, (function (local_connection) {
+                    return function (o) {
+                        if (o.from === local_connection.from && o.to === local_connection.to) {
+                            let shouldEndWith = '0';
+                            if (local_connection.arn.endsWith('0'))
+                                shouldEndWith = '1';
+                            if (o.arn.endsWith(shouldEndWith))
+                                return true;
                         }
+                        return false;
+                    };
+                })(connection));
 
-                        model.edges.update(options);
-                    }
-                    resolve();
-                });
-            });
-        };
+                if (hasMoreConnections.length) {
+                    /** curve it */
+                    options.smooth = { enabled: true };
+                    options.smooth.type = 'discrete';
 
-        var update = function() {
-            return update_connections();
-        };
+                    if (_.has(data, "pipeline")) {
+                        options.label += ` ${data.pipeline}`;
+                        options.smooth.type = data.pipeline === 1 ? 'curvedCCW' : 'curvedCW';
+                        options.smooth.roundness = 0.15;
+                    }
+                }
+                items.push(options);
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaLive Input to Channel Connections",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaLive Input to Channel Connections";
diff --git a/source/html/js/app/mappers/connections/mediapackage_channel_endpoint.js b/source/html/js/app/mappers/connections/mediapackage_channel_endpoint.js
index 91708f72..b97ba277 100644
--- a/source/html/js/app/mappers/connections/mediapackage_channel_endpoint.js
+++ b/source/html/js/app/mappers/connections/mediapackage_channel_endpoint.js
@@ -1,44 +1,40 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediapackage-channel-mediapackage-origin-endpoint", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            id: connection.arn,
-                            to: connection.to,
-                            from: connection.from,
-                            data: data,
-                            label: data.package,
-                            arrows: "to",
-                            color: {
-                                color: "black"
-                            },
-                            smooth: {
-                                enabled: true,
-                                type: 'discrete'
-                            }
-                        });
+
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediapackage-channel-mediapackage-origin-endpoint", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    id: connection.arn,
+                    to: connection.to,
+                    from: connection.from,
+                    data: data,
+                    label: data.package,
+                    arrows: "to",
+                    color: {
+                        color: "black"
+                    },
+                    smooth: {
+                        enabled: true,
+                        type: 'discrete'
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaPackage Channel to Endpoint Connections",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaPackage Channel to Endpoint Connections";
diff --git a/source/html/js/app/mappers/connections/mediapackage_endpoint_cloudfront.js b/source/html/js/app/mappers/connections/mediapackage_endpoint_cloudfront.js
index ad8f49d6..2627773b 100644
--- a/source/html/js/app/mappers/connections/mediapackage_endpoint_cloudfront.js
+++ b/source/html/js/app/mappers/connections/mediapackage_endpoint_cloudfront.js
@@ -1,40 +1,35 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediapackage-origin-endpoint-cloudfront-distribution", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediapackage-origin-endpoint-cloudfront-distribution", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaPackage Endpoints to CloudFront Distributions",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaPackage Endpoints to CloudFront Distributions";
diff --git a/source/html/js/app/mappers/connections/mediapackage_endpoint_mediatailor_configuration.js b/source/html/js/app/mappers/connections/mediapackage_endpoint_mediatailor_configuration.js
index a7f4272c..3b6bb0b3 100644
--- a/source/html/js/app/mappers/connections/mediapackage_endpoint_mediatailor_configuration.js
+++ b/source/html/js/app/mappers/connections/mediapackage_endpoint_mediatailor_configuration.js
@@ -1,41 +1,36 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediapackage-origin-endpoint-mediatailor-configuration", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        var human_type = data.scheme.replace(/\_/, " ");
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": human_type,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediapackage-origin-endpoint-mediatailor-configuration", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                const human_type = data.scheme.replace(/_/, " ");
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": human_type,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaPackage Endpoint to MediaTailor Configuration",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaPackage Endpoint to MediaTailor Configuration";
diff --git a/source/html/js/app/mappers/connections/mediastore_container_cloudfront.js b/source/html/js/app/mappers/connections/mediastore_container_cloudfront.js
index 1554edd8..ef69240c 100644
--- a/source/html/js/app/mappers/connections/mediastore_container_cloudfront.js
+++ b/source/html/js/app/mappers/connections/mediastore_container_cloudfront.js
@@ -1,40 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediastore-container-cloudfront-distribution", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediastore-container-cloudfront-distribution", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaStore Containers to CloudFront Distributions",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaStore Containers to CloudFront Distributions";
diff --git a/source/html/js/app/mappers/connections/mediastore_container_medialive_input.js b/source/html/js/app/mappers/connections/mediastore_container_medialive_input.js
index 77524ba7..2f5b6ad0 100644
--- a/source/html/js/app/mappers/connections/mediastore_container_medialive_input.js
+++ b/source/html/js/app/mappers/connections/mediastore_container_medialive_input.js
@@ -1,40 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediastore-container-medialive-input", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme + ":",
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediastore-container-medialive-input", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme + ":",
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaStore Container to MediaLive Input",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaStore Container to MediaLive Input";
diff --git a/source/html/js/app/mappers/connections/mediastore_container_mediatailor_configuration.js b/source/html/js/app/mappers/connections/mediastore_container_mediatailor_configuration.js
index 00f60aaf..6331cb78 100644
--- a/source/html/js/app/mappers/connections/mediastore_container_mediatailor_configuration.js
+++ b/source/html/js/app/mappers/connections/mediastore_container_mediatailor_configuration.js
@@ -1,40 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediastore-container-mediatailor-configuration", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.scheme,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediastore-container-mediatailor-configuration", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.scheme,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaStore Container to MediaTailor Configurations",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaStore Container to MediaTailor Configurations";
diff --git a/source/html/js/app/mappers/connections/multiplex_mediaconnect_flow.js b/source/html/js/app/mappers/connections/multiplex_mediaconnect_flow.js
index c77e6976..acd47e62 100644
--- a/source/html/js/app/mappers/connections/multiplex_mediaconnect_flow.js
+++ b/source/html/js/app/mappers/connections/multiplex_mediaconnect_flow.js
@@ -1,40 +1,35 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/multiplex-mediaconnect-flow", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": "MEDIACONNECT",
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/multiplex-mediaconnect-flow", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": "MEDIACONNECT",
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "Multiplex to MediaConnect Flow",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "Multiplex to MediaConnect Flow";
diff --git a/source/html/js/app/mappers/connections/s3_bucket_cloudfront.js b/source/html/js/app/mappers/connections/s3_bucket_cloudfront.js
index 76f896bb..e40dfe90 100644
--- a/source/html/js/app/mappers/connections/s3_bucket_cloudfront.js
+++ b/source/html/js/app/mappers/connections/s3_bucket_cloudfront.js
@@ -1,40 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/s3-bucket-cloudfront-distribution", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "data": data,
-                            "label": data.label,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/s3-bucket-cloudfront-distribution", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "data": data,
+                    "label": data.label,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "S3 Buckets to CloudFront Distributions",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "S3 Buckets to CloudFront Distributions";
diff --git a/source/html/js/app/mappers/connections/s3_bucket_medialive_input.js b/source/html/js/app/mappers/connections/s3_bucket_medialive_input.js
index e133748f..9a1a9a62 100644
--- a/source/html/js/app/mappers/connections/s3_bucket_medialive_input.js
+++ b/source/html/js/app/mappers/connections/s3_bucket_medialive_input.js
@@ -1,40 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/s3-bucket-medialive-input", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "label": data.scheme,
-                            "data": data,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/s3-bucket-medialive-input", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "label": data.scheme,
+                    "data": data,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "S3 Buckets to MediaLive Inputs",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "S3 Buckets to MediaLive Inputs";
diff --git a/source/html/js/app/mappers/connections/s3_bucket_mediatailor_configuration.js b/source/html/js/app/mappers/connections/s3_bucket_mediatailor_configuration.js
index d678ca0b..60cdc9a1 100644
--- a/source/html/js/app/mappers/connections/s3_bucket_mediatailor_configuration.js
+++ b/source/html/js/app/mappers/connections/s3_bucket_mediatailor_configuration.js
@@ -1,47 +1,36 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/s3-bucket-mediatailor-configuration", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "label": data.scheme,
-                            "data": data,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/s3-bucket-mediatailor-configuration", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "label": data.scheme,
+                    "data": data,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        var update = function() {
-            return new Promise((resolve, reject) => {
-                update_connections().then(function() {
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
 
-        return {
-            "name": "S3 Buckets to MediaTailor Configurations",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "S3 Buckets to MediaTailor Configurations";
diff --git a/source/html/js/app/mappers/connections/speke.js b/source/html/js/app/mappers/connections/speke.js
index 8231b417..7d546166 100644
--- a/source/html/js/app/mappers/connections/speke.js
+++ b/source/html/js/app/mappers/connections/speke.js
@@ -1,40 +1,34 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/server", "app/connections"],
-    function($, model, server, connections) {
 
-        var update_connections = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediapackage-origin-endpoint-speke-keyserver", api_key).then((connections) => {
-                    for (let connection of connections) {
-                        var data = JSON.parse(connection.data);
-                        model.edges.update({
-                            "id": connection.arn,
-                            "to": connection.to,
-                            "from": connection.from,
-                            "label": data.scheme,
-                            "data": data,
-                            "arrows": "to",
-                            "color": {
-                                "color": "black"
-                            }
-                        });
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/mediapackage-origin-endpoint-speke-keyserver", api_key).then((connections) => {
+            for (let connection of connections) {
+                const data = JSON.parse(connection.data);
+                items.push({
+                    "id": connection.arn,
+                    "to": connection.to,
+                    "from": connection.from,
+                    "label": data.scheme,
+                    "data": data,
+                    "arrows": "to",
+                    "color": {
+                        "color": "black"
                     }
-                    resolve();
                 });
-            });
-        };
-
-        var update = function() {
-            return update_connections();
-        };
+            }
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "MediaPackage Origin Endpoint to SPEKE Keyserver",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaPackage Origin Endpoint to SPEKE Keyserver";
diff --git a/source/html/js/app/mappers/connections/user_defined_connection.js b/source/html/js/app/mappers/connections/user_defined_connection.js
index 84342b71..0ba3accd 100644
--- a/source/html/js/app/mappers/connections/user_defined_connection.js
+++ b/source/html/js/app/mappers/connections/user_defined_connection.js
@@ -1,4 +1,4 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
 // {
@@ -11,94 +11,88 @@
 //     "updated": 1535853752
 // }
 
-define(["jquery", "app/model", "app/server", "app/connections", "lodash"],
-    function($, model, server, connections, _) {
 
-        // vis.js edge roundness from 0.0 - 1.0
-        // 1.0 is a semicircle
-        const curvature_increment = 0.15;
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
 
-        const update_connections = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/user-defined-connection", api_key).then((connections) => {
-                    // group edges between nodes regardless of direction
-                    let edge_groups = _.reduce(
-                        connections,
-                        function(result, connection) {
-                            let id;
-                            if (connection.to > connection.from) {
-                                id = `${connection.from}:${connection.to}`;
-                            } else {
-                                id = `${connection.to}:${connection.from}`;
-                            }
-                            (result[id] || (result[id] = [])).push(connection);
-                            return result;
-                        }, {}
-                    );
-                    // iterate through each grouping to create the correct curvature and prevent overlap
-                    _.forEach(edge_groups, function(value) {
-                        // order the grouped connections by to, from and label
-                        let connections = _.orderBy(value, ['from', 'to', 'label']);
-                        let previous_from;
-                        for (let index in connections) {
-                            let connection = connections[index];
-                            let data;
-                            // data attribute is not required on custom connections
-                            if (typeof connection.data == 'undefined') {
-                                data = {};
+// vis.js edge roundness from 0.0 - 1.0
+// 1.0 is a semicircle
+const curvature_increment = 0.15;
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve) => {
+        server.get(url + "/cached/user-defined-connection", api_key).then((connections) => {
+            // group edges between nodes regardless of direction
+            let edge_groups = _.reduce(
+                connections,
+                function (result, connection) {
+                    let id;
+                    if (connection.to > connection.from) {
+                        id = `${connection.from}:${connection.to}`;
+                    } else {
+                        id = `${connection.to}:${connection.from}`;
+                    }
+                    (result[id] || (result[id] = [])).push(connection);
+                    return result;
+                }, {}
+            );
+            // iterate through each grouping to create the correct curvature and prevent overlap
+            _.forEach(edge_groups, function (value) {
+                // order the grouped connections by to, from and label
+                let connections = _.orderBy(value, ['from', 'to', 'label']);
+                let previous_from;
+                for (let index in connections) {
+                    let connection = connections[index];
+                    let data;
+                    // data attribute is not required on custom connections
+                    if (typeof connection.data == 'undefined') {
+                        data = {};
+                    } else {
+                        data = JSON.parse(connection.data);
+                    }
+                    //  connection options for vis.js
+                    const options = {
+                        "id": connection.arn,
+                        "to": connection.to,
+                        "from": connection.from,
+                        "label": connection.label,
+                        "data": data,
+                        "arrows": "to",
+                        "color": {
+                            "color": "black"
+                        }
+                    };
+                    // more than one connection needs curving, otherwise defaults to straight
+                    if (connections.length > 1) {
+                        options.smooth = { enabled: true };
+                        // alternating counter-clockwise and clockwise curve
+                        if (index % 2 == 0) {
+                            // first of the pair uses clockwise
+                            options.smooth.type = 'curvedCW';
+                        } else {
+                            // second of the pair might change direction
+                            if (previous_from && connection.from === previous_from) {
+                                // same direction, use counterclockwise
+                                options.smooth.type = 'curvedCCW';
                             } else {
-                                data = JSON.parse(connection.data);
-                            }
-                            //  connection options for vis.js
-                            const options = {
-                                "id": connection.arn,
-                                "to": connection.to,
-                                "from": connection.from,
-                                "label": connection.label,
-                                "data": data,
-                                "arrows": "to",
-                                "color": {
-                                    "color": "black"
-                                }
-                            };
-                            // more than one connection needs curving, otherwise defaults to straight
-                            if (connections.length > 1) {
-                                options.smooth = { enabled: true };
-                                // alternating counter-clockwise and clockwise curve
-                                if (index % 2 == 0) {
-                                    // first of the pair uses clockwise
-                                    options.smooth.type = 'curvedCW';
-                                } else {
-                                    // second of the pair might change direction
-                                    if (previous_from && connection.from === previous_from) {
-                                        // same direction, use counterclockwise
-                                        options.smooth.type = 'curvedCCW';
-                                    } else {
-                                        // opposite direction, use clockwise
-                                        options.smooth.type = 'curvedCW';
-                                    }
-                                }
-                                // determine the curvature needed, expands every 2
-                                options.smooth.roundness = (Math.floor(index / 2) * curvature_increment) + curvature_increment;
+                                // opposite direction, use clockwise
+                                options.smooth.type = 'curvedCW';
                             }
-                            previous_from = connection.from;
-                            model.edges.update(options);
                         }
-                    });
-                    resolve();
-                });
+                        // determine the curvature needed, expands every 2
+                        options.smooth.roundness = (Math.floor(index / 2) * curvature_increment) + curvature_increment;
+                    }
+                    previous_from = connection.from;
+                    items.push(options);
+                }
             });
-        };
-
-        const update = function() {
-            return update_connections();
-        };
+            resolve(items);
+        });
+    });
+};
 
-        return {
-            "name": "User-Defined Node Connections",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "User-Defined Node Connections";
diff --git a/source/html/js/app/mappers/mappers.js b/source/html/js/app/mappers/mappers.js
new file mode 100644
index 00000000..0be38099
--- /dev/null
+++ b/source/html/js/app/mappers/mappers.js
@@ -0,0 +1,68 @@
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+       SPDX-License-Identifier: Apache-2.0 */
+
+import * as node_cloudfront from "./nodes/cloudfront.js";
+import * as node_medialive from "./nodes/medialive.js";
+import * as node_mediapackage from "./nodes/mediapackage.js";
+import * as node_mediastore from "./nodes/mediastore.js";
+import * as node_s3 from "./nodes/s3.js";
+import * as node_speke from "./nodes/speke.js";
+import * as node_user_defined_node from "./nodes/user_defined_node.js";
+import * as node_mediatailor from "./nodes/mediatailor.js";
+import * as node_ec2 from "./nodes/ec2.js";
+import * as node_ssm_managed_instance from "./nodes/ssm_managed_instance.js";
+
+export const nodes = [node_cloudfront, node_medialive, node_mediapackage,
+    node_mediastore, node_s3, node_speke, node_user_defined_node, node_mediatailor,
+    node_ec2, node_ssm_managed_instance];
+
+import * as conn_cloudfront_medialive_input from "./connections/cloudfront_medialive_input.js";
+import * as conn_mediaconnect_flow_medialive_input from "./connections/mediaconnect_flow_medialive_input.js";
+import * as conn_mediaconnect_flow_mediaconnect_flow from "./connections/mediaconnect_flow_mediaconnect_flow.js";
+import * as conn_medialive_channel_mediapackage_channel from "./connections/medialive_channel_mediapackage_channel.js";
+import * as conn_medialive_channel_mediastore_container from "./connections/medialive_channel_mediastore_container.js";
+import * as conn_medialive_input_channel from "./connections/medialive_input_channel.js";
+import * as conn_medialive_channel_multiplex from "./connections/medialive_channel_multiplex.js";
+import * as conn_multiplex_mediaconnect_flow from "./connections/multiplex_mediaconnect_flow.js";
+import * as conn_mediapackage_channel_endpoint from "./connections/mediapackage_channel_endpoint.js";
+import * as conn_mediapackage_endpoint_cloudfront from "./connections/mediapackage_endpoint_cloudfront.js";
+import * as conn_mediastore_container_medialive_input from "./connections/mediastore_container_medialive_input.js";
+import * as conn_s3_bucket_medialive_input from "./connections/s3_bucket_medialive_input.js";
+import * as conn_s3_bucket_cloudfront from "./connections/s3_bucket_cloudfront.js";
+import * as conn_speke from "./connections/speke.js";
+import * as conn_user_defined_connection from "./connections/user_defined_connection.js";
+import * as conn_mediapackage_endpoint_mediatailor_configuration from "./connections/mediapackage_endpoint_mediatailor_configuration.js";
+import * as conn_s3_bucket_mediatailor_configuration from "./connections/s3_bucket_mediatailor_configuration.js";
+import * as conn_mediastore_container_mediatailor_configuration from "./connections/mediastore_container_mediatailor_configuration.js";
+import * as conn_mediastore_container_cloudfront from "./connections/mediastore_container_cloudfront.js";
+import * as conn_medialive_channel_s3_bucket from "./connections/medialive_channel_s3_bucket.js";
+import * as conn_link_device_medialive_input from "./connections/link_device_medialive_input.js";
+import * as conn_medialive_channel_input from "./connections/medialive_channel_input.js";
+import * as conn_medialive_channel_mediaconnect_flow from "./connections/medialive_channel_mediaconnect_flow.js";
+
+export const connections = [
+    conn_cloudfront_medialive_input,
+    conn_mediaconnect_flow_medialive_input,
+    conn_mediaconnect_flow_mediaconnect_flow,
+    conn_medialive_channel_mediapackage_channel,
+    conn_medialive_channel_mediastore_container,
+    conn_medialive_input_channel,
+    conn_medialive_channel_multiplex,
+    conn_multiplex_mediaconnect_flow,
+    conn_mediapackage_channel_endpoint,
+    conn_mediapackage_endpoint_cloudfront,
+    conn_mediastore_container_medialive_input,
+    conn_s3_bucket_medialive_input,
+    conn_s3_bucket_cloudfront,
+    conn_speke,
+    conn_user_defined_connection,
+    conn_mediapackage_endpoint_mediatailor_configuration,
+    conn_s3_bucket_mediatailor_configuration,
+    conn_mediastore_container_mediatailor_configuration,
+    conn_mediastore_container_cloudfront,
+    conn_medialive_channel_s3_bucket,
+    conn_link_device_medialive_input,
+    conn_medialive_channel_input,
+    conn_medialive_channel_mediaconnect_flow
+];
+
diff --git a/source/html/js/app/mappers/nodes/cloudfront.js b/source/html/js/app/mappers/nodes/cloudfront.js
index 29026d76..58ceb3e9 100644
--- a/source/html/js/app/mappers/nodes/cloudfront.js
+++ b/source/html/js/app/mappers/nodes/cloudfront.js
@@ -1,114 +1,108 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/model", "app/ui/svg_node"],
-    function($, server, connections, model, svg_node) {
 
-        const update_distributions = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            const rgb = "#D5DBDB";
-            const node_type = "CloudFront Distribution";
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/cloudfront-distribution", api_key).then((cache_entries) => {
-                    for (let cache_entry of cache_entries) {
-                        const item = JSON.parse(cache_entry.data);
-                        const name = item.Id;
-                        const id = item.ARN;
-                        let node_data = {
-                            "cache_update": cache_entry.updated,
-                            "id": id,
-                            "region": cache_entry.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": svg_node.unselected(node_type, name, rgb, id),
-                                "selected": svg_node.selected(node_type, name, rgb, id)
-                            },
-                            "header": "<b>CloudFront Distribution:</b> " + name,
-                            "data": item,
-                            "title": node_type,
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                let id = item.Id;
-                                let region = item.ARN.split(":")[3];
-                                if (region.trim().length == 0) {
-                                    region = 'us-east-1';
-                                }
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/cloudfront/home?region=${region}#distribution-settings:${id}`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                let id = item.Id;
-                                let region = item.ARN.split(":")[3];
-                                if (region.trim().length == 0) {
-                                    region = 'us-east-1';
-                                }
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/CloudFront;dimensions=DistributionId,Region`;
-                                    return html;
-                                };
-                            })()
-                        };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        let update = function() {
-            return update_distributions();
-        };
+export const update = function () {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const rgb = "#D5DBDB";
+    const node_type = "CloudFront Distribution";
+    const items = [];
+    return new Promise((resolve, reject) => {
+        server.get(url + "/cached/cloudfront-distribution", api_key).then(async (cache_entries) => {
+            for (let cache_entry of cache_entries) {
+                const item = JSON.parse(cache_entry.data);
+                const name = item.Id;
+                const id = item.ARN;
+                let node_data = {
+                    "cache_update": cache_entry.updated,
+                    "id": id,
+                    "region": cache_entry.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>CloudFront Distribution:</b> " + name,
+                    "data": item,
+                    "title": node_type,
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        let id = item.Id;
+                        let region = item.ARN.split(":")[3];
+                        if (region.trim().length == 0) {
+                            region = 'us-east-1';
+                        }
+                        return function () {
+                            let html = `https://console.aws.amazon.com/cloudfront/home?region=${region}#distribution-settings:${id}`;
+                            return html;
+                        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        let id = item.Id;
+                        let region = item.ARN.split(":")[3];
+                        if (region.trim().length == 0) {
+                            region = 'us-east-1';
+                        }
+                        return function () {
+                            let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/CloudFront;dimensions=DistributionId,Region`;
+                            return html;
+                        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        return {
-            "name": "CloudFront Distributions",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "CloudFront Distributions";
diff --git a/source/html/js/app/mappers/nodes/ec2.js b/source/html/js/app/mappers/nodes/ec2.js
index 87eefaa1..bf7bd4a8 100644
--- a/source/html/js/app/mappers/nodes/ec2.js
+++ b/source/html/js/app/mappers/nodes/ec2.js
@@ -1,123 +1,116 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
 
-        const update_configs = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise(function(resolve, reject) {
-                server.get(url + "/cached/ec2-instance", api_key).then(function(configs) {
-                    for (let cache_entry of configs) {
-                        // console.log(cache_entry);
-                        map_config(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        const map_config = function(cache_entry) {
-            const config = JSON.parse(cache_entry.data);
-            const name = config.InstanceId;
-            const id = cache_entry.arn;
-            const nodes = model.nodes;
-            const rgb = "#D5DBDB";
-            const generic_node_type = "EC2 Instance";
-            let node_type = generic_node_type;
-            if ('Tags' in config) {
-                if ('MSAM-NodeType' in config.Tags) {
-                    node_type = config.Tags['MSAM-NodeType'];
-                }
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise(function (resolve, reject) {
+        server.get(url + "/cached/ec2-instance", api_key).then(function (configs) {
+            for (let cache_entry of configs) {
+                // console.log(cache_entry);
+                map_config(cache_entry, items);
             }
-            let node_data = {
-                "overlay": "informational",
-                "cache_update": cache_entry.updated,
-                "id": id,
-                "region": cache_entry.region,
-                "shape": "image",
-                "image": {
-                    "unselected": null,
-                    "selected": null
-                },
-                "header": "<b>" + node_type + ":</b> " + name,
-                "data": config,
-                "title": node_type,
-                "name": name,
-                "size": 55,
-                "render": {
-                    normal_unselected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_rgb = rgb;
-                        let local_id = id;
-                        let local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
-                        };
-                    })(),
-                    normal_selected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_rgb = rgb;
-                        let local_id = id;
-                        let local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
-                        };
-                    })(),
-                    alert_unselected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_id = id;
-                        var local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
-                        };
-                    })(),
-                    alert_selected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_id = id;
-                        var local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
-                        };
-                    })()
-                },
-                "console_link": (function() {
-                    const region = id.split(":")[3];
-                    return function() {
-                        let html = `https://console.aws.amazon.com/ec2/v2/home?region=${region}#Instances:instanceId=${name}`;
-                        return html;
-                    };
-                })(),
-                "cloudwatch_link": (function() {
-                    const region = id.split(":")[3];
-                    return function() {
-                        let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fEC2*2cInstanceId*7d*20InstanceId*3d*22${name}*22`;
-                        return html;
-                    };
-                })(),
-                "generic_node_type": generic_node_type
-            };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
-
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const update = function() {
-            return update_configs();
-        };
+const map_config = function (cache_entry, items) {
+    const config = JSON.parse(cache_entry.data);
+    const name = config.InstanceId;
+    const id = cache_entry.arn;
+    const rgb = "#D5DBDB";
+    const generic_node_type = "EC2 Instance";
+    let node_type = generic_node_type;
+    if ('Tags' in config) {
+        if ('MSAM-NodeType' in config.Tags) {
+            node_type = config.Tags['MSAM-NodeType'];
+        }
+    }
+    let node_data = {
+        "overlay": "informational",
+        "cache_update": cache_entry.updated,
+        "id": id,
+        "region": cache_entry.region,
+        "shape": "image",
+        "image": {
+            "unselected": null,
+            "selected": null
+        },
+        "header": "<b>" + node_type + ":</b> " + name,
+        "data": config,
+        "title": node_type,
+        "name": name,
+        "size": 55,
+        "render": {
+            normal_unselected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_rgb = rgb;
+                let local_id = id;
+                let local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
+                };
+            })(),
+            normal_selected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_rgb = rgb;
+                let local_id = id;
+                let local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
+                };
+            })(),
+            alert_unselected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_id = id;
+                const local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
+                };
+            })(),
+            alert_selected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_id = id;
+                const local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
+                };
+            })()
+        },
+        "console_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                let html = `https://console.aws.amazon.com/ec2/v2/home?region=${region}#Instances:instanceId=${name}`;
+                return html;
+            };
+        })(),
+        "cloudwatch_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fEC2*2cInstanceId*7d*20InstanceId*3d*22${name}*22`;
+                return html;
+            };
+        })(),
+        "generic_node_type": generic_node_type
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        return {
-            "name": "EC2 Instances",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "EC2 Instances";
diff --git a/source/html/js/app/mappers/nodes/mediaconnect.js b/source/html/js/app/mappers/nodes/mediaconnect.js
index 9d8f03a5..8d7dbee8 100644
--- a/source/html/js/app/mappers/nodes/mediaconnect.js
+++ b/source/html/js/app/mappers/nodes/mediaconnect.js
@@ -1,116 +1,110 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
 
-        const update_flows = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise(function(resolve, reject) {
-                server.get(url + "/cached/mediaconnect-flow", api_key).then(function(flows) {
-                    for (let cache_entry of flows) {
-                        // console.log(cache_entry);
-                        map_flow(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise(function (resolve, reject) {
+        server.get(url + "/cached/mediaconnect-flow", api_key).then(function (flows) {
+            for (let cache_entry of flows) {
+                // console.log(cache_entry);
+                map_flow(cache_entry, items);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const map_flow = function(cache_entry) {
-            const flow = JSON.parse(cache_entry.data);
-            const name = flow.Name;
-            const id = flow.FlowArn;
-            const nodes = model.nodes;
-            const rgb = "#99ff33";
-            const node_type = "MediaConnect Flow";
-            let node_data = {
-                "overlay": "informational",
-                "cache_update": cache_entry.updated,
-                "id": id,
-                "region": cache_entry.region,
-                "shape": "image",
-                "image": {
-                    "unselected": null,
-                    "selected": null
-                },
-                "header": "<b>" + node_type + ":</b> " + name,
-                "data": flow,
-                "title": node_type,
-                "name": name,
-                "size": 55,
-                "render": {
-                    normal_unselected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_rgb = rgb;
-                        let local_id = id;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                        };
-                    })(),
-                    normal_selected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_rgb = rgb;
-                        let local_id = id;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                        };
-                    })(),
-                    alert_unselected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_id = id;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                        };
-                    })(),
-                    alert_selected: (function() {
-                        let local_node_type = node_type;
-                        let local_name = name;
-                        let local_id = id;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                        };
-                    })()
-                },
-                "console_link": (function() {
-                    let split_id = id.split(":");
-                    let region = split_id[3];
-                    return function() {
-                        let html = `https://${region}.console.aws.amazon.com/mediaconnect/home?region=${region}#/flows/${id}`;
-                        return html;
-                    };
-                })(),
-                "cloudwatch_link": (function() {
-                    let split_id = id.split(":");
-                    let region = split_id[3];
-                    let name = split_id[split_id.length - 1];
-                    return function() {
-                        let html = `https://${region}.console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fMediaConnect*2cFlowARN*7d*20${name}`;
-                        return html;
-                    };
-                })()
-            };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
 
+const map_flow = function (cache_entry, items) {
+    const flow = JSON.parse(cache_entry.data);
+    const name = flow.Name;
+    const id = flow.FlowArn;
+    const rgb = "#99ff33";
+    const node_type = "MediaConnect Flow";
+    let node_data = {
+        "overlay": "informational",
+        "cache_update": cache_entry.updated,
+        "id": id,
+        "region": cache_entry.region,
+        "shape": "image",
+        "image": {
+            "unselected": null,
+            "selected": null
+        },
+        "header": "<b>" + node_type + ":</b> " + name,
+        "data": flow,
+        "title": node_type,
+        "name": name,
+        "size": 55,
+        "render": {
+            normal_unselected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_rgb = rgb;
+                let local_id = id;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                };
+            })(),
+            normal_selected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_rgb = rgb;
+                let local_id = id;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                };
+            })(),
+            alert_unselected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_id = id;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                };
+            })(),
+            alert_selected: (function () {
+                let local_node_type = node_type;
+                let local_name = name;
+                let local_id = id;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                };
+            })()
+        },
+        "console_link": (function () {
+            let split_id = id.split(":");
+            let region = split_id[3];
+            return function () {
+                let html = `https://${region}.console.aws.amazon.com/mediaconnect/home?region=${region}#/flows/${id}`;
+                return html;
+            };
+        })(),
+        "cloudwatch_link": (function () {
+            let split_id = id.split(":");
+            let region = split_id[3];
+            let name = split_id[split_id.length - 1];
+            return function () {
+                let html = `https://${region}.console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fMediaConnect*2cFlowARN*7d*20${name}`;
+                return html;
+            };
+        })()
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        const update = function() {
-            return update_flows();
-        };
 
-        return {
-            "name": "MediaConnect Flows",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaConnect Flows";
diff --git a/source/html/js/app/mappers/nodes/medialive.js b/source/html/js/app/mappers/nodes/medialive.js
index d1b8bf59..6afe7b28 100644
--- a/source/html/js/app/mappers/nodes/medialive.js
+++ b/source/html/js/app/mappers/nodes/medialive.js
@@ -1,341 +1,345 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
 
-        const node_map_handler = (node_type, name, rgb, id, selected, data) => {
-            const local_id = id;
-            const local_rgb = rgb;
-            const local_name = name;
-            const local_node_type = node_type;
-            const method = selected ? 'selected' : 'unselected';
-            return () => svg_node[method](local_node_type, local_name, local_rgb, local_id, data);
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        const update_channels = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise(function(resolve, reject) {
-                server.get(`${url}/cached/medialive-channel`, api_key).then(function(channels) {
-                    for (let cache_entry of channels) {
-                        map_channel(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+const node_map_handler = (node_type, name, rgb, id, selected, data) => {
+    const local_id = id;
+    const local_rgb = rgb;
+    const local_name = name;
+    const local_node_type = node_type;
+    const method = selected ? 'selected' : 'unselected';
+    return () => svg_node[method](local_node_type, local_name, local_rgb, local_id, data);
+};
 
-        const update_inputs = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(`${url}/cached/medialive-input`, api_key).then((inputs) => {
-                    for (let cache_entry of inputs) {
-                        map_input(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+const update_channels = function (items) {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    return new Promise(function (resolve, reject) {
+        server.get(`${url}/cached/medialive-channel`, api_key).then(function (channels) {
+            for (let cache_entry of channels) {
+                map_channel(cache_entry, items);
+            }
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const update_multiplexes = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(`${url}/cached/medialive-multiplex`, api_key).then((inputs) => {
-                    for (let cache_entry of inputs) {
-                        map_multiplex(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+const update_inputs = function (items) {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    return new Promise((resolve, reject) => {
+        server.get(`${url}/cached/medialive-input`, api_key).then((inputs) => {
+            for (let cache_entry of inputs) {
+                map_input(cache_entry, items);
+            }
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const update_link_devices = function() {
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            return new Promise((resolve, reject) => {
-                server.get(`${url}/cached/link-device`, api_key).then((devices) => {
-                    for (let cache_entry of devices) {
-                        map_device(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+const update_multiplexes = function (items) {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    return new Promise((resolve, reject) => {
+        server.get(`${url}/cached/medialive-multiplex`, api_key).then((inputs) => {
+            for (let cache_entry of inputs) {
+                map_multiplex(cache_entry, items);
+            }
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const map_channel = function(cache_entry) {
-            const channel = JSON.parse(cache_entry.data);
+const update_link_devices = function (items) {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    return new Promise((resolve, reject) => {
+        server.get(`${url}/cached/link-device`, api_key).then((devices) => {
+            for (let cache_entry of devices) {
+                map_device(cache_entry, items);
+            }
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-            // console.log('Channel: %o', channel);
+const map_channel = function (cache_entry, items) {
+    const channel = JSON.parse(cache_entry.data);
 
-            const name = channel.Name;
-            const id = channel.Arn;
-            const nodes = model.nodes;
-            const rgb = "#1E8900";
-            const degraded_rgb = svg_node.getDegradedRgb();
-            const node_type = "MediaLive Channel";
-            let node_data = {
-                cache_update: cache_entry.updated,
-                id: id,
-                region: cache_entry.region,
-                shape: "image",
-                image: {
-                    unselected: null,
-                    selected: null
-                },
-                header: `<b>${node_type}:</b> ${name}`,
-                data: channel,
-                title: node_type,
-                name: name,
-                size: 55,
-                render: {
-                    normal_unselected: (() => node_map_handler(node_type, name, rgb, id, false, channel))(),
-                    normal_selected: (() => node_map_handler(node_type, name, rgb, id, true, channel))(),
-                    alert_unselected: (() => node_map_handler(node_type, name, "#ff0000", id, false, channel))(),
-                    alert_selected: (() => node_map_handler(node_type, name, "#ff0000", id, true, channel))(),
-                    degraded_unselected: (() => node_map_handler(node_type, name, degraded_rgb, id, false, channel))(),
-                    degraded_selected: (() => node_map_handler(node_type, name, degraded_rgb, id, true, channel))(),
-                },
-                console_link: (function() {
-                    const id = channel.Id;
-                    const region = channel.Arn.split(":")[3];
-                    return function() {
-                        const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}`;
-                        return html;
-                    };
-                })(),
-                alerts_link: (function() {
-                    const id = channel.Id;
-                    const region = channel.Arn.split(":")[3];
-                    return function() {
-                        const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}/alerts`;
-                        return html;
-                    };
-                })(),
-                cloudwatch_link: (function() {
-                    const id = channel.Id;
-                    const region = channel.Arn.split(":")[3];
-                    return function() {
-                        const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=MediaLive;dimensions=ChannelId,Pipeline`;
-                        return html;
-                    };
-                })()
+    // console.log('Channel: %o', channel);
+
+    const name = channel.Name;
+    const id = channel.Arn;
+    const rgb = "#1E8900";
+    const degraded_rgb = svg_node.getDegradedRgb();
+    const node_type = "MediaLive Channel";
+    let node_data = {
+        cache_update: cache_entry.updated,
+        id: id,
+        region: cache_entry.region,
+        shape: "image",
+        image: {
+            unselected: null,
+            selected: null
+        },
+        header: `<b>${node_type}:</b> ${name}`,
+        data: channel,
+        title: node_type,
+        name: name,
+        size: 55,
+        render: {
+            normal_unselected: (() => node_map_handler(node_type, name, rgb, id, false, channel))(),
+            normal_selected: (() => node_map_handler(node_type, name, rgb, id, true, channel))(),
+            alert_unselected: (() => node_map_handler(node_type, name, "#ff0000", id, false, channel))(),
+            alert_selected: (() => node_map_handler(node_type, name, "#ff0000", id, true, channel))(),
+            degraded_unselected: (() => node_map_handler(node_type, name, degraded_rgb, id, false, channel))(),
+            degraded_selected: (() => node_map_handler(node_type, name, degraded_rgb, id, true, channel))(),
+        },
+        console_link: (function () {
+            const id = channel.Id;
+            const region = channel.Arn.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}`;
+                return html;
+            };
+        })(),
+        alerts_link: (function () {
+            const id = channel.Id;
+            const region = channel.Arn.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}/alerts`;
+                return html;
             };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
+        })(),
+        cloudwatch_link: (function () {
+            const id = channel.Id;
+            const region = channel.Arn.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=MediaLive;dimensions=ChannelId,Pipeline`;
+                return html;
+            };
+        })()
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        const map_input = function(cache_entry) {
-            const input = JSON.parse(cache_entry.data);
+const map_input = function (cache_entry, items) {
+    const input = JSON.parse(cache_entry.data);
 
-            // console.log('Input: %o', input);
+    // console.log('Input: %o', input);
 
-            const name = input.Name;
-            const id = input.Arn;
-            const nodes = model.nodes;
-            const node_type = "MediaLive Input";
-            const rgb = "#6AAF35";
-            const degraded_rgb = svg_node.getDegradedRgb();
-            let node_data = {
-                cache_update: cache_entry.updated,
-                id: input.Arn,
-                region: cache_entry.region,
-                shape: "image",
-                image: {
-                    unselected: null,
-                    selected: null
-                },
-                header: `<b>${node_type}:</b> ${name}`,
-                data: input,
-                title: node_type,
-                name: name,
-                size: 55,
-                render: {
-                    normal_unselected: (() => node_map_handler(node_type, name, rgb, id, false, input))(),
-                    normal_selected: (() => node_map_handler(node_type, name, rgb, id, true, input))(),
-                    alert_unselected: (() => node_map_handler(node_type, name, "#ff0000", id, false, input))(),
-                    alert_selected: (() => node_map_handler(node_type, name, "#ff0000", id, true, input))(),
-                    degraded_unselected: (() => node_map_handler(node_type, name, degraded_rgb, id, false, input))(),
-                    degraded_selected: (() => node_map_handler(node_type, name, degraded_rgb, id, true, input))(),
-                },
-                console_link: (function() {
-                    const id = input.Id;
-                    const region = input.Arn.split(":")[3];
-                    return function() {
-                        const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/inputs/${id}`;
-                        return html;
-                    };
-                })(),
-                cloudwatch_link: (function() {
-                    return function() {
-                        const html = `https://console.aws.amazon.com/cloudwatch/home`;
-                        return html;
-                    };
-                })()
+    const name = input.Name;
+    const id = input.Arn;
+    const node_type = "MediaLive Input";
+    const rgb = "#6AAF35";
+    const degraded_rgb = svg_node.getDegradedRgb();
+    let node_data = {
+        cache_update: cache_entry.updated,
+        id: input.Arn,
+        region: cache_entry.region,
+        shape: "image",
+        image: {
+            unselected: null,
+            selected: null
+        },
+        header: `<b>${node_type}:</b> ${name}`,
+        data: input,
+        title: node_type,
+        name: name,
+        size: 55,
+        render: {
+            normal_unselected: (() => node_map_handler(node_type, name, rgb, id, false, input))(),
+            normal_selected: (() => node_map_handler(node_type, name, rgb, id, true, input))(),
+            alert_unselected: (() => node_map_handler(node_type, name, "#ff0000", id, false, input))(),
+            alert_selected: (() => node_map_handler(node_type, name, "#ff0000", id, true, input))(),
+            degraded_unselected: (() => node_map_handler(node_type, name, degraded_rgb, id, false, input))(),
+            degraded_selected: (() => node_map_handler(node_type, name, degraded_rgb, id, true, input))(),
+        },
+        console_link: (function () {
+            const id = input.Id;
+            const region = input.Arn.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/inputs/${id}`;
+                return html;
+            };
+        })(),
+        cloudwatch_link: (function () {
+            return function () {
+                const html = `https://console.aws.amazon.com/cloudwatch/home`;
+                return html;
             };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
+        })()
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        const map_multiplex = function(cache_entry) {
-            const input = JSON.parse(cache_entry.data);
+const map_multiplex = function (cache_entry, items) {
+    const input = JSON.parse(cache_entry.data);
 
-            // console.log('Input: %o', input);
+    // console.log('Input: %o', input);
 
-            const name = input.Name;
-            const id = input.Arn;
-            const nodes = model.nodes;
-            const node_type = "MediaLive Multiplex";
-            const rgb = "#6a8258";
-            const degraded_rgb = svg_node.getDegradedRgb();
-            let node_data = {
-                cache_update: cache_entry.updated,
-                id: input.Arn,
-                region: cache_entry.region,
-                shape: "image",
-                image: {
-                    unselected: null,
-                    selected: null
-                },
-                header: `<b>${node_type}:</b> ${name}`,
-                data: input,
-                title: node_type,
-                name: name,
-                size: 55,
-                render: {
-                    normal_unselected: (() => node_map_handler(node_type, name, rgb, id, false, input))(),
-                    normal_selected: (() => node_map_handler(node_type, name, rgb, id, true, input))(),
-                    alert_unselected: (() => node_map_handler(node_type, name, "#ff0000", id, false, input))(),
-                    alert_selected: (() => node_map_handler(node_type, name, "#ff0000", id, true, input))(),
-                    degraded_unselected: (() => node_map_handler(node_type, name, degraded_rgb, id, false, input))(),
-                    degraded_selected: (() => node_map_handler(node_type, name, degraded_rgb, id, true, input))(),
-                },
-                console_link: (function() {
-                    const id = input.Id;
-                    const region = input.Arn.split(":")[3];
-                    return function() {
-                        const html = `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}`;
-                        return html;
-                    };
-                })(),
-                alerts_link: (function() {
-                    const id = input.Id;
-                    const region = input.Arn.split(":")[3];
-                    return function() {
-                        const html = `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}/alerts`;
-                        return html;
-                    };
-                })(),
-                cloudwatch_link: (function() {
-                    return function() {
-                        return 'https://console.aws.amazon.com/cloudwatch/home';
-                    };
-                })()
+    const name = input.Name;
+    const id = input.Arn;
+    const node_type = "MediaLive Multiplex";
+    const rgb = "#6a8258";
+    const degraded_rgb = svg_node.getDegradedRgb();
+    let node_data = {
+        cache_update: cache_entry.updated,
+        id: input.Arn,
+        region: cache_entry.region,
+        shape: "image",
+        image: {
+            unselected: null,
+            selected: null
+        },
+        header: `<b>${node_type}:</b> ${name}`,
+        data: input,
+        title: node_type,
+        name: name,
+        size: 55,
+        render: {
+            normal_unselected: (() => node_map_handler(node_type, name, rgb, id, false, input))(),
+            normal_selected: (() => node_map_handler(node_type, name, rgb, id, true, input))(),
+            alert_unselected: (() => node_map_handler(node_type, name, "#ff0000", id, false, input))(),
+            alert_selected: (() => node_map_handler(node_type, name, "#ff0000", id, true, input))(),
+            degraded_unselected: (() => node_map_handler(node_type, name, degraded_rgb, id, false, input))(),
+            degraded_selected: (() => node_map_handler(node_type, name, degraded_rgb, id, true, input))(),
+        },
+        console_link: (function () {
+            const id = input.Id;
+            const region = input.Arn.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}`;
+                return html;
             };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
+        })(),
+        alerts_link: (function () {
+            const id = input.Id;
+            const region = input.Arn.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}/alerts`;
+                return html;
+            };
+        })(),
+        cloudwatch_link: (function () {
+            return function () {
+                return 'https://console.aws.amazon.com/cloudwatch/home';
+            };
+        })()
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        const map_device = function(cache_entry) {
-            const device = JSON.parse(cache_entry.data);
-            const name = device.Id;
-            const id = cache_entry.arn;
-            const nodes = model.nodes;
-            const rgb = "#D5DBDB";
-            const node_type = "Elemental Link";
-            let node_data = {
-                "overlay": "informational",
-                "cache_update": cache_entry.updated,
-                "id": id,
-                "region": cache_entry.region,
-                "shape": "image",
-                "image": {
-                    "unselected": null,
-                    "selected": null
-                },
-                "header": "<b>" + node_type + ":</b> " + name,
-                "data": device,
-                "title": node_type,
-                "name": name,
-                "size": 55,
-                "render": {
-                    normal_unselected: (function() {
-                        const local_node_type = node_type;
-                        const local_name = name;
-                        const local_rgb = rgb;
-                        const local_id = id;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                        };
-                    })(),
-                    normal_selected: (function() {
-                        const local_node_type = node_type;
-                        const local_name = name;
-                        const local_rgb = rgb;
-                        const local_id = id;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                        };
-                    })(),
-                    alert_unselected: (function() {
-                        const local_node_type = node_type;
-                        const local_name = name;
-                        const local_id = id;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                        };
-                    })(),
-                    alert_selected: (function() {
-                        const local_node_type = node_type;
-                        const local_name = name;
-                        const local_id = id;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                        };
-                    })()
-                },
-                "console_link": (function() {
-                    const region = id.split(":")[3];
-                    return function() {
-                        const html = `https://${region}.console.aws.amazon.com/medialive/home?region=${region}#!/devices/${name}`;
-                        return html;
-                    };
-                })(),
-                "cloudwatch_link": (function() {
-                    return function() {
-                        return "https://console.aws.amazon.com/cloudwatch/";
-                    };
-                })()
+const map_device = function (cache_entry, items) {
+    const device = JSON.parse(cache_entry.data);
+    const name = device.Id;
+    const id = cache_entry.arn;
+    const rgb = "#D5DBDB";
+    const node_type = "Elemental Link";
+    let node_data = {
+        "overlay": "informational",
+        "cache_update": cache_entry.updated,
+        "id": id,
+        "region": cache_entry.region,
+        "shape": "image",
+        "image": {
+            "unselected": null,
+            "selected": null
+        },
+        "header": "<b>" + node_type + ":</b> " + name,
+        "data": device,
+        "title": node_type,
+        "name": name,
+        "size": 55,
+        "render": {
+            normal_unselected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_rgb = rgb;
+                const local_id = id;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                };
+            })(),
+            normal_selected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_rgb = rgb;
+                const local_id = id;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                };
+            })(),
+            alert_unselected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_id = id;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                };
+            })(),
+            alert_selected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_id = id;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                };
+            })()
+        },
+        "console_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                const html = `https://${region}.console.aws.amazon.com/medialive/home?region=${region}#!/devices/${name}`;
+                return html;
+            };
+        })(),
+        "cloudwatch_link": (function () {
+            return function () {
+                return "https://console.aws.amazon.com/cloudwatch/";
             };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
+        })()
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        const update = () => {
-            return Promise.all([update_channels(), update_inputs(), update_multiplexes(), update_link_devices()]);
-        };
+export const update = () => {
+    const items = [];
+    return new Promise((resolve, reject) => {
+        Promise.all([update_channels(items), update_inputs(items), update_multiplexes(items), update_link_devices(items)]).then(() => {
+            resolve(items);
+        }).catch((error) => {
+            reject(error);
+        });
+    });
+};
 
-        return { name: "MediaLive Inputs, Channels, Multiplexes, Elemental Link", update: update };
-    });
\ No newline at end of file
+export const module_name = "MediaLive Inputs, Channels, Multiplexes, Elemental Link";
diff --git a/source/html/js/app/mappers/nodes/mediapackage.js b/source/html/js/app/mappers/nodes/mediapackage.js
index a0da41f2..1ab1e4a4 100644
--- a/source/html/js/app/mappers/nodes/mediapackage.js
+++ b/source/html/js/app/mappers/nodes/mediapackage.js
@@ -1,202 +1,206 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
 
-        const update_channels = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            const node_type = "MediaPackage Channel";
-            const rgb = "#007DBC";
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediapackage-channel", api_key).then((channels) => {
-                    for (let cache_entry of channels) {
-                        const channel = JSON.parse(cache_entry.data);
-                        const name = channel.Id;
-                        const id = channel.Arn;
-                        let node_data = {
-                            "cache_update": cache_entry.updated,
-                            "id": channel.Arn,
-                            "region": cache_entry.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": null,
-                                "selected": null
-                            },
-                            "header": "<b>MediaPackage Channel:</b> " + channel.Id,
-                            "data": channel,
-                            "title": "MediaPackage Channel",
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                let id = channel.Id;
-                                let region = channel.Arn.split(":")[3];
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${id}`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                let id = channel.Id;
-                                let region = channel.Arn.split(":")[3];
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel`;
-                                    return html;
-                                };
-                            })()
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
+
+
+const update_channels = function (items) {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const node_type = "MediaPackage Channel";
+    const rgb = "#007DBC";
+    return new Promise((resolve, reject) => {
+        server.get(url + "/cached/mediapackage-channel", api_key).then((channels) => {
+            for (let cache_entry of channels) {
+                const channel = JSON.parse(cache_entry.data);
+                const name = channel.Id;
+                const id = channel.Arn;
+                let node_data = {
+                    "cache_update": cache_entry.updated,
+                    "id": channel.Arn,
+                    "region": cache_entry.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>MediaPackage Channel:</b> " + channel.Id,
+                    "data": channel,
+                    "title": "MediaPackage Channel",
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        let id = channel.Id;
+                        let region = channel.Arn.split(":")[3];
+                        return function () {
+                            let html = `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${id}`;
+                            return html;
                         };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        let id = channel.Id;
+                        let region = channel.Arn.split(":")[3];
+                        return function () {
+                            let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel`;
+                            return html;
+                        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const update_endpoints = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            const node_type = "MediaPackage Endpoint";
-            const rgb = "#00A1C9";
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediapackage-origin-endpoint", api_key).then((origin_endpoints) => {
-                    for (let cache_entry of origin_endpoints) {
-                        const endpoint = JSON.parse(cache_entry.data);
-                        const name = endpoint.Id;
-                        const id = endpoint.Arn;
-                        let node_data = {
-                            "cache_update": cache_entry.updated,
-                            "id": id,
-                            "region": cache_entry.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": null,
-                                "selected": null
-                            },
-                            "header": "<b>MediaPackage Endpoint:</b> " + endpoint.Id,
-                            "data": endpoint,
-                            "title": node_type,
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                let id = endpoint.Id;
-                                let parent_id = endpoint.ChannelId;
-                                let region = endpoint.Arn.split(":")[3];
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${parent_id}/endpoints/${id}`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                let id = endpoint.Id;
-                                let region = endpoint.Arn.split(":")[3];
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel,OriginEndpoint`;
-                                    return html;
-                                };
-                            })()
+const update_endpoints = function (items) {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const node_type = "MediaPackage Endpoint";
+    const rgb = "#00A1C9";
+    return new Promise((resolve, reject) => {
+        server.get(url + "/cached/mediapackage-origin-endpoint", api_key).then((origin_endpoints) => {
+            for (let cache_entry of origin_endpoints) {
+                const endpoint = JSON.parse(cache_entry.data);
+                const name = endpoint.Id;
+                const id = endpoint.Arn;
+                let node_data = {
+                    "cache_update": cache_entry.updated,
+                    "id": id,
+                    "region": cache_entry.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>MediaPackage Endpoint:</b> " + endpoint.Id,
+                    "data": endpoint,
+                    "title": node_type,
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        let id = endpoint.Id;
+                        let parent_id = endpoint.ChannelId;
+                        let region = endpoint.Arn.split(":")[3];
+                        return function () {
+                            let html = `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${parent_id}/endpoints/${id}`;
+                            return html;
+                        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        let id = endpoint.Id;
+                        let region = endpoint.Arn.split(":")[3];
+                        return function () {
+                            let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel,OriginEndpoint`;
+                            return html;
                         };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const update = function() {
-            return Promise.all([update_channels(), update_endpoints()]);
-        };
+export const update = function () {
+    const items = [];
+    return new Promise((resolve, reject) => {
+        Promise.all([update_channels(items), update_endpoints(items)]).then(() => {
+            resolve(items);
+        }).catch((error) => {
+            reject(error);
+        });
+    });
+};
 
-        return {
-            "name": "MediaPackage Channels and Endpoints",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaPackage Channels and Endpoints";
diff --git a/source/html/js/app/mappers/nodes/mediastore.js b/source/html/js/app/mappers/nodes/mediastore.js
index a33eeac8..043e4a95 100644
--- a/source/html/js/app/mappers/nodes/mediastore.js
+++ b/source/html/js/app/mappers/nodes/mediastore.js
@@ -1,107 +1,100 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
-
-        const update_containers = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            const rgb = "#D5DBDB";
-            const node_type = "MediaStore Container";
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/mediastore-container", api_key).then((cache_entries) => {
-                    for (let cache_entry of cache_entries) {
-                        const container = JSON.parse(cache_entry.data);
-                        const name = container.Name;
-                        const id = container.ARN;
-                        const node_data = {
-                            "cache_update": cache_entry.updated,
-                            "id": id,
-                            "region": cache_entry.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": null,
-                                "selected": null
-                            },
-                            "header": "<b>MediaStore Container:</b> " + name,
-                            "data": container,
-                            "title": "MediaStore Container",
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_rgb = rgb;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_rgb = rgb;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                const id = container.Name;
-                                const region = container.ARN.split(":")[3];
-                                return function() {
-                                    const html = `https://${region}.console.aws.amazon.com/mediastore/home/containers/${id}`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                return function() {
-                                    const html = `https://console.aws.amazon.com/cloudwatch/home`;
-                                    return html;
-                                };
-                            })()
-                        };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
 
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        const update = function() {
-            return update_containers();
-        };
+export const update = function () {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const rgb = "#D5DBDB";
+    const node_type = "MediaStore Container";
+    const items = [];
+    return new Promise((resolve, reject) => {
+        server.get(url + "/cached/mediastore-container", api_key).then((cache_entries) => {
+            for (let cache_entry of cache_entries) {
+                const container = JSON.parse(cache_entry.data);
+                const name = container.Name;
+                const id = container.ARN;
+                const node_data = {
+                    "cache_update": cache_entry.updated,
+                    "id": id,
+                    "region": cache_entry.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>MediaStore Container:</b> " + name,
+                    "data": container,
+                    "title": "MediaStore Container",
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_rgb = rgb;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_rgb = rgb;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        const id = container.Name;
+                        const region = container.ARN.split(":")[3];
+                        return function () {
+                            const html = `https://${region}.console.aws.amazon.com/mediastore/home/containers/${id}`;
+                            return html;
+                        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        return function () {
+                            const html = `https://console.aws.amazon.com/cloudwatch/home`;
+                            return html;
+                        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        return {
-            "name": "MediaStore Containers",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaStore Containers";
diff --git a/source/html/js/app/mappers/nodes/mediatailor.js b/source/html/js/app/mappers/nodes/mediatailor.js
index 4ee7a1f0..2a993286 100644
--- a/source/html/js/app/mappers/nodes/mediatailor.js
+++ b/source/html/js/app/mappers/nodes/mediatailor.js
@@ -1,112 +1,107 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
 
-        var update_configs = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise(function(resolve, reject) {
-                server.get(url + "/cached/mediatailor-configuration", api_key).then(function(configs) {
-                    for (let cache_entry of configs) {
-                        // console.log(cache_entry);
-                        map_config(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        var map_config = function(cache_entry) {
-            var config = JSON.parse(cache_entry.data);
-            var name = config.Name;
-            var id = config.PlaybackConfigurationArn;
-            var nodes = model.nodes;
-            var rgb = "#80e5ff";
-            var node_type = "MediaTailor Configuration";
-            var node_data = {
-                "overlay": "informational",
-                "cache_update": cache_entry.updated,
-                "id": id,
-                "region": cache_entry.region,
-                "shape": "image",
-                "image": {
-                    "unselected": null,
-                    "selected": null
-                },
-                "header": "<b>" + node_type + ":</b> " + name,
-                "data": config,
-                "title": node_type,
-                "name": name,
-                "size": 55,
-                "render": {
-                    normal_unselected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_rgb = rgb;
-                        var local_id = id;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                        };
-                    })(),
-                    normal_selected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_rgb = rgb;
-                        var local_id = id;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                        };
-                    })(),
-                    alert_unselected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_id = id;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                        };
-                    })(),
-                    alert_selected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_id = id;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                        };
-                    })()
-                },
-                "console_link": (function() {
-                    var region = id.split(":")[3];
-                    return function() {
-                        var html = `https://console.aws.amazon.com/mediatailor/home?region=${region}#/config/${name}`;
-                        return html;
-                    };
-                })(),
-                "cloudwatch_link": (function() {
-                    var region = id.split(":")[3];
-                    return function() {
-                        var html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#logs:prefix=MediaTailor`;
-                        return html;
-                    };
-                })()
-            };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
 
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise(function (resolve, reject) {
+        server.get(url + "/cached/mediatailor-configuration", api_key).then(function (configs) {
+            for (let cache_entry of configs) {
+                // console.log(cache_entry);
+                map_config(cache_entry, items);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
+
+const map_config = function (cache_entry, items) {
+    const config = JSON.parse(cache_entry.data);
+    const name = config.Name;
+    const id = config.PlaybackConfigurationArn;
+    const rgb = "#80e5ff";
+    const node_type = "MediaTailor Configuration";
+    const node_data = {
+        "overlay": "informational",
+        "cache_update": cache_entry.updated,
+        "id": id,
+        "region": cache_entry.region,
+        "shape": "image",
+        "image": {
+            "unselected": null,
+            "selected": null
+        },
+        "header": "<b>" + node_type + ":</b> " + name,
+        "data": config,
+        "title": node_type,
+        "name": name,
+        "size": 55,
+        "render": {
+            normal_unselected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_rgb = rgb;
+                const local_id = id;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                };
+            })(),
+            normal_selected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_rgb = rgb;
+                const local_id = id;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                };
+            })(),
+            alert_unselected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_id = id;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                };
+            })(),
+            alert_selected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_id = id;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                };
+            })()
+        },
+        "console_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/mediatailor/home?region=${region}#/config/${name}`;
+                return html;
+            };
+        })(),
+        "cloudwatch_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#logs:prefix=MediaTailor`;
+                return html;
+            };
+        })()
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        var update = function() {
-            return update_configs();
-        };
 
-        return {
-            "name": "MediaTailor Configurations",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "MediaTailor Configurations";
diff --git a/source/html/js/app/mappers/nodes/s3.js b/source/html/js/app/mappers/nodes/s3.js
index 23690f56..a58581b5 100644
--- a/source/html/js/app/mappers/nodes/s3.js
+++ b/source/html/js/app/mappers/nodes/s3.js
@@ -1,107 +1,102 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/model", "app/ui/svg_node"],
-    function($, server, connections, model, svg_node) {
 
-        const update_buckets = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            const rgb = "#D5DBDB";
-            const node_type = "S3 Bucket";
-            return new Promise(function(resolve, reject) {
-                server.get(url + "/cached/s3", api_key).then(function(cache_entries) {
-                    for (let cache_entry of cache_entries) {
-                        const bucket = JSON.parse(cache_entry.data);
-                        bucket.Arn = "arn:aws:s3:::" + bucket.Name;
-                        const name = bucket.Name;
-                        const id = bucket.Arn;
-                        let node_data = {
-                            "cache_update": cache_entry.updated,
-                            "id": bucket.Arn,
-                            "region": cache_entry.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": null,
-                                "selected": null
-                            },
-                            "header": "<b>S3 Bucket:</b> " + name,
-                            "data": bucket,
-                            "title": node_type,
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                const id = bucket.Name;
-                                return function() {
-                                    let html = `https://s3.console.aws.amazon.com/s3/buckets/${id}/?tab=overview`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                const id = bucket.Name;
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/cloudwatch/home#metricsV2:graph=~();search=${id};namespace=AWS/S3;dimensions=BucketName,StorageType`;
-                                    return html;
-                                };
-                            })()
-                        };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
+
 
-        const update = function() {
-            return update_buckets();
-        };
+export const update = function () {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const rgb = "#D5DBDB";
+    const node_type = "S3 Bucket";
+    const items = [];
+    return new Promise(function (resolve, reject) {
+        server.get(url + "/cached/s3", api_key).then(function (cache_entries) {
+            for (let cache_entry of cache_entries) {
+                const bucket = JSON.parse(cache_entry.data);
+                bucket.Arn = "arn:aws:s3:::" + bucket.Name;
+                const name = bucket.Name;
+                const id = bucket.Arn;
+                let node_data = {
+                    "cache_update": cache_entry.updated,
+                    "id": bucket.Arn,
+                    "region": cache_entry.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>S3 Bucket:</b> " + name,
+                    "data": bucket,
+                    "title": node_type,
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        const id = bucket.Name;
+                        return function () {
+                            let html = `https://s3.console.aws.amazon.com/s3/buckets/${id}/?tab=overview`;
+                            return html;
+                        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        const id = bucket.Name;
+                        return function () {
+                            let html = `https://console.aws.amazon.com/cloudwatch/home#metricsV2:graph=~();search=${id};namespace=AWS/S3;dimensions=BucketName,StorageType`;
+                            return html;
+                        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        return {
-            "name": "S3 Buckets",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "S3 Buckets";
diff --git a/source/html/js/app/mappers/nodes/speke.js b/source/html/js/app/mappers/nodes/speke.js
index b0ce3f2f..0068313e 100644
--- a/source/html/js/app/mappers/nodes/speke.js
+++ b/source/html/js/app/mappers/nodes/speke.js
@@ -1,108 +1,107 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/model", "app/ui/svg_node"],
-    function($, server, connections, model, svg_node) {
 
-        /*
-        This module technically adds a new kind of node, but it depends on the 
-        MediaPackage node mapper to be complete. This module runs with the connectors 
-        to be sure all MediaPackage inventory is loaded first.
-        */
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        const node_type = "SPEKE Keyserver";
 
-        const update_speke_keyservers = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            const rgb = "#cc00ff";
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/speke-keyserver", api_key).then((speke_keyservers_cached) => {
-                    for (let keyserver of speke_keyservers_cached) {
-                        const keyserver_data = JSON.parse(keyserver.data);
-                        const name = keyserver_data.endpoint;
-                        const id = keyserver.arn;
-                        let node_data = {
-                            "cache_update": keyserver.updated,
-                            "id": id,
-                            "region": keyserver.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": null,
-                                "selected": null
-                            },
-                            "header": "<b>" + node_type + ":</b> " + keyserver_data.endpoint,
-                            "data": keyserver_data,
-                            "title": node_type,
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_rgb = rgb;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    let local_node_type = node_type;
-                                    let local_name = name;
-                                    let local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                return function() {
-                                    let html = `https://console.aws.amazon.com/`;
-                                    return html;
-                                };
-                            })()
+/*
+This module technically adds a new kind of node, but it depends on the 
+MediaPackage node mapper to be complete. This module runs with the connectors 
+to be sure all MediaPackage inventory is loaded first.
+*/
+
+const node_type = "SPEKE Keyserver";
+
+export const update = function () {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const rgb = "#cc00ff";
+    const items = [];
+    return new Promise((resolve, reject) => {
+        server.get(url + "/cached/speke-keyserver", api_key).then((speke_keyservers_cached) => {
+            for (let keyserver of speke_keyservers_cached) {
+                const keyserver_data = JSON.parse(keyserver.data);
+                const name = keyserver_data.endpoint;
+                const id = keyserver.arn;
+                let node_data = {
+                    "cache_update": keyserver.updated,
+                    "id": id,
+                    "region": keyserver.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>" + node_type + ":</b> " + keyserver_data.endpoint,
+                    "data": keyserver_data,
+                    "title": node_type,
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_rgb = rgb;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_rgb, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            let local_node_type = node_type;
+                            let local_name = name;
+                            let local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        return function () {
+                            let html = `https://console.aws.amazon.com/`;
+                            return html;
+                        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        return function () {
+                            let html = `https://console.aws.amazon.com/`;
+                            return html;
                         };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                });
-            });
-        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        const update = function() {
-            return update_speke_keyservers();
-        };
 
-        return {
-            "name": node_type + "s",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = node_type + "s";
diff --git a/source/html/js/app/mappers/nodes/ssm_managed_instance.js b/source/html/js/app/mappers/nodes/ssm_managed_instance.js
index db85da07..88055d61 100644
--- a/source/html/js/app/mappers/nodes/ssm_managed_instance.js
+++ b/source/html/js/app/mappers/nodes/ssm_managed_instance.js
@@ -1,123 +1,118 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/regions", "app/model", "app/ui/svg_node"],
-    function($, server, connections, region_promise, model, svg_node) {
 
-        var update_configs = function() {
-            var current = connections.get_current();
-            var url = current[0];
-            var api_key = current[1];
-            return new Promise(function(resolve, reject) {
-                server.get(url + "/cached/ssm-managed-instance", api_key).then(function(configs) {
-                    for (let cache_entry of configs) {
-                        // console.log(cache_entry);
-                        map_config(cache_entry);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        var map_config = function(cache_entry) {
-            const config = JSON.parse(cache_entry.data);
-            const name = config.Id;
-            const id = cache_entry.arn;
-            const nodes = model.nodes;
-            const rgb = "#D5DBDB";
-            const generic_node_type = "SSM Managed Instance";
-            var node_type = generic_node_type;
-            if ('Tags' in config) {
-                if ('MSAM-NodeType' in config.Tags) {
-                    node_type = config.Tags['MSAM-NodeType'];
-                }
+
+export const update = function () {
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise(function (resolve, reject) {
+        server.get(url + "/cached/ssm-managed-instance", api_key).then(function (configs) {
+            for (let cache_entry of configs) {
+                // console.log(cache_entry);
+                map_config(cache_entry, items);
             }
-            var node_data = {
-                "overlay": "informational",
-                "cache_update": cache_entry.updated,
-                "id": id,
-                "region": cache_entry.region,
-                "shape": "image",
-                "image": {
-                    "unselected": null,
-                    "selected": null
-                },
-                "header": "<b>" + node_type + ":</b> " + name,
-                "data": config,
-                "title": node_type,
-                "name": name,
-                "size": 55,
-                "render": {
-                    normal_unselected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_rgb = rgb;
-                        var local_id = id;
-                        var local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
-                        };
-                    })(),
-                    normal_selected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_rgb = rgb;
-                        var local_id = id;
-                        var local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
-                        };
-                    })(),
-                    alert_unselected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_id = id;
-                        var local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
-                        };
-                    })(),
-                    alert_selected: (function() {
-                        var local_node_type = node_type;
-                        var local_name = name;
-                        var local_id = id;
-                        var local_generic_node_type = generic_node_type;
-                        return function() {
-                            return svg_node.selected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
-                        };
-                    })()
-                },
-                "console_link": (function() {
-                    var region = id.split(":")[3];
-                    return function() {
-                        var html = `https://console.aws.amazon.com/systems-manager/managed-instances/${name}/description?region=${region}`;
-                        return html;
-                    };
-                })(),
-                "cloudwatch_link": (function() {
-                    var region = id.split(":")[3];
-                    return function() {
-                        var html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bMSAM*2fSSMRunCommand*2c*22Instance*20ID*22*7d*20${name}`;
-                        return html;
-                    };
-                })(),
-                "generic_node_type": generic_node_type 
-            };
-            node_data.image.selected = node_data.render.normal_selected();
-            node_data.image.unselected = node_data.render.normal_unselected();
-            nodes.update(node_data);
-        };
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
+const map_config = function (cache_entry, items) {
+    const config = JSON.parse(cache_entry.data);
+    const name = config.Id;
+    const id = cache_entry.arn;
+    const rgb = "#D5DBDB";
+    const generic_node_type = "SSM Managed Instance";
+    let node_type = generic_node_type;
+    if ('Tags' in config) {
+        if ('MSAM-NodeType' in config.Tags) {
+            node_type = config.Tags['MSAM-NodeType'];
+        }
+    }
+    const node_data = {
+        "overlay": "informational",
+        "cache_update": cache_entry.updated,
+        "id": id,
+        "region": cache_entry.region,
+        "shape": "image",
+        "image": {
+            "unselected": null,
+            "selected": null
+        },
+        "header": "<b>" + node_type + ":</b> " + name,
+        "data": config,
+        "title": node_type,
+        "name": name,
+        "size": 55,
+        "render": {
+            normal_unselected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_rgb = rgb;
+                const local_id = id;
+                const local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
+                };
+            })(),
+            normal_selected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_rgb = rgb;
+                const local_id = id;
+                const local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, local_rgb, local_id, config, local_generic_node_type);
+                };
+            })(),
+            alert_unselected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_id = id;
+                const local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.unselected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
+                };
+            })(),
+            alert_selected: (function () {
+                const local_node_type = node_type;
+                const local_name = name;
+                const local_id = id;
+                const local_generic_node_type = generic_node_type;
+                return function () {
+                    return svg_node.selected(local_node_type, local_name, "#ff0000", local_id, config, local_generic_node_type);
+                };
+            })()
+        },
+        "console_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/systems-manager/managed-instances/${name}/description?region=${region}`;
+                return html;
+            };
+        })(),
+        "cloudwatch_link": (function () {
+            const region = id.split(":")[3];
+            return function () {
+                const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bMSAM*2fSSMRunCommand*2c*22Instance*20ID*22*7d*20${name}`;
+                return html;
+            };
+        })(),
+        "generic_node_type": generic_node_type
+    };
+    node_data.image.selected = node_data.render.normal_selected();
+    node_data.image.unselected = node_data.render.normal_unselected();
+    items.push(node_data);
+};
 
-        var update = function() {
-            return update_configs();
-        };
 
-        return {
-            "name": "SSM Managed Instances",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "SSM Managed Instances";
diff --git a/source/html/js/app/mappers/nodes/user_defined_node.js b/source/html/js/app/mappers/nodes/user_defined_node.js
index 6652eefe..72d4fa17 100644
--- a/source/html/js/app/mappers/nodes/user_defined_node.js
+++ b/source/html/js/app/mappers/nodes/user_defined_node.js
@@ -1,4 +1,4 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
 // {
@@ -10,106 +10,101 @@
 //     "updated": 1535850626
 // }
 
-define(["jquery", "app/server", "app/connections", "app/model", "app/ui/svg_node"],
-    function($, server, connections, model, svg_node) {
 
-        const update_user_defined = function() {
-            const local_svg_node = svg_node;
-            const current = connections.get_current();
-            const url = current[0];
-            const api_key = current[1];
-            const nodes = model.nodes;
-            return new Promise((resolve, reject) => {
-                server.get(url + "/cached/user-defined-node", api_key).then((cache_entries) => {
-                    for (let cache_entry of cache_entries) {
-                        let color = "#D5DBDB";
-                        const item = JSON.parse(cache_entry.data);
-                        const name = item.Id;
-                        if (cache_entry.color) {
-                            color = cache_entry.color;
-                        }
-                        const local_color = color;
-                        const node_type = item.NodeType;
-                        const id = cache_entry.arn;
-                        const node_data = {
-                            "cache_update": cache_entry.updated,
-                            "id": id,
-                            "region": cache_entry.region,
-                            "shape": "image",
-                            "image": {
-                                "unselected": local_svg_node.unselected(node_type, name, local_color, id),
-                                "selected": local_svg_node.selected(node_type, name, local_color, id)
-                            },
-                            "header": "<b>" + node_type + ":</b> " + name,
-                            "data": item,
-                            "title": node_type,
-                            "name": name,
-                            "size": 55,
-                            "render": {
-                                normal_unselected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, local_color, local_id);
-                                    };
-                                })(),
-                                normal_selected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, local_color, local_id);
-                                    };
-                                })(),
-                                alert_unselected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })(),
-                                alert_selected: (function() {
-                                    const local_node_type = node_type;
-                                    const local_name = name;
-                                    const local_id = id;
-                                    return function() {
-                                        return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
-                                    };
-                                })()
-                            },
-                            "console_link": (function() {
-                                return function() {
-                                    const html = `#`;
-                                    return html;
-                                };
-                            })(),
-                            "cloudwatch_link": (function() {
-                                return function() {
-                                    const html = `#`;
-                                    return html;
-                                };
-                            })()
-                        };
-                        node_data.image.selected = node_data.render.normal_selected();
-                        node_data.image.unselected = node_data.render.normal_unselected();
-                        nodes.update(node_data);
-                    }
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                    reject(error);
-                });
-            });
-        };
+import * as server from "../../server.js";
+import * as connections from "../../connections.js";
+import * as svg_node from "../../ui/svg_node.js";
 
-        const update = function() {
-            return update_user_defined();
-        };
+export const update = function () {
+    const local_svg_node = svg_node;
+    const current = connections.get_current();
+    const url = current[0];
+    const api_key = current[1];
+    const items = [];
+    return new Promise((resolve, reject) => {
+        server.get(url + "/cached/user-defined-node", api_key).then((cache_entries) => {
+            for (let cache_entry of cache_entries) {
+                let color = "#D5DBDB";
+                const item = JSON.parse(cache_entry.data);
+                const name = item.Id;
+                if (cache_entry.color) {
+                    color = cache_entry.color;
+                }
+                const local_color = color;
+                const node_type = item.NodeType;
+                const id = cache_entry.arn;
+                const node_data = {
+                    "cache_update": cache_entry.updated,
+                    "id": id,
+                    "region": cache_entry.region,
+                    "shape": "image",
+                    "image": {
+                        "unselected": null,
+                        "selected": null
+                    },
+                    "header": "<b>" + node_type + ":</b> " + name,
+                    "data": item,
+                    "title": node_type,
+                    "name": name,
+                    "size": 55,
+                    "render": {
+                        normal_unselected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, local_color, local_id);
+                            };
+                        })(),
+                        normal_selected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, local_color, local_id);
+                            };
+                        })(),
+                        alert_unselected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.unselected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })(),
+                        alert_selected: (function () {
+                            const local_node_type = node_type;
+                            const local_name = name;
+                            const local_id = id;
+                            return function () {
+                                return local_svg_node.selected(local_node_type, local_name, "#ff0000", local_id);
+                            };
+                        })()
+                    },
+                    "console_link": (function () {
+                        return function () {
+                            const html = `#`;
+                            return html;
+                        };
+                    })(),
+                    "cloudwatch_link": (function () {
+                        return function () {
+                            const html = `#`;
+                            return html;
+                        };
+                    })()
+                };
+                node_data.image.selected = node_data.render.normal_selected();
+                node_data.image.unselected = node_data.render.normal_unselected();
+                items.push(node_data);
+            }
+            resolve(items);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+};
 
-        return {
-            "name": "User-Defined Nodes",
-            "update": update
-        };
-    });
\ No newline at end of file
+export const module_name = "User-Defined Nodes";
+ 
\ No newline at end of file
diff --git a/source/html/js/app/model.js b/source/html/js/app/model.js
index 32d00a5c..2aa553d6 100644
--- a/source/html/js/app/model.js
+++ b/source/html/js/app/model.js
@@ -1,112 +1,93 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "vis", "app/plugins", "app/server", "app/connections"], function($, vis, plugins, server, connections) {
-    var nodes = new vis.DataSet();
-    var edges = new vis.DataSet();
+import * as server from "./server.js";
+import * as connections from "./connections.js";
+import * as mappers from "./mappers/mappers.js";
 
-    var reset = function() {
-        nodes.clear();
-        edges.clear();
-    };
 
-    var map = function(callback) {
-        new Promise(function(resolve, reject) {
-            var promises = [];
-            require(plugins.nodes, function() {
-                for (let mapper of arguments) {
-                    console.log(mapper.name);
-                    promises.push(mapper.update());
-                }
-                Promise.all(promises).then(function() {
-                    resolve();
-                });
-            });
-        }).then(function() {
-            var promises = [];
-            require(plugins.connections, function() {
-                for (let mapper of arguments) {
-                    console.log(mapper.name);
-                    promises.push(mapper.update());
-                }
-                Promise.all(promises).then(function() {
-                    for (let node of nodes.get()) {
-                        // add stringified tags to the node, will be used during search
-                        node.stringtags = JSON.stringify(node.data.Tags);
-                        nodes.update(node);
-                    }
-                    if (typeof callback !== 'undefined') {
-                        callback();
-                    }
-                });
-            });
-        }).catch(function(error) {
-            console.log(error);
-        });
-    };
-
-    // update the JSON data portion of the node or connection
-    var update = function(arn) {
-        var current = connections.get_current();
-        var url = current[0];
-        var api_key = current[1];
-        return new Promise(function(resolve, reject) {
-            server.get(url + "/cached/arn/" + arn, api_key).then(function(cached) {
-                // we should get 0 or 1 results only
-                if (!cached || !cached.length) return reject(`arn ${arn} not found`);
+const nodes = new vis.DataSet();
+const edges = new vis.DataSet();
 
-                var cache_entry = cached[0];
-                var data = JSON.parse(cache_entry.data);
-                // node or connection?
-                var node = data.to && data.from ? edges.get(arn) : nodes.get(arn);
-                if (!node) return reject(`arn ${arn} not found`);
+const reset = function () {
+    nodes.clear();
+    edges.clear();
+};
 
-                node.data = data;
-                resolve(node);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
+const map = function (callback) {
+    new Promise(function (resolve) {
+        var promises = [];
+        for (let mapper of mappers.nodes) {
+            console.log(mapper.module_name);
+            promises.push(mapper.update());
+            Promise.all(promises).then(function (resolved_values) {
+                for (let items of resolved_values) {
+                    nodes.update(items);
+                }
+                resolve();
             });
+        }
+    }).then(function () {
+        var promises = [];
+        for (let mapper of mappers.connections) {
+            console.log(mapper.module_name);
+            promises.push(mapper.update());
+        }
+        Promise.all(promises).then(function (resolved_values) {
+            for (let items of resolved_values) {
+                edges.update(items);
+            }
+            for (let node of nodes.get()) {
+                // add stringified tags to the node, will be used during search
+                node.stringtags = JSON.stringify(node.data.Tags);
+                nodes.update(node);
+            }
+            if (typeof callback !== 'undefined') {
+                callback();
+            }
         });
-    };
+    }).catch((error) => {
+        console.error(error);
+    });
+};
 
-    var put_records = function(record) {
-        var current = connections.get_current();
-        var url = current[0];
-        var api_key = current[1];
-        var current_endpoint = `${url}/cached`;
-        if (record && !Array.isArray(record)) {
-            record = [record];
-        }
-        return new Promise(function(resolve, reject) {
-            server.post(current_endpoint, api_key, record).then(function(response) {
-                console.log(response);
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+
+const put_records = function (record) {
+    var current = connections.get_current();
+    var url = current[0];
+    var api_key = current[1];
+    var current_endpoint = `${url}/cached`;
+    if (record && !Array.isArray(record)) {
+        record = [record];
+    }
+    return new Promise(function (resolve, reject) {
+        server.post(current_endpoint, api_key, record).then(function (response) {
+            console.log(response);
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    var delete_record = function(arn) {
-        var current = connections.get_current();
-        var url = current[0];
-        var api_key = current[1];
-        var current_endpoint = `${url}/cached/arn/${encodeURIComponent(arn)}`;
-        return new Promise(function(resolve, reject) {
-            server.delete_method(current_endpoint, api_key).then(function(response) {
-                console.log(response);
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const delete_record = function (arn) {
+    var current = connections.get_current();
+    var url = current[0];
+    var api_key = current[1];
+    var current_endpoint = `${url}/cached/arn/${encodeURIComponent(arn)}`;
+    return new Promise(function (resolve, reject) {
+        server.delete_method(current_endpoint, api_key).then(function (response) {
+            console.log(response);
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    // clear the model at module definition
-    reset();
+// clear the model at module definition
+reset();
 
-    return { nodes, edges, reset, map, update, put_records, delete_record };
-});
\ No newline at end of file
+export { nodes, edges, reset, map, put_records, delete_record };
diff --git a/source/html/js/app/plugins.js b/source/html/js/app/plugins.js
deleted file mode 100644
index 45220806..00000000
--- a/source/html/js/app/plugins.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-       SPDX-License-Identifier: Apache-2.0 */
-
-define({
-    "nodes": [
-        "app/mappers/nodes/cloudfront",
-        "app/mappers/nodes/mediaconnect",
-        "app/mappers/nodes/medialive",
-        "app/mappers/nodes/mediapackage",
-        "app/mappers/nodes/mediastore",
-        "app/mappers/nodes/s3",
-        "app/mappers/nodes/speke",
-        "app/mappers/nodes/user_defined_node",
-        "app/mappers/nodes/mediatailor",
-        "app/mappers/nodes/ec2",
-        "app/mappers/nodes/ssm_managed_instance"
-    ],
-    "connections": [
-        "app/mappers/connections/cloudfront_medialive_input",
-        "app/mappers/connections/mediaconnect_flow_medialive_input",
-        "app/mappers/connections/mediaconnect_flow_mediaconnect_flow",
-        "app/mappers/connections/medialive_channel_mediapackage_channel",
-        "app/mappers/connections/medialive_channel_mediastore_container",
-        "app/mappers/connections/medialive_input_channel",
-        "app/mappers/connections/medialive_channel_multiplex",
-        "app/mappers/connections/multiplex_mediaconnect_flow",
-        "app/mappers/connections/mediapackage_channel_endpoint",
-        "app/mappers/connections/mediapackage_endpoint_cloudfront",
-        "app/mappers/connections/mediastore_container_medialive_input",
-        "app/mappers/connections/s3_bucket_medialive_input",
-        "app/mappers/connections/s3_bucket_cloudfront",
-        "app/mappers/connections/speke",
-        "app/mappers/connections/user_defined_connection",
-        "app/mappers/connections/mediapackage_endpoint_mediatailor_configuration",
-        "app/mappers/connections/s3_bucket_mediatailor_configuration",
-        "app/mappers/connections/mediastore_container_mediatailor_configuration",
-        "app/mappers/connections/mediastore_container_cloudfront",
-        "app/mappers/connections/medialive_channel_s3_bucket",
-        "app/mappers/connections/link_device_medialive_input",
-        "app/mappers/connections/medialive_channel_input",
-        "app/mappers/connections/medialive_channel_mediaconnect_flow",
-    ],
-    "overlays": [
-        "app/ui/overlays/mediaconnect_flow",
-        "app/ui/overlays/medialive_channel",
-        "app/ui/overlays/medialive_multiplex",
-        "app/ui/overlays/ssm_managed_instance",
-        "app/ui/overlays/ec2_instance"
-    ],
-    "default-overlay": "app/ui/overlays/alarms_only"
-});
\ No newline at end of file
diff --git a/source/html/js/app/regions.js b/source/html/js/app/regions.js
index 81f949ab..71a8970e 100644
--- a/source/html/js/app/regions.js
+++ b/source/html/js/app/regions.js
@@ -1,46 +1,43 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/server", "app/connections", "app/settings", "lodash"],
-    function (server, connections, settings, _) {
-        let available = [];
+import * as server from "./server.js";
+import * as connections from "./connections.js";
 
-        const get_available = function () {
-            return available;
-        };
+let available = [];
 
-        const refresh = _.memoize(function () {
-            const current_connection = connections.get_current();
-            const url = current_connection[0];
-            const api_key = current_connection[1];
-            const all_endpoint = `${url}/regions`;
-            return new Promise(function (resolve, reject) {
-                server.get(all_endpoint, api_key).then(function (data) {
-                    available = data;
-                    available.sort(function (a, b) {
-                        const nameA = a.RegionName;
-                        const nameB = b.RegionName;
-                        if (nameA < nameB) {
-                            return -1;
-                        } else
-                            if (nameA > nameB) {
-                                return 1;
-                            } else {
-                                // names must be equal
-                                return 0;
-                            }
-                    });
-                    const module = {
-                        "get_available": get_available
-                    };
-                    resolve(module);
-                }).catch(function (error) {
-                    console.log(error);
-                    reject(error);
-                });
+const get_available = function () {
+    return available;
+};
+
+export const refresh = _.memoize(function () {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const all_endpoint = `${url}/regions`;
+    return new Promise(function (resolve, reject) {
+        server.get(all_endpoint, api_key).then(function (data) {
+            available = data;
+            available.sort(function (a, b) {
+                const nameA = a.RegionName;
+                const nameB = b.RegionName;
+                if (nameA < nameB) {
+                    return -1;
+                } else
+                    if (nameA > nameB) {
+                        return 1;
+                    } else {
+                        // names must be equal
+                        return 0;
+                    }
             });
+            const module = {
+                "get_available": get_available
+            };
+            resolve(module);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-
-        // regions returns an unexecuted promise; use refresh().then(function(module){})
-        return refresh;
-    });
\ No newline at end of file
+    });
+});
diff --git a/source/html/js/app/search.js b/source/html/js/app/search.js
index d74f37f0..5ce4382d 100644
--- a/source/html/js/app/search.js
+++ b/source/html/js/app/search.js
@@ -1,134 +1,136 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/channels", "app/ui/diagrams"],
-    function($, _, model, channels, diagrams) {
-        // options for Fuse
-        const model_options = {
-            shouldSort: true,
-            threshold: 0.25,
-            location: 0,
-            distance: 1000,
-            minMatchCharLength: 2,
-            keys: [
-                "id",
-                "label",
-                "title",
-                "name",
-                "data.Arn",
-                "data.ARN",
-                "data.Channel",
-                "data.DomainName",
-                "data.Id",
-                "data.Name",
-                "data.Url",
-                "data.Sources.Url",
-                "data.Origin.Items.DomainName",
-                "data.Origin.Items.OriginPath",
-                "data.Destinations.Settings.Url",
-                "data.HlsIngest.IngestEndpoints.Url",
-                // SSM and EC2 instances
-                "data.Data.AWS:InstanceInformation.Content.ComputerName",
-                "data.Data.AWS:InstanceInformation.Content.IpAddress",
-                "data.PrivateDnsName",
-                "data.PrivateIpAddress",
-                "data.PublicDnsName",
-                "data.PublicIpAddress",
-                "stringtags"
-            ]
-        };
 
-        let fuse_model;
+import * as model from "./model.js";
+import * as channels from "./channels.js";
+import * as diagrams from "./ui/diagrams.js";
 
-        let cached_tile_names;
+// options for Fuse
+const model_options = {
+    shouldSort: true,
+    threshold: 0.25,
+    location: 0,
+    distance: 1000,
+    minMatchCharLength: 2,
+    keys: [
+        "id",
+        "label",
+        "title",
+        "name",
+        "data.Arn",
+        "data.ARN",
+        "data.Channel",
+        "data.DomainName",
+        "data.Id",
+        "data.Name",
+        "data.Url",
+        "data.Sources.Url",
+        "data.Origin.Items.DomainName",
+        "data.Origin.Items.OriginPath",
+        "data.Destinations.Settings.Url",
+        "data.HlsIngest.IngestEndpoints.Url",
+        // SSM and EC2 instances
+        "data.Data.AWS:InstanceInformation.Content.ComputerName",
+        "data.Data.AWS:InstanceInformation.Content.IpAddress",
+        "data.PrivateDnsName",
+        "data.PrivateIpAddress",
+        "data.PublicDnsName",
+        "data.PublicIpAddress",
+        "stringtags"
+    ]
+};
 
-        const update = function() {
-            fuse_model = new Fuse(model.nodes.get(), model_options);
-            channels.channel_list().then(function(channels) {
-                cached_tile_names = channels;
-            });
-        };
+let fuse_model;
 
-        const search_nodes = function(text) {
-            return fuse_model.search(text);
-        };
+let cached_tile_names;
 
-        const search_tiles = function(text) {
-            const matches = [];
-            for (let name of cached_tile_names) {
-                if (name.toLowerCase().includes(text.toLowerCase())) {
-                    matches.push(name);
-                }
-            }
-            return matches;
-        };
+const update = function () {
+    fuse_model = new Fuse(model.nodes.get(), model_options);
+    channels.channel_list().then(function (channels) {
+        cached_tile_names = channels;
+    });
+};
 
-        function search(text) {
-            const local_lodash = _;
-            return new Promise(function(outer_resolve, outer_reject) {
-                const local_outer_resolve = outer_resolve;
-                fuse_model = new Fuse(model.nodes.get(), model_options);
-                const results = {
-                    text: text,
-                    model: [],
-                    tile_names: [],
-                    tile_contents: [],
-                    diagram_names: [],
-                    diagram_contents: []
-                };
-                // search the model, find matching nodes
-                const model_matches = fuse_model.search(text);
-                const node_ids = _.map(model_matches, "item.id");
-                results.model = _.map(model_matches, "item");
-                // find diagrams with one or more of the nodes
-                const contained_by = diagrams.have_any(node_ids);
-                results.diagram_contents = contained_by;
-                // find diagram name matches
-                for (let name of Object.keys(diagrams.get_all())) {
-                    const includes = name.toLowerCase().includes(text.toLowerCase());
-                    if (includes) {
-                        results.diagram_names.push(name);
-                    }
+const search_nodes = function (text) {
+    return fuse_model.search(text);
+};
+
+const search_tiles = function (text) {
+    const matches = [];
+    for (let name of cached_tile_names) {
+        if (name.toLowerCase().includes(text.toLowerCase())) {
+            matches.push(name);
+        }
+    }
+    return matches;
+};
+
+function search(text) {
+    const local_lodash = _;
+    return new Promise(function (outer_resolve) {
+        const local_outer_resolve = outer_resolve;
+        fuse_model = new Fuse(model.nodes.get(), model_options);
+        const results = {
+            text: text,
+            model: [],
+            tile_names: [],
+            tile_contents: [],
+            diagram_names: [],
+            diagram_contents: []
+        };
+        // search the model, find matching nodes
+        const model_matches = fuse_model.search(text);
+        const node_ids = _.map(model_matches, "item.id");
+        results.model = _.map(model_matches, "item");
+        // find diagrams with one or more of the nodes
+        const contained_by = diagrams.have_any(node_ids);
+        results.diagram_contents = contained_by;
+        // find diagram name matches
+        for (let name of Object.keys(diagrams.get_all())) {
+            const includes = name.toLowerCase().includes(text.toLowerCase());
+            if (includes) {
+                results.diagram_names.push(name);
+            }
+        }
+        // find tiles with any of these nodes
+        channels.have_any(node_ids).then(function (matches) {
+            results.tile_contents = matches;
+        });
+        // find tiles with the text or containing the model nodes
+        const status = { "processed": 0 };
+        channels.channel_list().then(function (channel_names) {
+            const local_channel_names = channel_names;
+            for (let channel_name of local_channel_names) {
+                const local_channel_name = channel_name;
+                // check for a name partial match
+                const includes = local_channel_name.toLowerCase().includes(text.toLowerCase());
+                if (includes) {
+                    results.tile_names.push(local_channel_name);
                 }
-                // find tiles with any of these nodes
-                channels.have_any(node_ids).then(function(matches) {
-                    results.tile_contents = matches;
-                });
-                // find tiles with the text or containing the model nodes
-                const status = { "processed": 0 };
-                channels.channel_list().then(function(channel_names) {
-                    const local_channel_names = channel_names;
-                    for (let channel_name of local_channel_names) {
-                        const local_channel_name = channel_name;
-                        // check for a name partial match
-                        const includes = local_channel_name.toLowerCase().includes(text.toLowerCase());
-                        if (includes) {
-                            results.tile_names.push(local_channel_name);
-                        }
-                        // check the contents of the channel
-                        channels.retrieve_channel(local_channel_name).then(function(contents) {
-                            const channel_node_ids = local_lodash.map(contents, "id").sort();
-                            const intersect = local_lodash.intersection(node_ids, channel_node_ids);
-                            if (intersect.length > 0) {
-                                results.tile_contents.push({
-                                    tile: local_channel_name,
-                                    found: intersect
-                                });
-                            }
-                            status.processed++;
-                            if (status.processed == local_channel_names.length) {
-                                local_outer_resolve(results);
-                            }
+                // check the contents of the channel
+                channels.retrieve_channel(local_channel_name).then(function (contents) {
+                    const channel_node_ids = local_lodash.map(contents, "id").sort();
+                    const intersect = local_lodash.intersection(node_ids, channel_node_ids);
+                    if (intersect.length > 0) {
+                        results.tile_contents.push({
+                            tile: local_channel_name,
+                            found: intersect
                         });
                     }
+                    status.processed++;
+                    if (status.processed == local_channel_names.length) {
+                        local_outer_resolve(results);
+                    }
                 });
-            });
-        }
+            }
+        });
+    });
+}
 
-        return {
-            "search_nodes": search_nodes,
-            "search_tiles": search_tiles,
-            "update": update,
-            search: search
-        };
-    });
\ No newline at end of file
+export {
+    search_nodes,
+    search_tiles,
+    update,
+    search
+};
diff --git a/source/html/js/app/server.js b/source/html/js/app/server.js
index bbaf37a7..ad394837 100644
--- a/source/html/js/app/server.js
+++ b/source/html/js/app/server.js
@@ -1,117 +1,111 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery"], function($) {
+// default 60 second timeout
+let request_timeout = 60 * 1000;
 
-    // default 60 second timeout
-    var request_timeout = 60 * 1000;
-
-    var get = function(url, api_key) {
-        return new Promise((resolve, reject) => {
-            var headers = {
-                'Accept': 'application/json',
-                'x-api-key': api_key
-            };
-            // get the library contents
-            $.ajax({
-                url: url,
-                type: "GET",
-                headers: headers,
-                success: (data) => {
-                    resolve(data);
-                },
-                error: (data) => {
-                    reject(data);
-                },
-                timeout: request_timeout
-            });
+const get = function (url, api_key) {
+    return new Promise((resolve, reject) => {
+        const headers = {
+            'Accept': 'application/json',
+            'x-api-key': api_key
+        };
+        // get the library contents
+        $.ajax({
+            url: url,
+            type: "GET",
+            headers: headers,
+            success: (data) => {
+                resolve(data);
+            },
+            error: (data) => {
+                reject(data);
+            },
+            timeout: request_timeout
         });
-    };
+    });
+};
 
-    var post = function(url, api_key, data) {
-        return new Promise((resolve, reject) => {
-            var headers = {
-                'Accept': 'application/json',
-                'x-api-key': api_key
-            };
-            // get the library contents
-            $.ajax({
-                url: url,
-                type: "POST",
-                data: JSON.stringify(data),
-                headers: headers,
-                contentType: "application/json",
-                success: (data) => {
-                    resolve(data);
-                },
-                error: (data) => {
-                    console.log(data);
-                    reject(data);
-                },
-                timeout: request_timeout
-            });
+const post = function (url, api_key, data) {
+    return new Promise((resolve, reject) => {
+        const headers = {
+            'Accept': 'application/json',
+            'x-api-key': api_key
+        };
+        // get the library contents
+        $.ajax({
+            url: url,
+            type: "POST",
+            data: JSON.stringify(data),
+            headers: headers,
+            contentType: "application/json",
+            success: (data) => {
+                resolve(data);
+            },
+            error: (data) => {
+                console.log(data);
+                reject(data);
+            },
+            timeout: request_timeout
         });
-    };
+    });
+};
 
-    var delete_method = function(url, api_key) {
-        return new Promise((resolve, reject) => {
-            var headers = {
-                'Accept': 'application/json',
-                'x-api-key': api_key
-            };
-            // get the library contents
-            $.ajax({
-                url: url,
-                type: "DELETE",
-                headers: headers,
-                contentType: "application/json",
-                success: (data) => {
-                    resolve(data);
-                },
-                error: (data) => {
-                    console.log(data);
-                    reject(data);
-                },
-                timeout: request_timeout
-            });
+const delete_method = function (url, api_key) {
+    return new Promise((resolve, reject) => {
+        const headers = {
+            'Accept': 'application/json',
+            'x-api-key': api_key
+        };
+        // get the library contents
+        $.ajax({
+            url: url,
+            type: "DELETE",
+            headers: headers,
+            contentType: "application/json",
+            success: (data) => {
+                resolve(data);
+            },
+            error: (data) => {
+                console.log(data);
+                reject(data);
+            },
+            timeout: request_timeout
         });
-    };
+    });
+};
 
-    var delete_method_with_body = function(url, api_key, data) {
-        return new Promise((resolve, reject) => {
-            var headers = {
-                'Accept': 'application/json',
-                'x-api-key': api_key
-            };
-            // get the library contents
-            $.ajax({
-                url: url,
-                type: "DELETE",
-                data: JSON.stringify(data),
-                headers: headers,
-                contentType: "application/json",
-                success: (data) => {
-                    resolve(data);
-                },
-                error: (data) => {
-                    console.log(data);
-                    reject(data);
-                },
-                timeout: request_timeout
-            });
+const delete_method_with_body = function (url, api_key, data) {
+    return new Promise((resolve, reject) => {
+        const headers = {
+            'Accept': 'application/json',
+            'x-api-key': api_key
+        };
+        // get the library contents
+        $.ajax({
+            url: url,
+            type: "DELETE",
+            data: JSON.stringify(data),
+            headers: headers,
+            contentType: "application/json",
+            success: (data) => {
+                resolve(data);
+            },
+            error: (data) => {
+                console.log(data);
+                reject(data);
+            },
+            timeout: request_timeout
         });
-    };
+    });
+};
+
+export { get, post, delete_method, delete_method_with_body };
+
+export function get_request_timeout() {
+    return request_timeout;
+}
 
-    return {
-        "get": get,
-        "post": post,
-        "delete_method": delete_method,
-        "delete_method_with_body": delete_method_with_body,
-        "get_request_timeout": function() {
-            return request_timeout;
-        },
-        "set_request_timeout": function(timeout) {
-            request_timeout = timeout;
-        }
-    };
-});
\ No newline at end of file
+export function set_request_timeout(timeout) {
+    request_timeout = timeout;
+}
diff --git a/source/html/js/app/settings.js b/source/html/js/app/settings.js
index c95020c8..1b26cff9 100644
--- a/source/html/js/app/settings.js
+++ b/source/html/js/app/settings.js
@@ -1,70 +1,70 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/server", "app/connections", "lodash"], function(server, connections, _) {
+import * as server from "./server.js";
+import * as connections from "./connections.js";
 
-    var get_setting = _.memoize(function(id) {
-        // get the current connection data
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        // create the resource url
-        var current_endpoint = `${url}/settings/${id}`;
-        // return a promise that response with result
-        return new Promise((resolve, reject) => {
-            server.get(current_endpoint, api_key).then((response) => {
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const get_setting = _.memoize(function (id) {
+    // get the current connection data
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    // create the resource url
+    const current_endpoint = `${url}/settings/${id}`;
+    // return a promise that response with result
+    return new Promise((resolve, reject) => {
+        server.get(current_endpoint, api_key).then((response) => {
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
     });
+});
 
-    var put_setting = function(id, value) {
-        // get the current connection data
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        // create the resource url
-        var current_endpoint = `${url}/settings/${id}`;
-        return new Promise((resolve, reject) => {
-            var data = value;
-            server.post(current_endpoint, api_key, data).then((response) => {
-                clear_function_cache();
-                resolve();
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const put_setting = function (id, value) {
+    // get the current connection data
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    // create the resource url
+    const current_endpoint = `${url}/settings/${id}`;
+    return new Promise((resolve, reject) => {
+        const data = value;
+        server.post(current_endpoint, api_key, data).then((response) => {
+            clear_function_cache();
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    var remove_setting = function(id) {
-        // get the current connection data
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        // create the resource url
-        var current_endpoint = `${url}/settings/${id}`;
-        return new Promise((resolve, reject) => {
-            server.delete_method(current_endpoint, api_key).then((response) => {
-                clear_function_cache();
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
+const remove_setting = function (id) {
+    // get the current connection data
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    // create the resource url
+    const current_endpoint = `${url}/settings/${id}`;
+    return new Promise((resolve, reject) => {
+        server.delete_method(current_endpoint, api_key).then((response) => {
+            clear_function_cache();
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
         });
-    };
+    });
+};
 
-    var clear_function_cache = function() {
-        get_setting.cache.clear();
-    };
+const clear_function_cache = function () {
+    get_setting.cache.clear();
+};
 
-    return {
-        "get": get_setting,
-        "put": put_setting,
-        "remove": remove_setting
-    };
-});
\ No newline at end of file
+export {
+    get_setting as get,
+    put_setting as put,
+    remove_setting as remove
+};
diff --git a/source/html/js/app/statemachine.js b/source/html/js/app/statemachine.js
index 573ba3bc..1a242db2 100644
--- a/source/html/js/app/statemachine.js
+++ b/source/html/js/app/statemachine.js
@@ -1,277 +1,275 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["app/connections", "app/regions", "app/model", "app/ui/settings_menu", "lodash", "machina", "app/plugins", "app/api_check", "app/ui/confirmation"],
-    function(connections, regions_promise, model, settings_menu, _, machina, plugins, api_check, confirmation) {
+import * as connections from "./connections.js";
+import * as model from "./model.js";
+import * as settings_menu from "./ui/settings_menu.js";
+import * as api_check from "./api_check.js";
+import * as confirmation from "./ui/confirmation.js";
 
-        // This FSM tracks the state of configuration loading at tool startup
-        var configurationStateMachine = new machina.Fsm({
-            namespace: "configuration",
-            initialState: "uninitialized",
-            states: {
-                uninitialized: {
-                    "*": function() {
-                        this.deferUntilTransition();
-                        this.transition("get-saved-connection");
-                    }
-                },
-                "get-saved-connection": {
-                    _onEnter: function() {
-                        var current_connection = connections.get_current();
-                        if (null === current_connection) {
-                            console.log("no connection history");
-                            this.noSavedConnection();
-                        } else {
-                            console.log("testing last connection used");
-                            // test current connection with api-ping
-                            var endpoint = current_connection[0];
-                            var api_key = current_connection[1];
-                            var instance = this;
-                            api_check.ping(endpoint, api_key).then(function(response) {
-                                // test worked
-                                console.log("still working");
-                                console.log(response);
-                                instance.connectionExists();
-                            }).catch(function(error) {
-                                console.log("not working");
-                                instance.noSavedConnection();
-                            });
-                        }
-                    },
-                    "noSavedConnection": "get-connection-from-ui",
-                    "connectionExists": "configuration-ready"
-                },
-                "get-connection-from-ui": {
-                    _onEnter: function() {
-                        console.log("prompting for connection");
-                        settings_menu.setConnectionAlert("One working endpoint connection is required");
-                        settings_menu.showConnectionDialog();
-                    },
-                    _onExit: function() {
-                        settings_menu.clearConnectionAlert();
-                    },
-                    "connectionChanged": "configuration-ready",
-                },
-                "configuration-ready": {
-                    _onEnter: function() {
-                        // this will notify the parent state machine
-                        this.handle("configurationReady");
-                    }
+// This FSM tracks the state of configuration loading at tool startup
+const configurationStateMachine = new machina.Fsm({
+    namespace: "configuration",
+    initialState: "uninitialized",
+    states: {
+        uninitialized: {
+            "*": function () {
+                this.deferUntilTransition();
+                this.transition("get-saved-connection");
+            }
+        },
+        "get-saved-connection": {
+            _onEnter: function () {
+                var current_connection = connections.get_current();
+                if (null === current_connection) {
+                    console.log("no connection history");
+                    this.noSavedConnection();
+                } else {
+                    console.log("testing last connection used");
+                    // test current connection with api-ping
+                    var endpoint = current_connection[0];
+                    var api_key = current_connection[1];
+                    var instance = this;
+                    api_check.ping(endpoint, api_key).then(function (response) {
+                        // test worked
+                        console.log("still working");
+                        console.log(response);
+                        instance.connectionExists();
+                    }).catch(function (error) {
+                        console.error("not working");
+                        console.error(error);
+                        instance.noSavedConnection();
+                    });
                 }
             },
-            connectionChanged: function() {
-                this.handle("connectionChanged");
-            },
-            connectionExists: function() {
-                this.handle("connectionExists");
-            },
-            noSavedConnection: function() {
-                this.handle("noSavedConnection");
-            },
-            noSavedRegions: function() {
-                this.handle("noSavedRegions");
+            "noSavedConnection": "get-connection-from-ui",
+            "connectionExists": "configuration-ready"
+        },
+        "get-connection-from-ui": {
+            _onEnter: function () {
+                console.log("prompting for connection");
+                settings_menu.setConnectionAlert("One working endpoint connection is required");
+                settings_menu.showConnectionDialog();
             },
-            regionsRetrieved: function() {
-                this.handle("regionsRetrieved");
+            _onExit: function () {
+                settings_menu.clearConnectionAlert();
             },
-            regionsChanged: function() {
-                this.handle("regionsChanged");
-            },
-            regionsExist: function() {
-                this.handle("regionsExist");
-            },
-            start: function() {
-                this.handle("start");
+            "connectionChanged": "configuration-ready",
+        },
+        "configuration-ready": {
+            _onEnter: function () {
+                // this will notify the parent state machine
+                this.handle("configurationReady");
             }
-        });
+        }
+    },
+    connectionChanged: function () {
+        this.handle("connectionChanged");
+    },
+    connectionExists: function () {
+        this.handle("connectionExists");
+    },
+    noSavedConnection: function () {
+        this.handle("noSavedConnection");
+    },
+    noSavedRegions: function () {
+        this.handle("noSavedRegions");
+    },
+    regionsRetrieved: function () {
+        this.handle("regionsRetrieved");
+    },
+    regionsChanged: function () {
+        this.handle("regionsChanged");
+    },
+    regionsExist: function () {
+        this.handle("regionsExist");
+    },
+    start: function () {
+        this.handle("start");
+    }
+});
 
-        // This FSM tracks the state of model data initial loading
-        var modelDataStateMachine = new machina.Fsm({
-            namespace: "model",
-            initialState: "uninitialized",
-            states: {
-                uninitialized: {
-                    "*": function() {
-                        this.deferUntilTransition();
-                        this.transition("get-saved-channels");
-                    }
-                },
-                "get-saved-channels": {
-                    // pull in settings from Dynamo, later
-                    _onEnter: function() {
-                        this.transition("get-saved-layouts");
-                    }
-                },
-                "get-saved-layouts": {
-                    // pull in settings from Dynamo, later
-                    _onEnter: function() {
-                        this.transition("get-associated-alarms");
-                    }
-                },
-                "get-associated-alarms": {
-                    // pull in settings from Dynamo, later
-                    _onEnter: function() {
-                        this.transition("get-model-data");
-                    }
-                },
-                "get-model-data": {
-                    _onEnter: function() {
-                        var ref = this;
-                        // load the overlays
-                        require(Array.from(plugins.overlays).concat(plugins["default-overlay"]), function() {
-                            // create a closed callback
-                            var f = (function() {
-                                return function() {
-                                    ref.handle("modelDataReady");
-                                };
-                            })();
-                            // tell the model module to map the services
-                            model.map(f);
-                        });
-                    },
-                    modelDataReady: "model-data-ready"
-                },
-                "model-data-ready": {
-                    // done
-                    _onEnter: function() {
-                        this.handle("modelDataReady");
-                    },
-                    refreshModelData: "get-saved-channels"
-                }
-            },
-            "start": function() {
-                this.handle("start");
-            },
-            "modelDataReady": function() {
-                this.handle("modelDataReady");
+// This FSM tracks the state of model data initial loading
+const modelDataStateMachine = new machina.Fsm({
+    namespace: "model",
+    initialState: "uninitialized",
+    states: {
+        uninitialized: {
+            "*": function () {
+                this.deferUntilTransition();
+                this.transition("get-saved-channels");
             }
-        });
-
-        var toolStateMachine = new machina.Fsm({
-            namespace: "tool",
-            initialState: "uninitialized",
-            states: {
-                uninitialized: {
-                    "*": function() {
-                        this.deferUntilTransition();
-                        this.transition("disable-ui");
-                    }
-                },
-                "disable-ui": {
-                    _onEnter: function() {
-                        this.transition("get-configuration");
-                    }
-                },
-                "get-configuration": {
-                    _child: configurationStateMachine,
-                    configurationReady: "enable-ui"
-                },
-                "enable-ui": {
-                    _onEnter: function() {
-                        this.transition("get-model-data");
-                    }
-                },
-                "get-model-data": {
-                    _child: modelDataStateMachine,
-                    modelDataReady: "update-visual-model"
-                },
-                "update-visual-model": {
-                    _onEnter: function() {
-                        this.handle("visualModelReady");
-                    },
-                    "visualModelReady": "visual-model-fresh"
-                        // update tile view, select first tile
-                        // update channel view (this happens with tile selection)
-
-                },
-                "visual-model-fresh": {
-                    _onEnter: function() {
-                        // initialize the next set of UI modules that depend on the model and global view
-                        require([
-                            "app/ui/alarms_menu",
-                            "app/ui/alarm_indicators",
-                            "app/ui/channels_menu",
-                            "app/ui/diagram_menu",
-                            "app/ui/dragdrop",
-                            "app/ui/event_alert_indicators",
-                            "app/ui/informational_overlays",
-                            "app/ui/monitor_view",
-                            "app/ui/nodes_menu",
-                            "app/ui/search_view",
-                            "app/ui/selected_item_view",
-                            "app/ui/tile_view",
-                            "app/ui/information_compartment",
-                            "app/ui/user_defined",
-                            "app/ui/help_menu"
-                        ]);
-                        // show the tiles tab
-                        $("#channel-tiles-tab").tab('show');
-                    },
-                    // start a timer and/or events to watch model data
-                    refreshModelData: function() {
-                        // model.reset();
-                        // hold the input until after transitioning to the next state
-                        this.deferUntilTransition();
-                        this.transition("get-model-data");
-                    },
-                    "connectionChanged": function() {
-                        // prompt for reload
-                        confirmation.show("<p>Would you like to reload from the new endpoint?</p>", function() {
-                            window.location.reload();
-                        });
-                    },
-                    "regionsChanged": function() {
-                        // prompt for reload
-                        confirmation.show("<p>Would you like to reload for the changed regions?</p>", function() {
-                            window.location.reload();
-                        });
-                    }
-                },
-                "visual-model-stale": {
-                    // transitions here when model needs to update storage or reverse
-                }
-            },
-            "start": function() {
-                this.handle("start");
+        },
+        "get-saved-channels": {
+            // pull in settings from Dynamo, later
+            _onEnter: function () {
+                this.transition("get-saved-layouts");
+            }
+        },
+        "get-saved-layouts": {
+            // pull in settings from Dynamo, later
+            _onEnter: function () {
+                this.transition("get-associated-alarms");
+            }
+        },
+        "get-associated-alarms": {
+            // pull in settings from Dynamo, later
+            _onEnter: function () {
+                this.transition("get-model-data");
+            }
+        },
+        "get-model-data": {
+            _onEnter: async function () {
+                var ref = this;
+                // create a closed callback
+                var f = (function () {
+                    return function () {
+                        ref.handle("modelDataReady");
+                    };
+                })();
+                // tell the model module to map the services
+                model.map(f);
             },
-            "refreshModelData": function() {
-                this.handle("refreshModelData");
+            modelDataReady: "model-data-ready"
+        },
+        "model-data-ready": {
+            // done
+            _onEnter: function () {
+                this.handle("modelDataReady");
             },
-            "visualModelReady": function() {
+            refreshModelData: "get-saved-channels"
+        }
+    },
+    "start": function () {
+        this.handle("start");
+    },
+    "modelDataReady": function () {
+        this.handle("modelDataReady");
+    }
+});
+
+const toolStateMachine = new machina.Fsm({
+    namespace: "tool",
+    initialState: "uninitialized",
+    states: {
+        uninitialized: {
+            "*": function () {
+                this.deferUntilTransition();
+                this.transition("disable-ui");
+            }
+        },
+        "disable-ui": {
+            _onEnter: function () {
+                this.transition("get-configuration");
+            }
+        },
+        "get-configuration": {
+            _child: configurationStateMachine,
+            configurationReady: "enable-ui"
+        },
+        "enable-ui": {
+            _onEnter: function () {
+                this.transition("get-model-data");
+            }
+        },
+        "get-model-data": {
+            _child: modelDataStateMachine,
+            modelDataReady: "update-visual-model"
+        },
+        "update-visual-model": {
+            _onEnter: function () {
                 this.handle("visualModelReady");
             },
-            connectionChanged: function() {
-                this.handle("connectionChanged");
-            },
-            connectionExists: function() {
-                this.handle("connectionExists");
+            "visualModelReady": "visual-model-fresh"
+            // update tile view, select first tile
+            // update channel view (this happens with tile selection)
+
+        },
+        "visual-model-fresh": {
+            _onEnter: async function () {
+                // initialize the next set of UI modules that depend on the model and global view
+                await import("./ui/svg_node.js");
+                await import("./ui/alarms_menu.js");
+                await import("./ui/alarm_indicators.js");
+                await import("./ui/channels_menu.js");
+                await import("./ui/diagram_menu.js");
+                await import("./ui/dragdrop.js");
+                await import("./ui/event_alert_indicators.js");
+                await import("./ui/informational_overlays.js");
+                await import("./ui/monitor_view.js");
+                await import("./ui/nodes_menu.js");
+                await import("./ui/search_view.js");
+                await import("./ui/selected_item_view.js");
+                await import("./ui/tile_view.js");
+                await import("./ui/information_compartment.js");
+                await import("./ui/user_defined.js");
+                await import("./ui/help_menu.js");
+                // show the tiles tab
+                $("#channel-tiles-tab").tab('show');
             },
-            noSavedConnection: function() {
-                this.handle("noSavedConnection");
+            // start a timer and/or events to watch model data
+            refreshModelData: function () {
+                // model.reset();
+                // hold the input until after transitioning to the next state
+                this.deferUntilTransition();
+                this.transition("get-model-data");
             },
-            regionsChanged: function() {
-                this.handle("regionsChanged");
+            "connectionChanged": function () {
+                // prompt for reload
+                confirmation.show("<p>Would you like to reload from the new endpoint?</p>", function () {
+                    window.location.reload();
+                });
             },
-            regionsExist: function() {
-                this.handle("regionsExist");
+            "regionsChanged": function () {
+                // prompt for reload
+                confirmation.show("<p>Would you like to reload for the changed regions?</p>", function () {
+                    window.location.reload();
+                });
             }
-        });
+        },
+        "visual-model-stale": {
+            // transitions here when model needs to update storage or reverse
+        }
+    },
+    "start": function () {
+        this.handle("start");
+    },
+    "refreshModelData": function () {
+        this.handle("refreshModelData");
+    },
+    "visualModelReady": function () {
+        this.handle("visualModelReady");
+    },
+    connectionChanged: function () {
+        this.handle("connectionChanged");
+    },
+    connectionExists: function () {
+        this.handle("connectionExists");
+    },
+    noSavedConnection: function () {
+        this.handle("noSavedConnection");
+    },
+    regionsChanged: function () {
+        this.handle("regionsChanged");
+    },
+    regionsExist: function () {
+        this.handle("regionsExist");
+    }
+});
 
-        // development logging
-        toolStateMachine.on("transition", function(data) {
-            // log the state transitions of the FSMs
-            console.log(data);
-        });
+toolStateMachine.on("transition", function (data) {
+    // log the state transitions of the FSMs
+    console.log(data);
+});
 
-        return {
-            "getConfigurationStateMachine": function() {
-                return configurationStateMachine;
-            },
-            "getModelDataStateMachine": function() {
-                return modelDataStateMachine;
-            },
-            "getToolStateMachine": function() {
-                return toolStateMachine;
-            }
-        };
-    });
\ No newline at end of file
+export function getConfigurationStateMachine() {
+    return configurationStateMachine;
+}
+
+export function getModelDataStateMachine() {
+    return modelDataStateMachine;
+}
+
+export function getToolStateMachine() {
+    return toolStateMachine;
+}
diff --git a/source/html/js/app/tools/build_numbers.js b/source/html/js/app/tools/build_numbers.js
index f6a1e5bd..bf747d5b 100644
--- a/source/html/js/app/tools/build_numbers.js
+++ b/source/html/js/app/tools/build_numbers.js
@@ -1,22 +1,20 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/api_check", "app/build", "app/connections"],
-    function($, check, build, connections) {
+import * as check from "../api_check.js";
+import * as build from "../build.js";
+import * as connections from "../connections.js";
 
-        var name = "MSAM Build Numbers";
+const module_name = "MSAM Build Numbers";
 
-        // one week tolerance for stamp differences
-        var tolerance = 3600 * 7 * 24;
-
-        var run_tool = function() {
-            return new Promise(function(resolve, reject) {
-                var current_connection = connections.get_current();
-                var endpoint = current_connection[0];
-                var api_key = current_connection[1];
-                var app_stamp = build.get_version();
-                check.ping(endpoint, api_key).then(function(response) {
-                var message = `
+const run_tool = function () {
+    return new Promise(function (resolve) {
+        const current_connection = connections.get_current();
+        const endpoint = current_connection[0];
+        const api_key = current_connection[1];
+        const app_stamp = build.get_version();
+        check.ping(endpoint, api_key).then(function (response) {
+            const message = `
                 <p class="my-2">This tool shows the build numbers for the currently running browser application and the currently connected endpoint.</p>
                 <table class="table table-bordered my-2">
                     <thead>
@@ -40,26 +38,26 @@ define(["jquery", "app/api_check", "app/build", "app/connections"],
                     </tbody>
                 </table>
                 `;
-                    resolve({
-                        name: name,
-                        success: true,
-                        message: message
-                    });
-                }).catch(function(event) {
-                    resolve({
-                        name: name,
-                        success: false,
-                        message: "Error encountered: " + event
-                    });
-                });
+            resolve({
+                name: module_name,
+                success: true,
+                message: message
+            });
+        }).catch(function (event) {
+            resolve({
+                name: module_name,
+                success: false,
+                message: "Error encountered: " + event
             });
-        };
+        });
+    });
+};
+
+export {
+    module_name as name,
+    run_tool as run
+};
 
-        return {
-            "name": name,
-            "run": run_tool,
-            "requires_single_selection": false,
-            "requires_multi_selection": false,
-            "selection_id_regex": ".*"
-        };
-    });
\ No newline at end of file
+export const requires_single_selection = false;
+export const requires_multi_selection = false;
+export const selection_id_regex = ".*";
diff --git a/source/html/js/app/tools/clear_http.js b/source/html/js/app/tools/clear_http.js
index d7e13239..d57ed29d 100644
--- a/source/html/js/app/tools/clear_http.js
+++ b/source/html/js/app/tools/clear_http.js
@@ -1,23 +1,21 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery"], function($) {
+const module_name = "HTTP Connections (Clear)";
 
-    var name = "HTTP Connections (Clear)";
+const run_tool = function () {
+    return Promise.resolve({
+        name: module_name,
+        success: true,
+        message: "This is a placeholder. This tool will find and show cloud resource interconnections that use HTTP (clear) instead of HTTPS (encrypted)."
+    });
+};
 
-    var run_tool = function() {
-        return Promise.resolve({
-            name: name,
-            success: true,
-            message: "This is a placeholder. This tool will find and show cloud resource interconnections that use HTTP (clear) instead of HTTPS (encrypted)."
-        });
-    };
+export {
+    module_name as name,
+    run_tool as run
+};
 
-    return {
-        "name": name,
-        "run": run_tool,
-        "requires_single_selection": false,
-        "requires_multi_selection": false,
-        "selection_id_regex": ".*"
-    };
-});
\ No newline at end of file
+export const requires_single_selection = false;
+export const requires_multi_selection = false;
+export const selection_id_regex = ".*";
diff --git a/source/html/js/app/tools/cross_region.js b/source/html/js/app/tools/cross_region.js
deleted file mode 100644
index ba510999..00000000
--- a/source/html/js/app/tools/cross_region.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-       SPDX-License-Identifier: Apache-2.0 */
-
-define(["jquery", "app/model"], function($, model) {
-
-    var name = "Cross Region Service Check";
-
-    var run_tool = function() {
-        return new Promise(function(resolve, reject) {
-            var row_num = 1;
-            var rows = "";
-            for (let edge of model.edges.get()) {
-                var node_from = model.nodes.get(edge.from);
-                var node_to = model.nodes.get(edge.to);
-                if (node_from && node_to) {
-                    var region_from = node_from.id.split(":")[3];
-                    var region_to = node_to.id.split(":")[3];
-                    if (region_from != "" && region_to != "") {
-                        if (region_from != region_to) {
-                            var row = `
-                                <tr>
-                                    <th scope="row">${row_num}</th>
-                                    <td>${node_from.id}</td>
-                                    <td>${node_to.id}</td>
-                                </tr>
-                                `;
-                            rows += row;
-                            row_num += 1;
-                        }
-                    }
-                }
-            }
-            var table;
-            if (rows.length > 0) {
-                table = `
-                    <small><table class="table table-bordered my-2">
-                        <thead>
-                            <tr>
-                                <th scope="col">#</th>
-                                <th scope="col">From</th>
-                                <th scope="col">To</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        ${rows}
-                        </tbody>
-                    </table></small>
-                    `;
-            } else {
-                table = `<p class="my-2"><span class="badge badge-success">Success</span> No resources were found with connections that cross regions.</p>`;
-            }
-            var html = `
-            <p class="my-2">This tool checks the nodes at each end of a connection for different AWS region names. It will warn if a connection between services crosses regions.</p>
-            ${table}
-            `;
-            resolve({
-                name: name,
-                success: (rows.length == 0),
-                message: html
-            });
-        });
-    };
-
-    return {
-        "name": name,
-        "run": run_tool,
-        "requires_single_selection": true,
-        "requires_multi_selection": false,
-        "selection_id_regex": ".*"
-    };
-});
\ No newline at end of file
diff --git a/source/html/js/app/tools/duplicate_names.js b/source/html/js/app/tools/duplicate_names.js
index 386264f5..45d9f1ca 100644
--- a/source/html/js/app/tools/duplicate_names.js
+++ b/source/html/js/app/tools/duplicate_names.js
@@ -1,23 +1,23 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery"], function($) {
 
-    var name = "Find Duplicate Named Services";
+const module_name = "Find Duplicate Named Services";
 
-    var run_tool = function() {
-        return Promise.resolve({
-            name: name,
-            success: false,
-            message: "This is a placeholder. This tool will check names or IDs of services and warn on duplicates."
-        });
-    };
+const run_tool = function () {
+    return Promise.resolve({
+        name: module_name,
+        success: false,
+        message: "This is a placeholder. This tool will check names or IDs of services and warn on duplicates."
+    });
+};
+
+export {
+    module_name as name,
+    run_tool as run
+};
+
+export const requires_single_selection = false;
+export const requires_multi_selection = false;
+export const selection_id_regex = ".*";
 
-    return {
-        "name": name,
-        "run": run_tool,
-        "requires_single_selection": false,
-        "requires_multi_selection": false,
-        "selection_id_regex": ".*"
-    };
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/alarm_indicators.js b/source/html/js/app/ui/alarm_indicators.js
index 37a30039..10af4f7d 100644
--- a/source/html/js/app/ui/alarm_indicators.js
+++ b/source/html/js/app/ui/alarm_indicators.js
@@ -1,72 +1,74 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/alarms", "app/ui/diagrams"],
-    function($, _, model, alarms, diagrams) {
+import * as model from "../model.js";
+import * as alarms from "../alarms.js";
+import * as diagrams from "./diagrams.js";
 
-        var updateAlarmState = function(current_alarming_subscribers, previous_alarming_subscribers) {
-            // iterate through current 'set' alerts
-            var alarming_nodes = [];
-            var inactive_nodes = [];
-            for (let subscriber of current_alarming_subscribers) {
-                let node = model.nodes.get(subscriber.ResourceArn);
-                if (node) {
-                    node.alarming = true;
-                    // track which nodes are signaling an alert
-                    if (!alarming_nodes.includes(subscriber.ResourceArn)) {
-                        alarming_nodes.push(subscriber.ResourceArn);
-                        // console.log("setting alert color for " + node.id);
-                        let selected = node.render.alert_selected();
-                        let unselected = node.render.alert_unselected();
-                        // only update the node if the SVG changes
-                        if (selected != node.image.selected || unselected != node.image.unselected) {
-                            node.image.selected = selected;
-                            node.image.unselected = unselected;
-                            model.nodes.update(node);
-                            let matches = diagrams.have_all([node.id]);
-                            // console.log(matches);
-                            for (let diagram of matches) {
-                                diagram.nodes.update(node);
-                                diagram.alert(true);
-                            }
-                        }
+
+const updateAlarmState = function (current_alarming_subscribers, previous_alarming_subscribers) {
+    // iterate through current 'set' alerts
+    const alarming_nodes = [];
+    const inactive_nodes = [];
+    for (let subscriber of current_alarming_subscribers) {
+        let node = model.nodes.get(subscriber.ResourceArn);
+        if (node) {
+            node.alarming = true;
+            // track which nodes are signaling an alert
+            if (!alarming_nodes.includes(subscriber.ResourceArn)) {
+                alarming_nodes.push(subscriber.ResourceArn);
+                // console.log("setting alert color for " + node.id);
+                let selected = node.render.alert_selected();
+                let unselected = node.render.alert_unselected();
+                // only update the node if the SVG changes
+                if (selected != node.image.selected || unselected != node.image.unselected) {
+                    node.image.selected = selected;
+                    node.image.unselected = unselected;
+                    model.nodes.update(node);
+                    let matches = diagrams.have_all([node.id]);
+                    // console.log(matches);
+                    for (let diagram of matches) {
+                        diagram.nodes.update(node);
+                        diagram.alert(true);
                     }
                 }
             }
+        }
+    }
 
-            // calculate the current alerts not included in the previous alerts
-            for (let subscriber of previous_alarming_subscribers) {
-                var found = false;
-                for (let node_id of alarming_nodes) {
-                    found = found || node_id == subscriber.ResourceArn;
-                }
-                if (!found) {
-                    inactive_nodes.push(subscriber.ResourceArn);
-                }
-            }
+    // calculate the current alerts not included in the previous alerts
+    for (let subscriber of previous_alarming_subscribers) {
+        let found = false;
+        for (let node_id of alarming_nodes) {
+            found = found || node_id == subscriber.ResourceArn;
+        }
+        if (!found) {
+            inactive_nodes.push(subscriber.ResourceArn);
+        }
+    }
 
-            // 'unalert' the nodes that are no longer alerting
-            for (let node_id of inactive_nodes) {
-                let node = model.nodes.get(node_id);
-                if (node) {
-                    node.alarming = false;
-                    // only switch the node render if the node is neither alarming nor alerting
-                    let selected = node.render.normal_selected();
-                    let unselected = node.render.normal_unselected();
-                    if (selected != node.image.selected || unselected != node.image.unselected) {
-                        node.image.selected = selected;
-                        node.image.unselected = unselected;
-                        model.nodes.update(node);
-                        let matches = diagrams.have_all([node.id]);
-                        // console.log(matches);
-                        for (let diagram of matches) {
-                            diagram.nodes.update(node);
-                            diagram.alert(false);
-                        }
-                    }
+    // 'unalert' the nodes that are no longer alerting
+    for (let node_id of inactive_nodes) {
+        let node = model.nodes.get(node_id);
+        if (node) {
+            node.alarming = false;
+            // only switch the node render if the node is neither alarming nor alerting
+            let selected = node.render.normal_selected();
+            let unselected = node.render.normal_unselected();
+            if (selected != node.image.selected || unselected != node.image.unselected) {
+                node.image.selected = selected;
+                node.image.unselected = unselected;
+                model.nodes.update(node);
+                let matches = diagrams.have_all([node.id]);
+                // console.log(matches);
+                for (let diagram of matches) {
+                    diagram.nodes.update(node);
+                    diagram.alert(false);
                 }
             }
-        };
+        }
+    }
+};
+
+alarms.add_callback(updateAlarmState);
 
-        alarms.add_callback(updateAlarmState);
-    });
\ No newline at end of file
diff --git a/source/html/js/app/ui/alarms_menu.js b/source/html/js/app/ui/alarms_menu.js
index 5742431a..586d255f 100644
--- a/source/html/js/app/ui/alarms_menu.js
+++ b/source/html/js/app/ui/alarms_menu.js
@@ -1,227 +1,234 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/alarms", "app/regions", "app/ui/alert", "app/ui/diagrams", "app/ui/tile_view", "app/channels"],
-    function($, _, model, alarms, regions_promise, alert, diagrams, tile_view, channels) {
-
-        var set_progress_message = function(message) {
-            $("#subscribe_to_alarms_progress").html(message);
-        };
-
-        var alarms_tabulator = new Tabulator("#subscribe_to_alarms_modal_alarm_selection", {
-            placeholder: "No Alarms to Show",
-            tooltips: true,
-            height: 400, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
-            layout: "fitColumns", //fit columns to width of table (optional)
-            selectable: true,
-            selectableRangeMode: "click",
-            columns: [ //Define Table Columns
-                {
-                    title: "Alarm",
-                    field: "AlarmName",
-                    headerFilter: true
-                }, {
-                    title: "Namespace",
-                    field: "Namespace",
-                    headerFilter: true
-                }, {
-                    title: "Metric",
-                    field: "MetricName",
-                    headerFilter: true
-                }, {
-                    title: "State",
-                    field: "StateValue",
-                    headerFilter: true
-                },
-            ],
-            rowSelectionChanged: function(data, rows) {
-                //update selected row counter on selection change
-                selected_alarm_data = data;
-                $("#subscribe_to_alarms_modal_alarm_selection_count").text(data.length);
-                var diagram = diagrams.shown();
-                if (diagram) {
-                    subscribe_save_button(diagram.network.getSelectedNodes().length > 0 && data.length > 0);
-                }
-            },
-        });
-
-        var nodes_tabulator = new Tabulator("#subscribe_to_alarms_modal_selected_items", {
-            placeholder: "No Model Items Selected",
-            tooltips: true,
-            selectable: false,
-            height: 200, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
-            layout: "fitColumns", //fit columns to width of table (optional)
-            columns: [ //Define Table Columns
-                {
-                    title: "Type",
-                    field: "title"
-                }, {
-                    title: "Name",
-                    field: "name"
-                }, {
-                    title: "ARN",
-                    field: "id"
-                }
-            ]
-        });
-
-        var selected_alarm_data;
-        var selected_alarm_region;
-
-        var progress_value = 0;
-        var progress_start_time = 0;
-        var progress_timer_id = 0;
-
-        var progress_bar_html = function(value, text, color_class) {
-            var html = `<div class="m-2"><div class="progress"><div class="progress-bar ${color_class}" role="progressbar" style="width: ${value}%" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100">${text}</div></div></div>`;
-            return html;
-        };
-
-        var start_progress_message = function() {
-            end_progress_message();
-            progress_value = 0;
-            progress_start_time = new Date().getTime();
-            progress_timer_id = setInterval(function() {
-                update_progress_message();
-            }, 500);
-            update_progress_message();
-        };
-
-        var update_progress_message = function() {
-            var delta_ms = (new Date().getTime()) - progress_start_time;
-            var progress_duration_seconds = Math.round(delta_ms / 1000);
-            var html = progress_bar_html(progress_value, `Loading alarms (${progress_duration_seconds}s)`, "bg-warning");
-            set_progress_message(html);
-            progress_value += 5;
-            if (progress_value > 100) {
-                progress_value = 0;
-            }
-        };
-
-        var end_progress_message = function() {
-            if (progress_timer_id) {
-                clearInterval(progress_timer_id);
-            }
-        };
-
-        const populate_alarms_from_region = function(region) {
-            selected_alarm_region = region;
-            start_progress_message();
-            $("#subscribe_to_alarms_modal_alarm_selection_count").text("0");
-            alarms_tabulator.clearData();
-            alarms.all_alarms_for_region(region).then(function(response) {
-                end_progress_message();
-                var html = progress_bar_html(100, `${response.length} alarm${response.length != 1 ? "s" : "" } in this region`, "bg-success");
-                set_progress_message(html);
-                if (response.length > 0) {
-                    alarms_tabulator.setData(response);
-                }
-            }).catch(function(error) {
-                end_progress_message();
-                var html = progress_bar_html(100, `${error}`, "bg-danger");
-                set_progress_message(html);
-            });
-        };
-
-        var populate_selected_items = function(node_ids) {
-            var data = _.compact(model.nodes.get(node_ids));
-            // placed a scrubbed list of node ids on the dialog as a data attribute
-            $("#subscribe_to_alarms_modal").attr("data-node-ids", JSON.stringify(_.map(data, "id")));
-            // $("#subscribe_to_alarms_modal_selected_items").tabulator("setData", data);
-            nodes_tabulator.setData(data);
-        };
-
-        var subscribe_save_button = function(enable) {
-            if (enable) {
-                // enable the save button
-                $("#subscribe_to_alarms_save").removeClass("disabled");
-                $("#subscribe_to_alarms_save").attr("aria-disabled", false);
-                $("#subscribe_to_alarms_save").attr("disabled", false);
-            } else {
-                // disable the save button
-                $("#subscribe_to_alarms_save").addClass("disabled");
-                $("#subscribe_to_alarms_save").attr("aria-disabled", true);
-                $("#subscribe_to_alarms_save").attr("disabled", true);
-            }
-        };
-
-        $("#alarms_subscribe_button").on("click", function(event) {
-            show_alarm_subscribe_dialog();
-        });
-
-        function show_alarm_subscribe_dialog() {
-            populate_alarms_from_region(selected_region());
-            var diagram = diagrams.shown();
-            if (diagram) {
-                if (diagram.network.getSelectedNodes().length > 0) {
-                    subscribe_save_button(false);
-                    populate_selected_items(diagram.network.getSelectedNodes());
+import * as model from "../model.js";
+import * as alarms from "../alarms.js";
+import * as regions from "../regions.js";
+import * as alert from "./alert.js";
+import * as diagrams from "./diagrams.js";
+import * as tile_view from "./tile_view.js";
+import * as channels from "../channels.js";
+
+
+let selected_alarm_data;
+let selected_alarm_region;
+
+let progress_value = 0;
+let progress_start_time = 0;
+let progress_timer_id = 0;
+
+
+const set_progress_message = function (message) {
+    $("#subscribe_to_alarms_progress").html(message);
+};
+
+const alarms_tabulator = new Tabulator("#subscribe_to_alarms_modal_alarm_selection", {
+    placeholder: "No Alarms to Show",
+    tooltips: true,
+    height: 400, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
+    layout: "fitColumns", //fit columns to width of table (optional)
+    selectable: true,
+    selectableRangeMode: "click",
+    columns: [ //Define Table Columns
+        {
+            title: "Alarm",
+            field: "AlarmName",
+            headerFilter: true
+        }, {
+            title: "Namespace",
+            field: "Namespace",
+            headerFilter: true
+        }, {
+            title: "Metric",
+            field: "MetricName",
+            headerFilter: true
+        }, {
+            title: "State",
+            field: "StateValue",
+            headerFilter: true
+        },
+    ],
+    rowSelectionChanged: function (data) {
+        //update selected row counter on selection change
+        selected_alarm_data = data;
+        $("#subscribe_to_alarms_modal_alarm_selection_count").text(data.length);
+        const diagram = diagrams.shown();
+        if (diagram) {
+            subscribe_save_button(diagram.network.getSelectedNodes().length > 0 && data.length > 0);
+        }
+    },
+});
+
+const nodes_tabulator = new Tabulator("#subscribe_to_alarms_modal_selected_items", {
+    placeholder: "No Model Items Selected",
+    tooltips: true,
+    selectable: false,
+    height: 200, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
+    layout: "fitColumns", //fit columns to width of table (optional)
+    columns: [ //Define Table Columns
+        {
+            title: "Type",
+            field: "title"
+        }, {
+            title: "Name",
+            field: "name"
+        }, {
+            title: "ARN",
+            field: "id"
+        }
+    ]
+});
+
+
+const progress_bar_html = function (value, text, color_class) {
+    const html = `<div class="m-2"><div class="progress"><div class="progress-bar ${color_class}" role="progressbar" style="width: ${value}%" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100">${text}</div></div></div>`;
+    return html;
+};
+
+const start_progress_message = function () {
+    end_progress_message();
+    progress_value = 0;
+    progress_start_time = new Date().getTime();
+    progress_timer_id = setInterval(function () {
+        update_progress_message();
+    }, 500);
+    update_progress_message();
+};
+
+const update_progress_message = function () {
+    const delta_ms = (new Date().getTime()) - progress_start_time;
+    const progress_duration_seconds = Math.round(delta_ms / 1000);
+    const html = progress_bar_html(progress_value, `Loading alarms (${progress_duration_seconds}s)`, "bg-warning");
+    set_progress_message(html);
+    progress_value += 5;
+    if (progress_value > 100) {
+        progress_value = 0;
+    }
+};
+
+const end_progress_message = function () {
+    if (progress_timer_id) {
+        clearInterval(progress_timer_id);
+    }
+};
+
+const populate_alarms_from_region = function (region) {
+    selected_alarm_region = region;
+    start_progress_message();
+    $("#subscribe_to_alarms_modal_alarm_selection_count").text("0");
+    alarms_tabulator.clearData();
+    alarms.all_alarms_for_region(region).then(function (response) {
+        end_progress_message();
+        const html = progress_bar_html(100, `${response.length} alarm${response.length != 1 ? "s" : ""} in this region`, "bg-success");
+        set_progress_message(html);
+        if (response.length > 0) {
+            alarms_tabulator.setData(response);
+        }
+    }).catch(function (error) {
+        end_progress_message();
+        const html = progress_bar_html(100, `${error}`, "bg-danger");
+        set_progress_message(html);
+    });
+};
+
+const populate_selected_items = function (node_ids) {
+    const data = _.compact(model.nodes.get(node_ids));
+    // placed a scrubbed list of node ids on the dialog as a data attribute
+    $("#subscribe_to_alarms_modal").attr("data-node-ids", JSON.stringify(_.map(data, "id")));
+    // $("#subscribe_to_alarms_modal_selected_items").tabulator("setData", data);
+    nodes_tabulator.setData(data);
+};
+
+const subscribe_save_button = function (enable) {
+    if (enable) {
+        // enable the save button
+        $("#subscribe_to_alarms_save").removeClass("disabled");
+        $("#subscribe_to_alarms_save").attr("aria-disabled", false);
+        $("#subscribe_to_alarms_save").attr("disabled", false);
+    } else {
+        // disable the save button
+        $("#subscribe_to_alarms_save").addClass("disabled");
+        $("#subscribe_to_alarms_save").attr("aria-disabled", true);
+        $("#subscribe_to_alarms_save").attr("disabled", true);
+    }
+};
+
+$("#alarms_subscribe_button").on("click", function () {
+    show_alarm_subscribe_dialog();
+});
+
+function show_alarm_subscribe_dialog() {
+    populate_alarms_from_region(selected_region());
+    const diagram = diagrams.shown();
+    if (diagram) {
+        if (diagram.network.getSelectedNodes().length > 0) {
+            subscribe_save_button(false);
+            populate_selected_items(diagram.network.getSelectedNodes());
+            $("#subscribe_to_alarms_modal").modal('show');
+        } else {
+            alert.show("Select at least one node");
+        }
+    } else
+        if (tile_view.shown()) {
+            const tile_name = tile_view.selected();
+            if (tile_name) {
+                channels.retrieve_channel(tile_name).then(function (members) {
+                    const node_ids = _.map(members, "id");
+                    populate_selected_items(node_ids);
                     $("#subscribe_to_alarms_modal").modal('show');
-                } else {
-                    alert.show("Select at least one node");
-                }
-            } else
-            if (tile_view.shown()) {
-                var tile_name = tile_view.selected();
-                if (tile_name) {
-                    channels.retrieve_channel(tile_name).then(function(members) {
-                        var node_ids = _.map(members, "id");
-                        populate_selected_items(node_ids);
-                        $("#subscribe_to_alarms_modal").modal('show');
-                    });
-                } else {
-                    alert.show("Select a tile");
-                }
+                });
+            } else {
+                alert.show("Select a tile");
             }
         }
-
-        $("#subscribe_to_alarms_save").on("click", function(event) {
-            // var diagram = diagrams.shown();
-            var node_ids = JSON.parse($("#subscribe_to_alarms_modal").attr("data-node-ids"));
-            var promises = [];
-            for (let alarm of selected_alarm_data) {
-                promises.push(alarms.subscribe_to_alarm(selected_alarm_region, alarm.AlarmName, node_ids));
-            }
-            Promise.all(promises).then(function() {
-                alert.show("Saved");
-                $("#subscribe_to_alarms_modal").modal('hide');
-                console.log("refresh monitor views");
-                require("app/ui/monitor_view").refresh();
-            }).catch(function(error) {
-                alert.show("Error while saving");
-            });
-        });
-
-        $("#subscribe_to_alarms_cancel").on("click", function(event) {
-            console.log("subscribe_to_alarms_cancel");
-            $("#subscribe_to_alarms_modal").modal('hide');
-        });
-
-        // configure alarm subscription dialog
-        regions_promise().then(function(module) {
-            $("#subscribe_to_alarms_region_dropdown").empty();
-            for (let region of module.get_available()) {
-                var id = `alarm_subscribe_region_${region.RegionName}`;
-                var button_html = `<a class="dropdown-item" href="#" id="${id}">${region.RegionName}</button><br>`;
-                $("#subscribe_to_alarms_region_dropdown").append(button_html);
-                $("#" + id).on("click", (function(local_region, local_jq) {
-                    var local_name = local_region.RegionName;
-                    return function(event) {
-                        local_jq("#dropdownMenuButton").text(local_name);
-                        populate_alarms_from_region(local_name);
-                    };
-                })(region, $));
-            }
-            var first_region = "us-east-1";
-            $("#dropdownMenuButton").text(first_region);
-        });
-
-        var selected_region = function() {
-            return $("#dropdownMenuButton").text();
-        };
-
-        return {
-            show_alarm_subscribe_dialog: show_alarm_subscribe_dialog
-        };
-
-    });
\ No newline at end of file
+}
+
+$("#subscribe_to_alarms_save").on("click", function () {
+    // const diagram = diagrams.shown();
+    const node_ids = JSON.parse($("#subscribe_to_alarms_modal").attr("data-node-ids"));
+    const promises = [];
+    for (let alarm of selected_alarm_data) {
+        promises.push(alarms.subscribe_to_alarm(selected_alarm_region, alarm.AlarmName, node_ids));
+    }
+    Promise.all(promises).then(async function () {
+        alert.show("Saved");
+        $("#subscribe_to_alarms_modal").modal('hide');
+        console.log("refresh monitor views");
+        const monitor_view = await import("./monitor_view.js");
+        monitor_view.refresh();
+    }).catch(function () {
+        alert.show("Error while saving");
+    });
+});
+
+$("#subscribe_to_alarms_cancel").on("click", function () {
+    console.log("subscribe_to_alarms_cancel");
+    $("#subscribe_to_alarms_modal").modal('hide');
+});
+
+// configure alarm subscription dialog
+regions.refresh().then(function (module) {
+    $("#subscribe_to_alarms_region_dropdown").empty();
+    for (let region of module.get_available()) {
+        const id = `alarm_subscribe_region_${region.RegionName}`;
+        const button_html = `<a class="dropdown-item" href="#" id="${id}">${region.RegionName}</button><br>`;
+        $("#subscribe_to_alarms_region_dropdown").append(button_html);
+        $("#" + id).on("click", (function (local_region, local_jq) {
+            const local_name = local_region.RegionName;
+            return function () {
+                local_jq("#dropdownMenuButton").text(local_name);
+                populate_alarms_from_region(local_name);
+            };
+        })(region, $));
+    }
+    const first_region = "us-east-1";
+    $("#dropdownMenuButton").text(first_region);
+});
+
+const selected_region = function () {
+    return $("#dropdownMenuButton").text();
+};
+
+export {
+    show_alarm_subscribe_dialog
+};
diff --git a/source/html/js/app/ui/alert.js b/source/html/js/app/ui/alert.js
index ae3e5b76..c1c8f711 100644
--- a/source/html/js/app/ui/alert.js
+++ b/source/html/js/app/ui/alert.js
@@ -1,22 +1,15 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery"], function($) {
+const timeout = 5000;
 
-    var timeout = 5000;
+const div_id = "alert_div";
 
-    var div_id = "alert_div";
+export const show = function (message) {
+    $("#" + div_id).html(message);
+    $("#" + div_id).fadeIn('slow');
+    setTimeout(function () {
+        $("#" + div_id).fadeOut('slow');
+    }, timeout);
+};
 
-    var show = function(message) {
-        $("#" + div_id).html(message);
-        $("#" + div_id).fadeIn('slow');
-        setTimeout(function() {
-            $("#" + div_id).fadeOut('slow');
-        }, timeout);
-    };
-
-    return {
-        "show": show
-    };
-
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/channels_menu.js b/source/html/js/app/ui/channels_menu.js
index 6e881ea6..57b25e91 100644
--- a/source/html/js/app/ui/channels_menu.js
+++ b/source/html/js/app/ui/channels_menu.js
@@ -1,70 +1,75 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/ui/util", "app/channels", "app/ui/alert", "app/ui/diagrams"],
-    function($, model, ui_util, channels, alert, diagrams) {
-
-        $("#tiles_add_new_tile_button").on("click", function(event) {
-            var diagram = diagrams.shown();
-            if (diagram && diagram.network.getSelectedNodes().length > 0) {
-                $("#channel_definition_modal").modal("show");
-            } else {
-                // show the quick new tile
-                show_quick_new_tile([]);
-            }
-        });
-
-        $("#tiles_add_to_tile_button").on("click", function(event) {
-            var diagram = diagrams.shown();
-            if (diagram && diagram.network.getSelectedNodes().length > 0) {
-                $("#channel_add_node_modal").modal("show");
-            }
-        });
-
-        $("#channel_definition_name").on("input propertychange", () => {
-            var text = $("#channel_definition_name").val().trim();
-            if (text.length > 0) {
-                $("#save_channel_definition").removeClass("disabled");
-                $("#save_channel_definition").attr("aria-disabled", false);
-            } else {
-                $("#save_channel_definition").addClass("disabled");
-                $("#save_channel_definition").attr("aria-disabled", true);
-            }
-        });
-
-        // save button on create channel dialog
-        $("#save_channel_definition").on("click", function(event) {
-            var channel_name = $("#channel_definition_name").val().trim();
-            console.log("save new channel = " + channel_name);
-            var diagram = diagrams.shown();
-            var node_ids = diagram.network.getSelectedNodes();
-            channels.create_channel(channel_name, node_ids).then(function(response) {
-                console.log(response);
-                alert.show("Tile created");
-                var tile_view = require("app/ui/tile_view");
-                tile_view.redraw_tiles();
-            }).catch(function(error) {
-                console.log(error);
-            });
-        });
-
-        $("#channel_definition_modal").on("show.bs.modal", function(event) {
-            $("#channel_definition_name").val("");
-            // populate the dialog with the selected items when it is shown
-            console.log("channel modal show");
-            // initially disable save button
-            $("#save_channel_definition").addClass("disabled");
-            $("#save_channel_definition").attr("aria-disabled", true);
-            // empty the body compartment
-            $("#channel_definition_modal_items").empty();
-            var channel_content = "";
-            var diagram = diagrams.shown();
-            let index = 0;
-            for (let id of diagram.network.getSelectedNodes()) {
-                var node = model.nodes.get(id);
-                channel_content += `<tr><th scope="row">${++index}</th><td>${node.title}</td><td>${node.id}</td></tr>`;
-            }
-            var html = `
+
+import * as model from "../model.js";
+import * as ui_util from "./util.js";
+import * as channels from "../channels.js";
+import * as alert from "./alert.js";
+import * as diagrams from "./diagrams.js";
+
+
+$("#tiles_add_new_tile_button").on("click", function () {
+    const diagram = diagrams.shown();
+    if (diagram && diagram.network.getSelectedNodes().length > 0) {
+        $("#channel_definition_modal").modal("show");
+    } else {
+        // show the quick new tile
+        show_quick_new_tile([]);
+    }
+});
+
+$("#tiles_add_to_tile_button").on("click", function () {
+    const diagram = diagrams.shown();
+    if (diagram && diagram.network.getSelectedNodes().length > 0) {
+        $("#channel_add_node_modal").modal("show");
+    }
+});
+
+$("#channel_definition_name").on("input propertychange", () => {
+    const text = $("#channel_definition_name").val().trim();
+    if (text.length > 0) {
+        $("#save_channel_definition").removeClass("disabled");
+        $("#save_channel_definition").attr("aria-disabled", false);
+    } else {
+        $("#save_channel_definition").addClass("disabled");
+        $("#save_channel_definition").attr("aria-disabled", true);
+    }
+});
+
+// save button on create channel dialog
+$("#save_channel_definition").on("click", function () {
+    const channel_name = $("#channel_definition_name").val().trim();
+    console.log("save new channel = " + channel_name);
+    const diagram = diagrams.shown();
+    const node_ids = diagram.network.getSelectedNodes();
+    channels.create_channel(channel_name, node_ids).then(async function (response) {
+        console.log(response);
+        alert.show("Tile created");
+        const tile_view = await import("./tile_view.js");
+        tile_view.redraw_tiles();
+    }).catch(function (error) {
+        console.error(error);
+    });
+});
+
+$("#channel_definition_modal").on("show.bs.modal", function () {
+    $("#channel_definition_name").val("");
+    // populate the dialog with the selected items when it is shown
+    console.log("channel modal show");
+    // initially disable save button
+    $("#save_channel_definition").addClass("disabled");
+    $("#save_channel_definition").attr("aria-disabled", true);
+    // empty the body compartment
+    $("#channel_definition_modal_items").empty();
+    let channel_content = "";
+    const diagram = diagrams.shown();
+    let index = 0;
+    for (let id of diagram.network.getSelectedNodes()) {
+        const node = model.nodes.get(id);
+        channel_content += `<tr><th scope="row">${++index}</th><td>${node.title}</td><td>${node.id}</td></tr>`;
+    }
+    const html = `
         <table class="table table-sm table-hover">
             <thead>
                 <tr>
@@ -77,22 +82,22 @@ define(["jquery", "app/model", "app/ui/util", "app/channels", "app/ui/alert", "a
                 ${channel_content}
             </tbody>
         </table>`;
-            $("#channel_definition_modal_items").html(html);
-        });
-
-        $("#channel_definition_modal").on("hide.bs.modal", function(event) {
-            console.log("channel modal hide");
-        });
-
-        $("#channel_add_node_modal").on("show.bs.modal", function(event) {
-            var channel_content = "";
-            var diagram = diagrams.shown();
-            let index = 0;
-            for (let id of diagram.network.getSelectedNodes()) {
-                var node = model.nodes.get(id);
-                channel_content += `<tr><th scope="row">${++index}</th><td>${node.title}</td><td draggable="true" data-node-id="${node.id}">${node.id}</td></tr>`;
-            }
-            var html = `
+    $("#channel_definition_modal_items").html(html);
+});
+
+$("#channel_definition_modal").on("hide.bs.modal", function () {
+    console.log("channel modal hide");
+});
+
+$("#channel_add_node_modal").on("show.bs.modal", function () {
+    let channel_content = "";
+    const diagram = diagrams.shown();
+    let index = 0;
+    for (let id of diagram.network.getSelectedNodes()) {
+        const node = model.nodes.get(id);
+        channel_content += `<tr><th scope="row">${++index}</th><td>${node.title}</td><td draggable="true" data-node-id="${node.id}">${node.id}</td></tr>`;
+    }
+    const html = `
         <table class="my-3 table table-sm table-hover">
             <thead>
                 <tr>
@@ -105,14 +110,13 @@ define(["jquery", "app/model", "app/ui/util", "app/channels", "app/ui/alert", "a
                 ${channel_content}
             </tbody>
         </table>`;
-            $("#channel_add_node_modal_items").html(html);
-            channels.channel_list().then(function(channel_list) {
-                var channel_content = "";
-                let index = 0;
-                for (let member of channel_list.sort()) {
-                    // var data = JSON.stringify(node.data);
-                    var checkbox_id = ui_util.makeid();
-                    channel_content += `
+    $("#channel_add_node_modal_items").html(html);
+    channels.channel_list().then(function (channel_list) {
+        let channel_content = "";
+        let index = 0;
+        for (let member of channel_list.sort()) {
+            const checkbox_id = ui_util.makeid();
+            channel_content += `
                     <tr><th scope="row">${++index}</th>
                     <td>
                     <div class="form-check form-check-inline">
@@ -121,8 +125,8 @@ define(["jquery", "app/model", "app/ui/util", "app/channels", "app/ui/alert", "a
                     </td>
                     <td>${member}</td></tr>
                 `;
-                }
-                var html = `
+        }
+        const html = `
                 <table id="channel_add_node_modal_items_table" class="my-3 table table-sm table-hover">
                     <thead>
                         <tr>
@@ -135,79 +139,77 @@ define(["jquery", "app/model", "app/ui/util", "app/channels", "app/ui/alert", "a
                         ${channel_content}
                     </tbody>
                 </table>`;
-                $("#channel_add_node_modal_channels").html(html);
-            });
-        });
-
-        $("#save_channel_add_node").on("click", function(event) {
-            var members = $("#channel_add_node_modal_items td[data-node-id]");
-            var node_ids = [];
-            for (let item of members) {
-                node_ids.push($(item).attr("data-node-id"));
-            }
-            var channel_checks = $("#channel_add_node_modal_channels input[type='checkbox']");
-            var promises = [];
-            for (let item of channel_checks) {
-                if ($(item).prop("checked") == true) {
-                    promises.push(channels.update_channel($(item).val(), node_ids));
-                }
-            }
-            Promise.all(promises).then(function() {
-                var tile_view = require("app/ui/tile_view");
+        $("#channel_add_node_modal_channels").html(html);
+    });
+});
+
+$("#save_channel_add_node").on("click", function () {
+    const members = $("#channel_add_node_modal_items td[data-node-id]");
+    const node_ids = [];
+    for (let item of members) {
+        node_ids.push($(item).attr("data-node-id"));
+    }
+    const channel_checks = $("#channel_add_node_modal_channels input[type='checkbox']");
+    const promises = [];
+    for (let item of channel_checks) {
+        if ($(item).prop("checked") == true) {
+            promises.push(channels.update_channel($(item).val(), node_ids));
+        }
+    }
+    Promise.all(promises).then(async function () {
+        const tile_view = await import("./tile_view.js");
+        tile_view.redraw_tiles();
+    });
+});
+
+const set_quick_new_tile_alert = function (message) {
+    const html = `<div id="quick_new_tile_dialog_alert" class="alert alert-danger" role="alert">${message}</div>`;
+    $("#quick_new_tile_dialog_alert").replaceWith(html);
+};
+
+const clear_quick_new_tile_alert = function () {
+    const html = `<div id="quick_new_tile_dialog_alert"></div>`;
+    $("#quick_new_tile_dialog_alert").replaceWith(html);
+};
+
+$("#quick_new_tile_dialog").on('shown.bs.modal', function () {
+    clear_quick_new_tile_alert();
+    $("#quick_new_tile_dialog_name").val("");
+    $("#quick_new_tile_dialog_name").focus();
+});
+
+$("#quick_new_tile_dialog_proceed").on("click", function () {
+    try {
+        // get the name
+        const channel_name = $("#quick_new_tile_dialog_name").val();
+        // check it
+        const valid_name = new RegExp("^\\w+");
+        if (valid_name.test(channel_name)) {
+            const node_ids = JSON.parse($("#quick_new_tile_dialog").attr("node_ids"));
+            channels.create_channel(channel_name, node_ids).then(async function (response) {
+                console.log(response);
+                $("#quick_new_tile_dialog").modal('hide');
+                alert.show("Tile created");
+                const tile_view = await import("./tile_view.js");
                 tile_view.redraw_tiles();
+            }).catch(function (error) {
+                console.error(error);
             });
-        });
-
-        var set_quick_new_tile_alert = function(message) {
-            var html = `<div id="quick_new_tile_dialog_alert" class="alert alert-danger" role="alert">${message}</div>`;
-            $("#quick_new_tile_dialog_alert").replaceWith(html);
-        };
-
-        var clear_quick_new_tile_alert = function() {
-            var html = `<div id="quick_new_tile_dialog_alert"></div>`;
-            $("#quick_new_tile_dialog_alert").replaceWith(html);
-        };
-
-        $("#quick_new_tile_dialog").on('shown.bs.modal', function() {
-            clear_quick_new_tile_alert();
-            $("#quick_new_tile_dialog_name").val("");
-            $("#quick_new_tile_dialog_name").focus();
-        });
-
-        $("#quick_new_tile_dialog_proceed").on("click", function() {
-            try {
-                // get the name
-                var channel_name = $("#quick_new_tile_dialog_name").val();
-                // check it
-                var valid_name = new RegExp("^\\w+");
-                if (valid_name.test(channel_name)) {
-                    var node_ids = JSON.parse($("#quick_new_tile_dialog").attr("node_ids"));
-                    channels.create_channel(channel_name, node_ids).then(function(response) {
-                        console.log(response);
-                        $("#quick_new_tile_dialog").modal('hide');
-                        alert.show("Tile created");
-                        var tile_view = require("app/ui/tile_view");
-                        tile_view.redraw_tiles();
-                    }).catch(function(error) {
-                        console.log(error);
-                    });
-                } else {
-                    set_quick_new_tile_alert("Names must start with an alphanumeric character");
-                }
-            } catch (error) {
-                console.log(error);
-                set_quick_new_tile_alert("Names must start with an alphanumeric character");
-            }
-        });
-
-        function show_quick_new_tile(node_ids) {
-            var encoded = JSON.stringify(node_ids);
-            $("#quick_new_tile_dialog").attr("node_ids", encoded);
-            $("#quick_new_tile_dialog").modal('show');
+        } else {
+            set_quick_new_tile_alert("Names must start with an alphanumeric character");
         }
-
-        return {
-            show_quick_new_tile: show_quick_new_tile
-        };
-
-    });
\ No newline at end of file
+    } catch (error) {
+        console.log(error);
+        set_quick_new_tile_alert("Names must start with an alphanumeric character");
+    }
+});
+
+function show_quick_new_tile(node_ids) {
+    const encoded = JSON.stringify(node_ids);
+    $("#quick_new_tile_dialog").attr("node_ids", encoded);
+    $("#quick_new_tile_dialog").modal('show');
+}
+
+export {
+    show_quick_new_tile
+};
diff --git a/source/html/js/app/ui/confirmation.js b/source/html/js/app/ui/confirmation.js
index 3cb71e10..b1218ffe 100644
--- a/source/html/js/app/ui/confirmation.js
+++ b/source/html/js/app/ui/confirmation.js
@@ -1,23 +1,16 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery"], function($) {
+export const show = function (html, on_proceed) {
+    $("#confirmation_dialog_proceed").on("click", function (event) {
+        console.log(event);
+        on_proceed();
+    });
+    $("#confirmation_dialog").on("hide.bs.modal", function (event) {
+        console.log(event);
+        $("#confirmation_dialog_proceed").unbind("click");
+    });
+    $("#confirmation_dialog_body").html(html);
+    $("#confirmation_dialog").modal('show');
+};
 
-    var show = function(html, on_proceed) {
-        $("#confirmation_dialog_proceed").on("click", function(event) {
-            console.log(event);
-            on_proceed();
-        });
-        $("#confirmation_dialog").on("hide.bs.modal", function(event) {
-            console.log(event);
-            $("#confirmation_dialog_proceed").unbind("click");
-        });
-        $("#confirmation_dialog_body").html(html);
-        $("#confirmation_dialog").modal('show');
-    };
-
-    return {
-        "show": show
-    };
-
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/diagram_factory.js b/source/html/js/app/ui/diagram_factory.js
index 7732bb41..cdd1d4d7 100644
--- a/source/html/js/app/ui/diagram_factory.js
+++ b/source/html/js/app/ui/diagram_factory.js
@@ -1,538 +1,539 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
-define(["jquery", "lodash", "app/ui/util", "app/model", "app/ui/layout", "app/ui/diagram_statemachine_factory", "app/ui/alert", "app/settings", "app/ui/vis_options"],
-    function ($, _, ui_util, model, layout, diagram_statemachine_factory, alert, settings, vis_options) {
-        class Diagram {
-
-            constructor(name, view_id) {
-                // recurring and one-time callbacks
-                this.click_callbacks = [];
-                this.click_callbacks_once = [];
-                this.doubleclick_callbacks = [];
-                this.doubleclick_callbacks_once = [];
-                this.node_dataset_callbacks = [];
-                this.node_dataset_callbacks_once = [];
-                // DOM containers
-                this.tab_container_id = "diagram-tab";
-                this.diagram_container = $("#diagram-tab-content");
-                // this is used as the display name (UI display)
-                this.name = name;
-                // this is used as any internal ID for the diagram/view, including layout, settings
-                this.view_id = view_id;
-                // make a unique id for our base elements
-                this.base_id = ui_util.makeid();
-                // create ids for our tab and diagram div
-                this.tab_id = "tab_" + this.base_id;
-                this.tab_icon_id = this.tab_id + "_icon";
-                this.diagram_id = "diagram_" + this.base_id;
-                // drag-select
-                // this.drag_canvas;
-                // this.drag_ctx;
-                this.drag_rect = {};
-                this.drag = false;
-                // this.drawingSurfaceImageData;
-                // other state
-                this.first_fit = false;
-                // locking some functions (move, add, delete)
-                this.locked = false;
-                // This FSM manages the startup and state restoration
-                this.statemachine = diagram_statemachine_factory.create(this);
-                // development logging
-                this.statemachine.on("transition", (function () {
-                    return function (data) {
-                        // log the state transitions of the FSMs
-                        console.log(data);
-                    };
-                })());
-                // build it, restore it
-                this.statemachine.start();
-            }
 
-            remove() {
-                // remove the tab and the div
-                $("#" + this.tab_id).remove();
-                $("#" + this.diagram_id).remove();
-            }
-
-            layout_vertical(save) {
-                var my_diagram = this;
-                settings.get("layout-method").then(function (response) {
-                    var method = response.method;
-                    var options = vis_options.vertical_layout;
-                    options.layout.hierarchical.sortMethod = method;
-                    my_diagram.network.once("afterDrawing", (function () {
-                        return function () {
-                            console.log("layout finished");
-                            my_diagram.network.setOptions(vis_options.without_layout);
-                            my_diagram.layout_isolated(false);
-                            my_diagram.network.fit();
-                            if (save) {
-                                layout.save_layout(my_diagram);
-                            }
-                        };
-                    })());
-                    console.log("layout start");
-                    my_diagram.network.setOptions(options);
-                });
-            }
-
-            layout_horizontal(save) {
-                var my_diagram = this;
-                settings.get("layout-method").then(function (response) {
-                    var method = response.method;
-                    var options = vis_options.horizontal_layout;
-                    options.layout.hierarchical.sortMethod = method;
-                    my_diagram.network.once("afterDrawing", (function () {
-                        return function () {
-                            console.log("layout finished");
-                            my_diagram.network.setOptions(vis_options.without_layout);
-                            my_diagram.layout_isolated(false);
-                            my_diagram.network.fit();
-                            if (save) {
-                                layout.save_layout(my_diagram);
-                            }
-                        };
-                    })());
-                    console.log("layout start");
-                    my_diagram.network.setOptions(options);
-                });
-            }
 
-            layout_isolated(save) {
-                var isolated = new Map();
-                var diagram = this;
-                for (let node_id of this.nodes.getIds()) {
-                    var connected = diagram.network.getConnectedNodes(node_id);
-                    if (connected.length === 0) {
-                        var node = diagram.nodes.get(node_id);
-                        var group = isolated.get(node.title);
-                        if (!group) {
-                            group = [node_id];
-                        } else {
-                            group.push(node_id);
-                        }
-                        isolated.set(node.title, group);
-                    }
-                }
-                // console.log(isolated);
-                var dimensions = diagram.node_dimensions();
-                var pad_x = Math.ceil(dimensions.max_width * 1.25);
-                var pad_y = Math.ceil(dimensions.max_height * 1.25);
-                for (let value of isolated.values()) {
-                    // console.log(value);
-                    var node_ids = value;
-                    var bounds = diagram.bounds();
-                    // extra padding at the start
-                    var start_x = bounds.max_x + (pad_x * 2);
-                    var current_x = start_x;
-                    var current_y = bounds.min_y + pad_y;
-                    var nodes_per_row = Math.ceil(Math.sqrt(node_ids.length));
-                    var current_row_nodes = 0;
-                    for (let id of node_ids) {
-                        // console.log(id, current_x, current_y);
-                        diagram.network.moveNode(id, current_x, current_y);
-                        current_row_nodes += 1;
-                        if (current_row_nodes < nodes_per_row) {
-                            current_x += pad_x;
-                        } else {
-                            current_row_nodes = 0;
-                            current_x = start_x;
-                            current_y += pad_y;
-                        }
+import * as ui_util from "./util.js";
+import * as model from "../model.js";
+import * as layout from "./layout.js";
+import * as diagram_statemachine_factory from "./diagram_statemachine_factory.js";
+import * as alert from "./alert.js";
+import * as settings from "../settings.js";
+import * as vis_options from "./vis_options.js";
+
+class Diagram {
+
+    constructor(name, view_id) {
+        // recurring and one-time callbacks
+        this.click_callbacks = [];
+        this.click_callbacks_once = [];
+        this.doubleclick_callbacks = [];
+        this.doubleclick_callbacks_once = [];
+        this.node_dataset_callbacks = [];
+        this.node_dataset_callbacks_once = [];
+        // DOM containers
+        this.tab_container_id = "diagram-tab";
+        this.diagram_container = $("#diagram-tab-content");
+        // this is used as the display name (UI display)
+        this.name = name;
+        // this is used as any internal ID for the diagram/view, including layout, settings
+        this.view_id = view_id;
+        // make a unique id for our base elements
+        this.base_id = ui_util.makeid();
+        // create ids for our tab and diagram div
+        this.tab_id = "tab_" + this.base_id;
+        this.tab_icon_id = this.tab_id + "_icon";
+        this.diagram_id = "diagram_" + this.base_id;
+        // drag-select
+        // this.drag_canvas;
+        // this.drag_ctx;
+        this.drag_rect = {};
+        this.drag = false;
+        // this.drawingSurfaceImageData;
+        // other state
+        this.first_fit = false;
+        // locking some functions (move, add, delete)
+        this.locked = false;
+        // This FSM manages the startup and state restoration
+        this.statemachine = diagram_statemachine_factory.create(this);
+        // development logging
+        this.statemachine.on("transition", (function () {
+            return function (data) {
+                // log the state transitions of the FSMs
+                console.log(data);
+            };
+        })());
+        // build it, restore it
+        this.statemachine.start();
+    }
+
+    remove() {
+        // remove the tab and the div
+        $("#" + this.tab_id).remove();
+        $("#" + this.diagram_id).remove();
+    }
+
+    layout_vertical(save) {
+        const my_diagram = this;
+        settings.get("layout-method").then(function (response) {
+            var method = response.method;
+            var options = vis_options.vertical_layout;
+            options.layout.hierarchical.sortMethod = method;
+            my_diagram.network.once("afterDrawing", (function () {
+                return function () {
+                    console.log("layout finished");
+                    my_diagram.network.setOptions(vis_options.without_layout);
+                    my_diagram.layout_isolated(false);
+                    my_diagram.network.fit();
+                    if (save) {
+                        layout.save_layout(my_diagram);
                     }
-                }
-                if (save) {
-                    layout.save_layout(diagram);
-                }
-            }
-
-            node_dimensions() {
-                var max_width = 0;
-                var max_height = 0;
-                try {
-                    var node_id = _.head(this.nodes.getIds());
-                    var box = this.network.getBoundingBox(node_id);
-                    var height = Math.abs(box.bottom - box.top);
-                    var width = Math.abs(box.right - box.left);
-                    if (height > max_height) {
-                        max_height = height;
-                    }
-                    if (width > max_width) {
-                        max_width = width;
-                    }
-                } catch (error) {
-                    // print only
-                    console.log(error);
-                    max_height = 0;
-                    max_height = 0;
-                }
-                return {
-                    "max_width": max_width,
-                    "max_height": max_height
                 };
-            }
-
-            bounds() {
-                var min_x = Number.MAX_SAFE_INTEGER;
-                var max_x = Number.MIN_SAFE_INTEGER;
-                var min_y = Number.MAX_SAFE_INTEGER;
-                var max_y = Number.MIN_SAFE_INTEGER;
-                var positions = this.network.getPositions();
-                for (let pos_value of Object.values(positions)) {
-                    if (pos_value.x > max_x) {
-                        max_x = pos_value.x;
-                    }
-                    if (pos_value.x < min_x) {
-                        min_x = pos_value.x;
-                    }
-                    if (pos_value.y > max_y) {
-                        max_y = pos_value.y;
-                    }
-                    if (pos_value.y < min_y) {
-                        min_y = pos_value.y;
+            })());
+            console.log("layout start");
+            my_diagram.network.setOptions(options);
+        });
+    }
+
+    layout_horizontal(save) {
+        var my_diagram = this;
+        settings.get("layout-method").then(function (response) {
+            var method = response.method;
+            var options = vis_options.horizontal_layout;
+            options.layout.hierarchical.sortMethod = method;
+            my_diagram.network.once("afterDrawing", (function () {
+                return function () {
+                    console.log("layout finished");
+                    my_diagram.network.setOptions(vis_options.without_layout);
+                    my_diagram.layout_isolated(false);
+                    my_diagram.network.fit();
+                    if (save) {
+                        layout.save_layout(my_diagram);
                     }
-                }
-                return {
-                    "min_x": min_x,
-                    "max_x": max_x,
-                    "min_y": min_y,
-                    "max_y": max_y
                 };
+            })());
+            console.log("layout start");
+            my_diagram.network.setOptions(options);
+        });
+    }
+
+    layout_isolated(save) {
+        var isolated = new Map();
+        var diagram = this;
+        for (let node_id of this.nodes.getIds()) {
+            var connected = diagram.network.getConnectedNodes(node_id);
+            if (connected.length === 0) {
+                var node = diagram.nodes.get(node_id);
+                var group = isolated.get(node.title);
+                if (!group) {
+                    group = [node_id];
+                } else {
+                    group.push(node_id);
+                }
+                isolated.set(node.title, group);
             }
-
-            restore_nodes() {
-                var diagram = this;
-                return new Promise(function (resolve, reject) {
-                    layout.retrieve_layout(diagram).then(function (layout_items) {
-                        var node_ids = _.map(layout_items, "id");
-                        var nodes = _.compact(model.nodes.get(node_ids));
-                        diagram.nodes.update(nodes);
-                        resolve(layout_items);
-                    }).catch(function (error) {
-                        console.log(error);
-                        reject(error);
-                    });
-                });
-            }
-
-            restore_layout(layout_items) {
-                var diagram = this;
-                return new Promise(function (resolve, reject) {
-                    var inner_promise;
-                    if (!layout_items) {
-                        inner_promise = layout.retrieve_layout(diagram);
-                    } else {
-                        inner_promise = Promise.resolve(layout_items);
-                    }
-                    inner_promise.then(function (layout_items) {
-                        for (let item of layout_items) {
-                            var node = diagram.nodes.get(item.id);
-                            if (node) {
-                                diagram.network.moveNode(item.id, item.x, item.y);
-                            }
-                        }
-                        resolve(layout_items);
-                    }).catch(function (error) {
-                        console.log(error);
-                        reject(error);
-                    });
-                });
-            }
-
-            restore_edges() {
-                for (let node_id of this.nodes.getIds()) {
-                    // find all edges connected to this node
-                    var matches = model.edges.get({
-                        filter: (function (local_node_id) {
-                            return function (edge) {
-                                return (edge.to == local_node_id || edge.from == local_node_id);
-                            };
-                        })(node_id)
-                    });
-                    // add each edge if both nodes are present
-                    for (let edge of matches) {
-                        if (this.edges.get(edge.id) == null) {
-                            // compact nulls, do we have both ends?
-                            var ends = _.compact(this.nodes.get([edge.to, edge.from]));
-                            if (ends.length == 2) {
-                                // yes, add the edge between the endpoints
-                                this.edges.update(edge);
-                            }
-                        }
-                    }
+        }
+        // console.log(isolated);
+        var dimensions = diagram.node_dimensions();
+        var pad_x = Math.ceil(dimensions.max_width * 1.25);
+        var pad_y = Math.ceil(dimensions.max_height * 1.25);
+        for (let value of isolated.values()) {
+            // console.log(value);
+            var node_ids = value;
+            var bounds = diagram.bounds();
+            // extra padding at the start
+            var start_x = bounds.max_x + (pad_x * 2);
+            var current_x = start_x;
+            var current_y = bounds.min_y + pad_y;
+            var nodes_per_row = Math.ceil(Math.sqrt(node_ids.length));
+            var current_row_nodes = 0;
+            for (let id of node_ids) {
+                // console.log(id, current_x, current_y);
+                diagram.network.moveNode(id, current_x, current_y);
+                current_row_nodes += 1;
+                if (current_row_nodes < nodes_per_row) {
+                    current_x += pad_x;
+                } else {
+                    current_row_nodes = 0;
+                    current_x = start_x;
+                    current_y += pad_y;
                 }
             }
-
-            synchronize_edges(event, node_ids) {
-                var diagram = this;
-                if (event == "add" || event == "update") {
-                    for (let id of node_ids) {
-                        // query all edges from the model with this node
-                        let filtered = _.filter(model.edges.get(),
-                            (function (local_id) {
-                                return function (edge) { return edge.to == local_id || edge.from == local_id; };
-                            })(id)
-                        );
-                        for (let edge of filtered) {
-                            if (edge.to == id) {
-                                // check 'from' node is on diagram
-                                if (diagram.nodes.get(edge.from)) {
-                                    // console.log(`${diagram.name} diagram connecting nodes ${edge.from} ${edge.to}`);
-                                    diagram.edges.update(edge);
-                                }
-                            } else
-                                if (edge.from == id) {
-                                    // check 'to' node is on diagram
-                                    if (diagram.nodes.get(edge.to)) {
-                                        // console.log(`${diagram.name} diagram connecting nodes ${edge.from} ${edge.to}`);
-                                        diagram.edges.update(edge);
-                                    }
-                                }
-                        }
-                    }
-                } else
-                    if (event == "remove") {
-                        for (let id of node_ids) {
-                            // query all edges on the diagram 
-                            let filtered = _.filter(model.edges.get(),
-                                (function (local_id) {
-                                    return function (edge) { return edge.to == local_id || edge.from == local_id; };
-                                })(id)
-                            );
-                            for (let edge of filtered) {
-                                console.log("removing unneeded edge");
-                                diagram.edges.remove(edge.id);
-                            }
-                        }
-                    }
+        }
+        if (save) {
+            layout.save_layout(diagram);
+        }
+    }
+
+    node_dimensions() {
+        var max_width = 0;
+        var max_height = 0;
+        try {
+            var node_id = _.head(this.nodes.getIds());
+            var box = this.network.getBoundingBox(node_id);
+            var height = Math.abs(box.bottom - box.top);
+            var width = Math.abs(box.right - box.left);
+            if (height > max_height) {
+                max_height = height;
             }
-
-            synchronize_content(event, node_ids) {
-                var diagram = this;
-                // if (event == "add" || event == "update") {
-                if (event == "add") {
-                    layout.save_layout(diagram, node_ids);
-                } else
-                    if (event == "remove") {
-                        layout.delete_layout(diagram, node_ids);
-                    }
+            if (width > max_width) {
+                max_width = width;
             }
-
-            hide_div() {
-                $("#" + this.diagram_div).hide();
+        } catch (error) {
+            // print only
+            console.log(error);
+            max_height = 0;
+            max_height = 0;
+        }
+        return {
+            "max_width": max_width,
+            "max_height": max_height
+        };
+    }
+
+    bounds() {
+        var min_x = Number.MAX_SAFE_INTEGER;
+        var max_x = Number.MIN_SAFE_INTEGER;
+        var min_y = Number.MAX_SAFE_INTEGER;
+        var max_y = Number.MIN_SAFE_INTEGER;
+        var positions = this.network.getPositions();
+        for (let pos_value of Object.values(positions)) {
+            if (pos_value.x > max_x) {
+                max_x = pos_value.x;
             }
-
-            show_div() {
-                $("#" + this.diagram_div).show();
+            if (pos_value.x < min_x) {
+                min_x = pos_value.x;
             }
-
-            show() {
-                $("#" + this.tab_id).tab("show");
+            if (pos_value.y > max_y) {
+                max_y = pos_value.y;
             }
-
-            shown() {
-                return $("#" + this.tab_id).attr("aria-selected") == 'true';
+            if (pos_value.y < min_y) {
+                min_y = pos_value.y;
             }
-
-            fit_to_nodes(node_ids) {
-                if (Array.isArray(node_ids)) {
-                    this.network.fit({
-                        nodes: node_ids,
-                        animation: true
-                    });
-                }
+        }
+        return {
+            "min_x": min_x,
+            "max_x": max_x,
+            "min_y": min_y,
+            "max_y": max_y
+        };
+    }
+
+    restore_nodes() {
+        var diagram = this;
+        return new Promise(function (resolve, reject) {
+            layout.retrieve_layout(diagram).then(function (layout_items) {
+                var node_ids = _.map(layout_items, "id");
+                var nodes = _.compact(model.nodes.get(node_ids));
+                diagram.nodes.update(nodes);
+                resolve(layout_items);
+            }).catch(function (error) {
+                console.error(error);
+                reject(error);
+            });
+        });
+    }
+
+    restore_layout(layout_items) {
+        var diagram = this;
+        return new Promise(function (resolve, reject) {
+            var inner_promise;
+            if (!layout_items) {
+                inner_promise = layout.retrieve_layout(diagram);
+            } else {
+                inner_promise = Promise.resolve(layout_items);
             }
-
-            fit_to_nearest(x, y) {
-                // get the vis canvas location of the doubletap
-                var click_x = x;
-                var click_y = y;
-                var network = this.network;
-                var closest = null;
-                // get all the node locations
-                var positions = network.getPositions();
-                // find the node closest to the doubletap
-                for (let p of Object.entries(positions)) {
-                    if (closest == null) {
-                        closest = {
-                            id: p[0],
-                            dx: Math.abs(click_x - p[1].x),
-                            dy: Math.abs(click_y - p[1].y)
-                        };
-                    } else {
-                        var dx = Math.abs(click_x - p[1].x);
-                        var dy = Math.abs(click_y - p[1].y);
-                        // update the closest node if better one is found
-                        if (dx + dy < closest.dx + closest.dy) {
-                            closest = {
-                                id: p[0],
-                                dx: dx,
-                                dy: dy
-                            };
-                        }
+            inner_promise.then(function (layout_items) {
+                for (let item of layout_items) {
+                    var node = diagram.nodes.get(item.id);
+                    if (node) {
+                        diagram.network.moveNode(item.id, item.x, item.y);
                     }
                 }
-                if (closest != null) {
-                    // zoom to the closest node to the doubletap
-                    network.fit({
-                        nodes: [closest.id],
-                        animation: true
-                    });
+                resolve(layout_items);
+            }).catch(function (error) {
+                console.error(error);
+                reject(error);
+            });
+        });
+    }
+
+    restore_edges() {
+        for (let node_id of this.nodes.getIds()) {
+            // find all edges connected to this node
+            var matches = model.edges.get({
+                filter: (function (local_node_id) {
+                    return function (edge) {
+                        return (edge.to == local_node_id || edge.from == local_node_id);
+                    };
+                })(node_id)
+            });
+            // add each edge if both nodes are present
+            for (let edge of matches) {
+                if (this.edges.get(edge.id) == null) {
+                    // compact nulls, do we have both ends?
+                    var ends = _.compact(this.nodes.get([edge.to, edge.from]));
+                    if (ends.length == 2) {
+                        // yes, add the edge between the endpoints
+                        this.edges.update(edge);
+                    }
                 }
             }
-
-            save_drawing_surface() {
-                this.drawingSurfaceImageData = this.drag_ctx.getImageData(0, 0, this.drag_canvas.width, this.drag_canvas.height);
-            }
-
-            restore_drawing_surface() {
-                this.drag_ctx.putImageData(this.drawingSurfaceImageData, 0, 0);
+        }
+    }
+
+    synchronize_edges(event, node_ids) {
+        var diagram = this;
+        if (event == "add" || event == "update") {
+            for (let id of node_ids) {
+                // query all edges from the model with this node
+                let filtered = _.filter(model.edges.get(),
+                    (function (local_id) {
+                        return function (edge) { return edge.to == local_id || edge.from == local_id; };
+                    })(id)
+                );
+                for (let edge of filtered) {
+                    if (edge.to == id) {
+                        // check 'from' node is on diagram
+                        if (diagram.nodes.get(edge.from)) {
+                            // console.log(`${diagram.name} diagram connecting nodes ${edge.from} ${edge.to}`);
+                            diagram.edges.update(edge);
+                        }
+                    } else
+                        if (edge.from == id) {
+                            // check 'to' node is on diagram
+                            if (diagram.nodes.get(edge.to)) {
+                                // console.log(`${diagram.name} diagram connecting nodes ${edge.from} ${edge.to}`);
+                                diagram.edges.update(edge);
+                            }
+                        }
+                }
             }
-
-            select_nodes_from_highlight() {
-                var fromX, toX, fromY, toY;
-                var nodesIdInDrawing = [];
-                var xRange = this.get_start_to_end(this.drag_rect.startX, this.drag_rect.w);
-                var yRange = this.get_start_to_end(this.drag_rect.startY, this.drag_rect.h);
-
-                var allNodes = this.nodes.get();
-                for (let i = 0; i < allNodes.length; i++) {
-                    var curNode = allNodes[i];
-                    var nodePosition = this.network.getPositions([curNode.id]);
-                    var nodeXY = this.network.canvasToDOM({
-                        x: nodePosition[curNode.id].x,
-                        y: nodePosition[curNode.id].y
-                    });
-                    if (xRange.start <= nodeXY.x && nodeXY.x <= xRange.end && yRange.start <= nodeXY.y && nodeXY.y <= yRange.end) {
-                        nodesIdInDrawing.push(curNode.id);
+        } else
+            if (event == "remove") {
+                for (let id of node_ids) {
+                    // query all edges on the diagram 
+                    let filtered = _.filter(model.edges.get(),
+                        (function (local_id) {
+                            return function (edge) { return edge.to == local_id || edge.from == local_id; };
+                        })(id)
+                    );
+                    for (let edge of filtered) {
+                        console.log("removing unneeded edge");
+                        diagram.edges.remove(edge.id);
                     }
                 }
-                this.network.selectNodes(nodesIdInDrawing);
-                alert.show(nodesIdInDrawing.length + " selected");
             }
-
-            get_start_to_end(start, theLen) {
-                return theLen > 0 ? {
-                    start: start,
-                    end: start + theLen
-                } : {
-                    start: start + theLen,
-                    end: start
-                };
+    }
+
+    synchronize_content(event, node_ids) {
+        var diagram = this;
+        // if (event == "add" || event == "update") {
+        if (event == "add") {
+            layout.save_layout(diagram, node_ids);
+        } else
+            if (event == "remove") {
+                layout.delete_layout(diagram, node_ids);
             }
-
-            add_singleclick_callback(callback, once = false) {
-                if (once) {
-                    if (!this.click_callbacks_once.includes(callback)) {
-                        this.click_callbacks_once.push(callback);
-                    }
-                } else {
-                    if (!this.click_callbacks.includes(callback)) {
-                        this.click_callbacks.push(callback);
-                    }
+    }
+
+    hide_div() {
+        $("#" + this.diagram_div).hide();
+    }
+
+    show_div() {
+        $("#" + this.diagram_div).show();
+    }
+
+    show() {
+        $("#" + this.tab_id).tab("show");
+    }
+
+    shown() {
+        return $("#" + this.tab_id).attr("aria-selected") == 'true';
+    }
+
+    fit_to_nodes(node_ids) {
+        if (Array.isArray(node_ids)) {
+            this.network.fit({
+                nodes: node_ids,
+                animation: true
+            });
+        }
+    }
+
+    fit_to_nearest(x, y) {
+        // get the vis canvas location of the doubletap
+        var click_x = x;
+        var click_y = y;
+        var network = this.network;
+        var closest = null;
+        // get all the node locations
+        var positions = network.getPositions();
+        // find the node closest to the doubletap
+        for (let p of Object.entries(positions)) {
+            if (closest == null) {
+                closest = {
+                    id: p[0],
+                    dx: Math.abs(click_x - p[1].x),
+                    dy: Math.abs(click_y - p[1].y)
+                };
+            } else {
+                var dx = Math.abs(click_x - p[1].x);
+                var dy = Math.abs(click_y - p[1].y);
+                // update the closest node if better one is found
+                if (dx + dy < closest.dx + closest.dy) {
+                    closest = {
+                        id: p[0],
+                        dx: dx,
+                        dy: dy
+                    };
                 }
             }
-
-            add_doubleclick_callback(callback, once = false) {
-                if (once) {
-                    if (!this.doubleclick_callbacks_once.includes(callback)) {
-                        this.doubleclick_callbacks_once.push(callback);
-                    }
-                } else {
-                    if (!this.doubleclick_callbacks.includes(callback)) {
-                        this.doubleclick_callbacks.push(callback);
-                    }
-                }
+        }
+        if (closest != null) {
+            // zoom to the closest node to the doubletap
+            network.fit({
+                nodes: [closest.id],
+                animation: true
+            });
+        }
+    }
+
+    save_drawing_surface() {
+        this.drawingSurfaceImageData = this.drag_ctx.getImageData(0, 0, this.drag_canvas.width, this.drag_canvas.height);
+    }
+
+    restore_drawing_surface() {
+        this.drag_ctx.putImageData(this.drawingSurfaceImageData, 0, 0);
+    }
+
+    select_nodes_from_highlight() {
+        var nodesIdInDrawing = [];
+        var xRange = this.get_start_to_end(this.drag_rect.startX, this.drag_rect.w);
+        var yRange = this.get_start_to_end(this.drag_rect.startY, this.drag_rect.h);
+
+        var allNodes = this.nodes.get();
+        for (let i = 0; i < allNodes.length; i++) {
+            var curNode = allNodes[i];
+            var nodePosition = this.network.getPositions([curNode.id]);
+            var nodeXY = this.network.canvasToDOM({
+                x: nodePosition[curNode.id].x,
+                y: nodePosition[curNode.id].y
+            });
+            if (xRange.start <= nodeXY.x && nodeXY.x <= xRange.end && yRange.start <= nodeXY.y && nodeXY.y <= yRange.end) {
+                nodesIdInDrawing.push(curNode.id);
             }
+        }
+        this.network.selectNodes(nodesIdInDrawing);
+        alert.show(nodesIdInDrawing.length + " selected");
+    }
+
+    get_start_to_end(start, theLen) {
+        return theLen > 0 ? {
+            start: start,
+            end: start + theLen
+        } : {
+            start: start + theLen,
+            end: start
+        };
+    }
 
-            add_node_dataset_callback(callback, once = false) {
-                if (once) {
-                    if (!this.node_dataset_callbacks_once.includes(callback)) {
-                        this.node_dataset_callbacks_once.push(callback);
-                    }
-                } else {
-                    if (!this.node_dataset_callbacks.includes(callback)) {
-                        this.node_dataset_callbacks.push(callback);
-                    }
-                }
+    add_singleclick_callback(callback, once = false) {
+        if (once) {
+            if (!this.click_callbacks_once.includes(callback)) {
+                this.click_callbacks_once.push(callback);
             }
-
-            remove_node_dataset_callback(callback, once = false) {
-                if (once) {
-                    if (!this.node_dataset_callbacks_once.includes(callback)) {
-                        this.node_dataset_callbacks_once.push(callback);
-                    }
-                } else {
-                    if (!this.node_dataset_callbacks.includes(callback)) {
-                        this.node_dataset_callbacks.push(callback);
-                    }
-                }
+        } else {
+            if (!this.click_callbacks.includes(callback)) {
+                this.click_callbacks.push(callback);
             }
+        }
+    }
 
-            blink(blinks, ids) {
-                var interval_ms = 500;
-                ids = Array.isArray(ids) ? ids : [ids];
-                var diagram = this;
-                if (blinks > 0) {
-                    setTimeout(
-                        function () {
-                            if (blinks % 2 == 0) {
-                                diagram.network.selectNodes(ids, false);
-                            } else {
-                                diagram.network.unselectAll();
-                            }
-                            diagram.blink(blinks - 1, ids);
-                        }, interval_ms);
-                } else {
-                    diagram.network.unselectAll();
-                }
+    add_doubleclick_callback(callback, once = false) {
+        if (once) {
+            if (!this.doubleclick_callbacks_once.includes(callback)) {
+                this.doubleclick_callbacks_once.push(callback);
             }
-
-            alert(state) {
-                if (state) {
-                    $("#" + this.tab_icon_id).text("warning");
-                } else {
-                    $("#" + this.tab_icon_id).text("image_aspect_ratio");
-                }
+        } else {
+            if (!this.doubleclick_callbacks.includes(callback)) {
+                this.doubleclick_callbacks.push(callback);
             }
+        }
+    }
 
-            lock(state) {
-                const key = `diagram_lock_${this.view_id}`;
-                this.locked = Boolean(state).valueOf();
-                const promise = settings.put(key, { "name": this.name, "locked": this.locked });
-                return promise;
+    add_node_dataset_callback(callback, once = false) {
+        if (once) {
+            if (!this.node_dataset_callbacks_once.includes(callback)) {
+                this.node_dataset_callbacks_once.push(callback);
             }
-
-            isLocked() {
-                const key = `diagram_lock_${this.view_id}`;
-                return new Promise((resolve, reject) => {
-                    const my_diagram = this;
-                    settings.get(key).then(function (value) {
-                        if (value) {
-                            my_diagram.locked = value.locked;
-                        }
-                        else {
-                            my_diagram.locked = false;
-                        }
-                        resolve(my_diagram.locked);
-                    }).catch((error) => {
-                        reject(error);
-                    });
-                });
+        } else {
+            if (!this.node_dataset_callbacks.includes(callback)) {
+                this.node_dataset_callbacks.push(callback);
             }
         }
+    }
 
-        function create(name, view_id) {
-            return new Diagram(name, view_id);
+    remove_node_dataset_callback(callback, once = false) {
+        if (once) {
+            if (!this.node_dataset_callbacks_once.includes(callback)) {
+                this.node_dataset_callbacks_once.push(callback);
+            }
+        } else {
+            if (!this.node_dataset_callbacks.includes(callback)) {
+                this.node_dataset_callbacks.push(callback);
+            }
         }
+    }
+
+    blink(blinks, ids) {
+        var interval_ms = 500;
+        ids = Array.isArray(ids) ? ids : [ids];
+        var diagram = this;
+        if (blinks > 0) {
+            setTimeout(
+                function () {
+                    if (blinks % 2 == 0) {
+                        diagram.network.selectNodes(ids, false);
+                    } else {
+                        diagram.network.unselectAll();
+                    }
+                    diagram.blink(blinks - 1, ids);
+                }, interval_ms);
+        } else {
+            diagram.network.unselectAll();
+        }
+    }
 
-        // this shuts down the browser's context menu
-        document.body.oncontextmenu = function () {
-            return false;
-        };
-
-        return {
-            "create": create
-        };
-
-    });
\ No newline at end of file
+    alert(state) {
+        if (state) {
+            $("#" + this.tab_icon_id).text("warning");
+        } else {
+            $("#" + this.tab_icon_id).text("image_aspect_ratio");
+        }
+    }
+
+    lock(state) {
+        const key = `diagram_lock_${this.view_id}`;
+        this.locked = Boolean(state).valueOf();
+        const promise = settings.put(key, { "name": this.name, "locked": this.locked });
+        return promise;
+    }
+
+    isLocked() {
+        const key = `diagram_lock_${this.view_id}`;
+        return new Promise((resolve, reject) => {
+            const my_diagram = this;
+            settings.get(key).then(function (value) {
+                if (value) {
+                    my_diagram.locked = value.locked;
+                }
+                else {
+                    my_diagram.locked = false;
+                }
+                resolve(my_diagram.locked);
+            }).catch((error) => {
+                reject(error);
+            });
+        });
+    }
+}
+
+export function create(name, view_id) {
+    return new Diagram(name, view_id);
+}
+
+// this shuts down the browser's context menu
+document.body.oncontextmenu = function () {
+    return false;
+};
diff --git a/source/html/js/app/ui/diagram_menu.js b/source/html/js/app/ui/diagram_menu.js
index c59ddcc9..7827bede 100644
--- a/source/html/js/app/ui/diagram_menu.js
+++ b/source/html/js/app/ui/diagram_menu.js
@@ -1,304 +1,309 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["lodash", "jquery", "app/model", "app/ui/util", "app/ui/layout", "app/ui/alert", "app/ui/diagrams", "app/ui/confirmation"],
-    function(_, $, model, ui_util, layout, alert, diagrams, confirmation) {
 
-        var vary_multiplier = 8;
+import * as model from "../model.js";
+import * as ui_util from "./util.js";
+import * as layout from "./layout.js";
+import * as alert from "./alert.js";
+import * as diagrams from "./diagrams.js";
+import * as confirmation from "./confirmation.js";
 
-        var inventory_tabulator = new Tabulator("#diagram_contents_inventory", {
-            placeholder: "No Inventory",
-            selectable: true,
-            selectableRangeMode: "click",
-            index: "id",
-            tooltips: true,
-            height: 600,
-            layout: "fitColumns",
-            groupBy: ["title"],
-            initialSort: [
-                { column: "id" },
-                { column: "name" }
-            ],
-            columns: [{
-                title: "Name",
-                field: "name",
-                headerFilter: true
-            }, {
-                title: "AWS Region",
-                field: "region",
-                headerFilter: true
-            }, {
-                title: "ARN",
-                field: "id",
-                headerFilter: true
-            }]
-        });
 
-        var diagram_tabulator = new Tabulator("#diagram_contents_diagram", {
-            placeholder: "No Diagram Contents",
-            selectable: true,
-            selectableRangeMode: "click",
-            index: "id",
-            tooltips: true,
-            height: 600,
-            layout: "fitColumns",
-            groupBy: ["title"],
-            initialSort: [
-                { column: "id" },
-                { column: "name" }
-            ],
-            columns: [{
-                title: "Name",
-                field: "name",
-                headerFilter: true
-            }, {
-                title: "AWS Region",
-                field: "region",
-                headerFilter: true
-            }, {
-                title: "ARN",
-                field: "id",
-                headerFilter: true
-            }]
-        });
+var vary_multiplier = 8;
 
-        $("#diagram_remove_selected").on("click", function(event) {
-            var shown = diagrams.shown();
-            if (shown) {
-                var selected = shown.network.getSelectedNodes();
-                if (Array.isArray(selected) && selected.length > 0) {
-                    var html = `Remove ${selected.length} node${(selected.length==1?"":"s")} from the diagram?`;
-                    confirmation.show(html, function() {
-                        shown.nodes.remove(selected);
-                        var message = `${selected.length} node${(selected.length==1?"":"s")} removed`;
-                        alert.show(message);
-                    });
-                }
-            }
-        });
+var inventory_tabulator = new Tabulator("#diagram_contents_inventory", {
+    placeholder: "No Inventory",
+    selectable: true,
+    selectableRangeMode: "click",
+    index: "id",
+    tooltips: true,
+    height: 600,
+    layout: "fitColumns",
+    groupBy: ["title"],
+    initialSort: [
+        { column: "id" },
+        { column: "name" }
+    ],
+    columns: [{
+        title: "Name",
+        field: "name",
+        headerFilter: true
+    }, {
+        title: "AWS Region",
+        field: "region",
+        headerFilter: true
+    }, {
+        title: "ARN",
+        field: "id",
+        headerFilter: true
+    }]
+});
 
-        $("#diagram_add_downstream").on("click", function(event) {
-            add_downstream_nodes();
-        });
+var diagram_tabulator = new Tabulator("#diagram_contents_diagram", {
+    placeholder: "No Diagram Contents",
+    selectable: true,
+    selectableRangeMode: "click",
+    index: "id",
+    tooltips: true,
+    height: 600,
+    layout: "fitColumns",
+    groupBy: ["title"],
+    initialSort: [
+        { column: "id" },
+        { column: "name" }
+    ],
+    columns: [{
+        title: "Name",
+        field: "name",
+        headerFilter: true
+    }, {
+        title: "AWS Region",
+        field: "region",
+        headerFilter: true
+    }, {
+        title: "ARN",
+        field: "id",
+        headerFilter: true
+    }]
+});
 
-        function add_downstream_nodes() {
-            var shown = diagrams.shown();
-            if (shown) {
-                var selected = shown.network.getSelectedNodes();
-                var connected = [];
-                for (let node_id of selected) {
-                    if (!connected.includes(node_id)) {
-                        connected.push(node_id);
-                        ui_util.get_downstream(model.edges, node_id, connected);
-                    }
-                }
-                // only add nodes not yet on the diagram
-                var add_nodes = _.difference(connected.sort(), shown.nodes.getIds().sort());
-                // use _.compact to remove nulls if id not found
-                var nodes = _.compact(model.nodes.get(add_nodes));
-                var view = shown.network.getViewPosition();
-                shown.nodes.update(nodes);
-                for (let node of nodes) {
-                    shown.network.moveNode(node.id, ui_util.vary(view.x, node.size * vary_multiplier), ui_util.vary(view.y, node.size * vary_multiplier));
-                }
-                var node_ids = _.map(nodes, "id");
-                layout.save_layout(shown, node_ids);
-                shown.network.fit();
+$("#diagram_remove_selected").on("click", function () {
+    var shown = diagrams.shown();
+    if (shown) {
+        var selected = shown.network.getSelectedNodes();
+        if (Array.isArray(selected) && selected.length > 0) {
+            var html = `Remove ${selected.length} node${(selected.length == 1 ? "" : "s")} from the diagram?`;
+            confirmation.show(html, function () {
+                shown.nodes.remove(selected);
+                var message = `${selected.length} node${(selected.length == 1 ? "" : "s")} removed`;
+                alert.show(message);
+            });
+        }
+    }
+});
+
+$("#diagram_add_downstream").on("click", function () {
+    add_downstream_nodes()
+});
+
+function add_downstream_nodes() {
+    var shown = diagrams.shown();
+    if (shown) {
+        var selected = shown.network.getSelectedNodes();
+        var connected = [];
+        for (let node_id of selected) {
+            if (!connected.includes(node_id)) {
+                connected.push(node_id);
+                ui_util.get_downstream(model.edges, node_id, connected);
             }
         }
+        // only add nodes not yet on the diagram
+        var add_nodes = _.difference(connected.sort(), shown.nodes.getIds().sort());
+        // use _.compact to remove nulls if id not found
+        var nodes = _.compact(model.nodes.get(add_nodes));
+        var view = shown.network.getViewPosition();
+        shown.nodes.update(nodes);
+        for (let node of nodes) {
+            shown.network.moveNode(node.id, ui_util.vary(view.x, node.size * vary_multiplier), ui_util.vary(view.y, node.size * vary_multiplier));
+        }
+        var node_ids = _.map(nodes, "id");
+        layout.save_layout(shown, node_ids);
+        shown.network.fit();
+    }
+}
 
-        $("#diagram_add_upstream").on("click", function(event) {
-            add_upstream_nodes();
-        });
+$("#diagram_add_upstream").on("click", function () {
+    add_upstream_nodes();
+});
 
-        function add_upstream_nodes() {
-            var shown = diagrams.shown();
-            if (shown) {
-                var selected = shown.network.getSelectedNodes();
-                var connected = [];
-                for (let node_id of selected) {
-                    if (!connected.includes(node_id)) {
-                        connected.push(node_id);
-                        ui_util.get_upstream(model.edges, node_id, connected);
-                    }
-                }
-                // only add nodes not yet on the diagram
-                var add_nodes = _.difference(connected.sort(), shown.nodes.getIds().sort());
-                // use _.compact to remove nulls if id not found
-                var nodes = _.compact(model.nodes.get(add_nodes));
-                var view = shown.network.getViewPosition();
-                shown.nodes.update(nodes);
-                for (let node of nodes) {
-                    shown.network.moveNode(node.id, ui_util.vary(view.x, node.size * vary_multiplier), ui_util.vary(view.y, node.size * vary_multiplier));
-                }
-                var node_ids = _.map(nodes, "id");
-                layout.save_layout(shown, node_ids);
-                shown.network.fit();
+function add_upstream_nodes() {
+    var shown = diagrams.shown();
+    if (shown) {
+        var selected = shown.network.getSelectedNodes();
+        var connected = [];
+        for (let node_id of selected) {
+            if (!connected.includes(node_id)) {
+                connected.push(node_id);
+                ui_util.get_upstream(model.edges, node_id, connected);
             }
         }
+        // only add nodes not yet on the diagram
+        var add_nodes = _.difference(connected.sort(), shown.nodes.getIds().sort());
+        // use _.compact to remove nulls if id not found
+        var nodes = _.compact(model.nodes.get(add_nodes));
+        var view = shown.network.getViewPosition();
+        shown.nodes.update(nodes);
+        for (let node of nodes) {
+            shown.network.moveNode(node.id, ui_util.vary(view.x, node.size * vary_multiplier), ui_util.vary(view.y, node.size * vary_multiplier));
+        }
+        var node_ids = _.map(nodes, "id");
+        layout.save_layout(shown, node_ids);
+        shown.network.fit();
+    }
+}
 
-        $("#diagram_add_all_nodes").on("click", function(event) {
-            add_downstream_nodes();
-            add_upstream_nodes();
-        });
+$("#diagram_add_all_nodes").on("click", function () {
+    add_downstream_nodes();
+    add_upstream_nodes();
+});
 
-        var set_create_diagram_alert = function(message) {
-            var html = `<div id="create_diagram_dialog_alert" class="alert alert-danger" role="alert">${message}</div>`;
-            $("#create_diagram_dialog_alert").replaceWith(html);
-        };
+var set_create_diagram_alert = function (message) {
+    var html = `<div id="create_diagram_dialog_alert" class="alert alert-danger" role="alert">${message}</div>`;
+    $("#create_diagram_dialog_alert").replaceWith(html);
+};
 
-        var clear_create_diagram_alert = function() {
-            var html = `<div id="create_diagram_dialog_alert"></div>`;
-            $("#create_diagram_dialog_alert").replaceWith(html);
-        };
+var clear_create_diagram_alert = function () {
+    var html = `<div id="create_diagram_dialog_alert"></div>`;
+    $("#create_diagram_dialog_alert").replaceWith(html);
+};
 
-        $("#create_diagram_dialog").on('shown.bs.modal', function() {
-            clear_create_diagram_alert();
-            $("#create_diagram_dialog_name").val("");
-            $("#create_diagram_dialog_name").focus();
-        });
+$("#create_diagram_dialog").on('shown.bs.modal', function () {
+    clear_create_diagram_alert();
+    $("#create_diagram_dialog_name").val("");
+    $("#create_diagram_dialog_name").focus();
+});
 
-        $("#create_diagram_dialog_proceed").on("click", function() {
-            try {
-                // get the name
-                var name = $("#create_diagram_dialog_name").val();
-                // check it
-                var valid_name = new RegExp("^\\w+");
-                if (valid_name.test(name)) {
-                    // create a new diagram
-                    var d = diagrams.add(name, _.snakeCase(name), true);
-                    alert.show("Diagram created");
-                    // hide the dialog
-                    $("#create_diagram_dialog").modal('hide');
-                    // select the new tab
-                    d.show();
-                } else {
-                    set_create_diagram_alert("Names must start with an alphanumeric character");
-                }
-            } catch (error) {
-                console.log(error);
-                set_create_diagram_alert("Names must start with an alphanumeric character");
-            }
-        });
+$("#create_diagram_dialog_proceed").on("click", function () {
+    try {
+        // get the name
+        var name = $("#create_diagram_dialog_name").val();
+        // check it
+        var valid_name = new RegExp("^\\w+");
+        if (valid_name.test(name)) {
+            // create a new diagram
+            var d = diagrams.add(name, _.snakeCase(name), true);
+            alert.show("Diagram created");
+            // hide the dialog
+            $("#create_diagram_dialog").modal('hide');
+            // select the new tab
+            d.show();
+        } else {
+            set_create_diagram_alert("Names must start with an alphanumeric character");
+        }
+    } catch (error) {
+        console.log(error);
+        set_create_diagram_alert("Names must start with an alphanumeric character");
+    }
+});
 
-        var set_dupe_diagram_alert = function(message) {
-            var html = `<div id="dupe_diagram_dialog_alert" class="alert alert-danger" role="alert">${message}</div>`;
-            $("#dupe_diagram_dialog_alert").replaceWith(html);
-        };
+var set_dupe_diagram_alert = function (message) {
+    var html = `<div id="dupe_diagram_dialog_alert" class="alert alert-danger" role="alert">${message}</div>`;
+    $("#dupe_diagram_dialog_alert").replaceWith(html);
+};
 
-        var clear_dupe_diagram_alert = function() {
-            var html = `<div id="dupe_diagram_dialog_alert"></div>`;
-            $("#dupe_diagram_dialog_alert").replaceWith(html);
-        };
+var clear_dupe_diagram_alert = function () {
+    var html = `<div id="dupe_diagram_dialog_alert"></div>`;
+    $("#dupe_diagram_dialog_alert").replaceWith(html);
+};
 
-        $("#dupe_diagram_dialog").on('shown.bs.modal', function() {
-            clear_dupe_diagram_alert();
-            $("#dupe_diagram_dialog_name").val("");
-            $("#dupe_diagram_dialog_name").focus();
-        });
+$("#dupe_diagram_dialog").on('shown.bs.modal', function () {
+    clear_dupe_diagram_alert();
+    $("#dupe_diagram_dialog_name").val("");
+    $("#dupe_diagram_dialog_name").focus();
+});
 
-        $("#dupe_diagram_dialog_proceed").on("click", function() {
-            var current_diagram = diagrams.shown();
-            if (current_diagram) {
-                try {
-                    // get the name
-                    var name = $("#dupe_diagram_dialog_name").val();
-                    // check it
-                    var valid_name = new RegExp("^\\w+");
-                    if (valid_name.test(name)) {
-                        // create a new diagram
-                        var new_diagram = diagrams.add(name, _.snakeCase(name), true);
-                        new_diagram.nodes.update(current_diagram.nodes.get());
-                        var positions = current_diagram.network.getPositions();
-                        for (let key of Object.keys(positions)) {
-                            new_diagram.network.moveNode(key, positions[key].x, positions[key].y);
-                        }
-                        layout.save_layout(new_diagram);
-                        alert.show("Diagram duplicated");
-                        // hide the dialog
-                        $("#dupe_diagram_dialog").modal('hide');
-                        // select the new tab
-                        new_diagram.show();
-                    } else {
-                        set_dupe_diagram_alert("Names must start with an alphanumeric character");
-                    }
-                } catch (error) {
-                    console.log(error);
-                    set_dupe_diagram_alert("Names must start with an alphanumeric character");
+$("#dupe_diagram_dialog_proceed").on("click", function () {
+    var current_diagram = diagrams.shown();
+    if (current_diagram) {
+        try {
+            // get the name
+            var name = $("#dupe_diagram_dialog_name").val();
+            // check it
+            var valid_name = new RegExp("^\\w+");
+            if (valid_name.test(name)) {
+                // create a new diagram
+                var new_diagram = diagrams.add(name, _.snakeCase(name), true);
+                new_diagram.nodes.update(current_diagram.nodes.get());
+                var positions = current_diagram.network.getPositions();
+                for (let key of Object.keys(positions)) {
+                    new_diagram.network.moveNode(key, positions[key].x, positions[key].y);
                 }
+                layout.save_layout(new_diagram);
+                alert.show("Diagram duplicated");
+                // hide the dialog
+                $("#dupe_diagram_dialog").modal('hide');
+                // select the new tab
+                new_diagram.show();
+            } else {
+                set_dupe_diagram_alert("Names must start with an alphanumeric character");
             }
-        });
+        } catch (error) {
+            console.log(error);
+            set_dupe_diagram_alert("Names must start with an alphanumeric character");
+        }
+    }
+});
 
-        $("#add-diagram-button,#diagram_add_diagram").on("click", function() {
-            $("#create_diagram_dialog").modal('show');
-        });
+$("#add-diagram-button,#diagram_add_diagram").on("click", function () {
+    $("#create_diagram_dialog").modal('show');
+});
 
-        $("#duplicate-diagram-button,#diagram_duplicate_diagram").on("click", function() {
-            var diagram = diagrams.shown();
-            if (diagram) {
-                $("#dupe_diagram_dialog").modal('show');
-            }
-        });
+$("#duplicate-diagram-button,#diagram_duplicate_diagram").on("click", function () {
+    var diagram = diagrams.shown();
+    if (diagram) {
+        $("#dupe_diagram_dialog").modal('show');
+    }
+});
 
-        $("#remove-diagram-button,#diagram_remove_diagram").on("click", function() {
-            var diagram = diagrams.shown();
-            if (diagram) {
-                var html = `Permanently remove ${diagram.name} diagram?`;
-                confirmation.show(html, function() {
-                    diagram.nodes.remove(diagram.nodes.getIds());
-                    diagrams.remove(diagram.name);
-                    var message = `${diagram.name} removed`;
-                    alert.show(message);
-                });
-            }
+$("#remove-diagram-button,#diagram_remove_diagram").on("click", function () {
+    var diagram = diagrams.shown();
+    if (diagram) {
+        var html = `Permanently remove ${diagram.name} diagram?`;
+        confirmation.show(html, function () {
+            diagram.nodes.remove(diagram.nodes.getIds());
+            diagrams.remove(diagram.name);
+            var message = `${diagram.name} removed`;
+            alert.show(message);
         });
+    }
+});
 
-        $("#diagram_contents_modal").on('shown.bs.modal', function() {
-            inventory_tabulator.setData(model.nodes.get());
-            var current = diagrams.shown();
-            diagram_tabulator.setData(current.nodes.get());
-        });
+$("#diagram_contents_modal").on('shown.bs.modal', function () {
+    inventory_tabulator.setData(model.nodes.get());
+    var current = diagrams.shown();
+    diagram_tabulator.setData(current.nodes.get());
+});
 
-        $("#manage-diagram-contents-button,#diagram_manage_contents").on("click", function() {
-            if (diagrams.shown()) {
-                $("#diagram_contents_modal").modal('show');
-            }
-        });
+$("#manage-diagram-contents-button,#diagram_manage_contents").on("click", function () {
+    if (diagrams.shown()) {
+        $("#diagram_contents_modal").modal('show');
+    }
+});
 
-        $("#add-selected-to-diagram").on("click", function() {
-            var inv_selected = inventory_tabulator.getSelectedData();
-            diagram_tabulator.updateOrAddData(inv_selected);
-        });
+$("#add-selected-to-diagram").on("click", function () {
+    var inv_selected = inventory_tabulator.getSelectedData();
+    diagram_tabulator.updateOrAddData(inv_selected);
+});
 
-        $("#remove-selected-from-diagram").on("click", function() {
-            var selectedRows = diagram_tabulator.getSelectedRows();
-            for (let row of selectedRows) {
-                row.delete();
-            }
-        });
+$("#remove-selected-from-diagram").on("click", function () {
+    var selectedRows = diagram_tabulator.getSelectedRows();
+    for (let row of selectedRows) {
+        row.delete();
+    }
+});
 
-        $("#add-all-to-diagram").on("click", function() {
-            diagram_tabulator.setData(inventory_tabulator.getData());
-        });
+$("#add-all-to-diagram").on("click", function () {
+    diagram_tabulator.setData(inventory_tabulator.getData());
+});
 
-        $("#remove-all-from-diagram").on("click", function() {
-            diagram_tabulator.setData([]);
-        });
+$("#remove-all-from-diagram").on("click", function () {
+    diagram_tabulator.setData([]);
+});
 
-        $("#diagram_contents_save").on("click", function() {
-            var diagram = diagrams.shown();
-            var tabulator_node_ids = _.map(diagram_tabulator.getData(), "id").sort();
-            var diagram_node_ids = diagram.nodes.getIds().sort();
-            var add_ids = _.difference(tabulator_node_ids, diagram_node_ids);
-            var remove_ids = _.difference(diagram_node_ids, tabulator_node_ids);
-            var nodes = _.compact(model.nodes.get(add_ids));
-            diagram.network.once("afterDrawing", function() {
-                diagram.network.fit();
-            });
-            diagram.nodes.update(nodes);
-            diagram.nodes.remove(remove_ids);
-            // // hide the dialog
-            $("#diagram_contents_modal").modal('hide');
-        });
+$("#diagram_contents_save").on("click", function () {
+    var diagram = diagrams.shown();
+    var tabulator_node_ids = _.map(diagram_tabulator.getData(), "id").sort();
+    var diagram_node_ids = diagram.nodes.getIds().sort();
+    var add_ids = _.difference(tabulator_node_ids, diagram_node_ids);
+    var remove_ids = _.difference(diagram_node_ids, tabulator_node_ids);
+    var nodes = _.compact(model.nodes.get(add_ids));
+    diagram.network.once("afterDrawing", function () {
+        diagram.network.fit();
+    });
+    diagram.nodes.update(nodes);
+    diagram.nodes.remove(remove_ids);
+    // // hide the dialog
+    $("#diagram_contents_modal").modal('hide');
+});
 
-    });
\ No newline at end of file
diff --git a/source/html/js/app/ui/diagram_statemachine_factory.js b/source/html/js/app/ui/diagram_statemachine_factory.js
index 9384f31e..90de37d2 100644
--- a/source/html/js/app/ui/diagram_statemachine_factory.js
+++ b/source/html/js/app/ui/diagram_statemachine_factory.js
@@ -1,235 +1,232 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
-define(["jquery", "lodash", "app/ui/util", "app/ui/vis_options", "app/model", "app/ui/layout", "machina", "app/ui/alert"],
-    function($, _, ui_util, vis_options, model, layout, machina, alert) {
 
-        function create(diagram) {
-            return (function() {
-                var my_diagram = diagram;
-                return new machina.Fsm({
-                    namespace: my_diagram.name,
-                    initialState: "uninitialized",
-                    states: {
-                        uninitialized: {
-                            "*": function() {
-                                this.deferUntilTransition();
-                                this.transition("create-page-container");
+import * as vis_options from "./vis_options.js";
+import * as layout from "./layout.js";
+import * as alert from "./alert.js";
+
+
+export function create(diagram) {
+    return (function () {
+        var my_diagram = diagram;
+        return new machina.Fsm({
+            namespace: my_diagram.name,
+            initialState: "uninitialized",
+            states: {
+                uninitialized: {
+                    "*": function () {
+                        this.deferUntilTransition();
+                        this.transition("create-page-container");
+                    }
+                },
+                "create-page-container": {
+                    _onEnter: function () {
+                        // create the html
+                        var tab =
+                            `<a class="nav-item nav-link" id="${my_diagram.tab_id}" title="Click or Drag to a Diagram or Tile" data-diagram-name="${my_diagram.name}" draggable="true" data-toggle="tab" href="#${my_diagram.diagram_id}" role="tab" aria-controls="${my_diagram.diagram_id}" aria-selected="false">${my_diagram.name}<i id="${my_diagram.tab_icon_id}" class="material-icons pl-1 small">image_aspect_ratio</i></a>`;
+                        var diagram_div = `<div id="${my_diagram.diagram_id}" class="tab-pane fade" role="tabpanel" aria-labelledby="${my_diagram.tab_id}" style="height: inherit; width: inherit;"></div>`;
+                        // add to containers
+                        // skip Tiles tab
+                        var existing_tabs = $("#" + my_diagram.tab_container_id + " a[data-diagram-name]");
+                        var added = false;
+                        for (let item of existing_tabs) {
+                            // console.log(index, item);
+                            if ($(item).attr("data-diagram-name") > my_diagram.name) {
+                                var id = $(item).attr("id");
+                                $("#" + id).before(tab);
+                                added = true;
+                                break;
                             }
-                        },
-                        "create-page-container": {
-                            _onEnter: function() {
-                                // create the html
-                                var tab =
-                                    `<a class="nav-item nav-link" id="${my_diagram.tab_id}" title="Click or Drag to a Diagram or Tile" data-diagram-name="${my_diagram.name}" draggable="true" data-toggle="tab" href="#${my_diagram.diagram_id}" role="tab" aria-controls="${my_diagram.diagram_id}" aria-selected="false">${my_diagram.name}<i id="${my_diagram.tab_icon_id}" class="material-icons pl-1 small">image_aspect_ratio</i></a>`;
-                                var diagram_div = `<div id="${my_diagram.diagram_id}" class="tab-pane fade" role="tabpanel" aria-labelledby="${my_diagram.tab_id}" style="height: inherit; width: inherit;"></div>`;
-                                // add to containers
-                                // skip Tiles tab
-                                var existing_tabs = $("#" + my_diagram.tab_container_id + " a[data-diagram-name]");
-                                var added = false;
-                                for (let item of existing_tabs) {
-                                    // console.log(index, item);
-                                    if ($(item).attr("data-diagram-name") > my_diagram.name) {
-                                        var id = $(item).attr("id");
-                                        $("#" + id).before(tab);
-                                        added = true;
-                                        break;
-                                    }
+                        }
+                        if (!added) {
+                            $("#" + my_diagram.tab_container_id).append(tab);
+                        }
+                        // $("#add-diagram-button").before(tab);
+                        my_diagram.diagram_container.append(diagram_div);
+                        my_diagram.container = $("#" + my_diagram.diagram_id);
+                        this.transition("create-diagram");
+                    }
+                },
+                "create-diagram": {
+                    _onEnter: function () {
+                        // configure the vis.js network
+                        my_diagram.nodes = new vis.DataSet({
+                            queue: false
+                        });
+                        my_diagram.edges = new vis.DataSet({
+                            queue: false
+                        });
+                        my_diagram.network = new vis.Network($("#" + my_diagram.diagram_id)[0], {
+                            "nodes": my_diagram.nodes,
+                            "edges": my_diagram.edges
+                        }, vis_options.with_layout);
+                        my_diagram.drag_container = $("#" + my_diagram.diagram_id);
+                        this.transition("connect-event-handlers");
+                    }
+                },
+                "connect-event-handlers": {
+                    _onEnter: function () {
+                        my_diagram.nodes.on("*", (function () {
+                            return function (event, properties, senderId) {
+                                // take a copy of the one-shots in case more get added during event handling
+                                var one_time = Array.from(my_diagram.node_dataset_callbacks_once);
+                                my_diagram.node_dataset_callbacks_once = [];
+                                for (let callback of one_time) {
+                                    callback(event, properties, senderId);
                                 }
-                                if (!added) {
-                                    $("#" + my_diagram.tab_container_id).append(tab);
+                                for (let callback of my_diagram.node_dataset_callbacks) {
+                                    callback(event, properties, senderId);
                                 }
-                                // $("#add-diagram-button").before(tab);
-                                my_diagram.diagram_container.append(diagram_div);
-                                my_diagram.container = $("#" + my_diagram.diagram_id);
-                                this.transition("create-diagram");
-                            }
-                        },
-                        "create-diagram": {
-                            _onEnter: function() {
-                                // configure the vis.js network
-                                my_diagram.nodes = new vis.DataSet({
-                                    queue: false
-                                });
-                                my_diagram.edges = new vis.DataSet({
-                                    queue: false
-                                });
-                                my_diagram.network = new vis.Network($("#" + my_diagram.diagram_id)[0], {
-                                    "nodes": my_diagram.nodes,
-                                    "edges": my_diagram.edges
-                                }, vis_options.with_layout);
-                                my_diagram.drag_container = $("#" + my_diagram.diagram_id);
-                                this.transition("connect-event-handlers");
+                            };
+                        })());
+                        my_diagram.network.on("click", (function () {
+                            return function (event) {
+                                // console.log(my_diagram.name + " diagram click");
+                                if (event.nodes.length > 0) {
+                                    alert.show(event.nodes.length + " selected");
+                                }
+                                // take a copy of the one-shots in case more get added during event handling
+                                var one_time = Array.from(my_diagram.click_callbacks_once);
+                                my_diagram.click_callbacks_once = [];
+                                for (let callback of one_time) {
+                                    callback(my_diagram, event);
+                                }
+                                for (let callback of my_diagram.click_callbacks) {
+                                    callback(my_diagram, event);
+                                }
+                            };
+                        })());
+                        my_diagram.network.on("doubleClick", (function () {
+                            return function (event) {
+                                console.log(my_diagram.name + " diagram doubleClick");
+                                // take a copy of the one-shots in case more get added during event handling
+                                var one_time = Array.from(my_diagram.doubleclick_callbacks_once);
+                                my_diagram.doubleclick_callbacks_once = [];
+                                for (let callback of one_time) {
+                                    callback(my_diagram, event);
+                                }
+                                for (let callback of my_diagram.doubleclick_callbacks) {
+                                    callback(my_diagram, event);
+                                }
+                                // zoom
+                                if (event.nodes.length > 0) {
+                                    my_diagram.fit_to_nodes([event.nodes]);
+                                } else if (event.nodes.length == 0 && event.edges.length == 0) {
+                                    var click_x = event.pointer.canvas.x;
+                                    var click_y = event.pointer.canvas.y;
+                                    my_diagram.fit_to_nearest(click_x, click_y);
+                                }
+                            };
+                        })());
+                        my_diagram.network.on("dragEnd", function (event) {
+                            if (event.nodes.length) {
+                                layout.save_layout(my_diagram, event.nodes);
                             }
-                        },
-                        "connect-event-handlers": {
-                            _onEnter: function() {
-                                my_diagram.nodes.on("*", (function() {
-                                    return function(event, properties, senderId) {
-                                        // take a copy of the one-shots in case more get added during event handling
-                                        var one_time = Array.from(my_diagram.node_dataset_callbacks_once);
-                                        my_diagram.node_dataset_callbacks_once = [];
-                                        for (let callback of one_time) {
-                                            callback(event, properties, senderId);
-                                        }
-                                        for (let callback of my_diagram.node_dataset_callbacks) {
-                                            callback(event, properties, senderId);
-                                        }
-                                    };
-                                })());
-                                my_diagram.network.on("click", (function() {
-                                    return function(event) {
-                                        // console.log(my_diagram.name + " diagram click");
-                                        if (event.nodes.length > 0) {
-                                            alert.show(event.nodes.length + " selected");
-                                        }
-                                        // take a copy of the one-shots in case more get added during event handling
-                                        var one_time = Array.from(my_diagram.click_callbacks_once);
-                                        my_diagram.click_callbacks_once = [];
-                                        for (let callback of one_time) {
-                                            callback(my_diagram, event);
-                                        }
-                                        for (let callback of my_diagram.click_callbacks) {
-                                            callback(my_diagram, event);
-                                        }
-                                    };
-                                })());
-                                my_diagram.network.on("doubleClick", (function() {
-                                    return function(event) {
-                                        console.log(my_diagram.name + " diagram doubleClick");
-                                        // take a copy of the one-shots in case more get added during event handling
-                                        var one_time = Array.from(my_diagram.doubleclick_callbacks_once);
-                                        my_diagram.doubleclick_callbacks_once = [];
-                                        for (let callback of one_time) {
-                                            callback(my_diagram, event);
-                                        }
-                                        for (let callback of my_diagram.doubleclick_callbacks) {
-                                            callback(my_diagram, event);
-                                        }
-                                        // zoom
-                                        if (event.nodes.length > 0) {
-                                            my_diagram.fit_to_nodes([event.nodes]);
-                                        } else if (event.nodes.length == 0 && event.edges.length == 0) {
-                                            var click_x = event.pointer.canvas.x;
-                                            var click_y = event.pointer.canvas.y;
-                                            my_diagram.fit_to_nearest(click_x, click_y);
-                                        }
-                                    };
-                                })());
-                                my_diagram.network.on("dragEnd", function(event) {
-                                    if (event.nodes.length) {
-                                        layout.save_layout(my_diagram, event.nodes);
-                                    }
-                                });
+                        });
 
-                                $("#" + my_diagram.tab_id).on("show.bs.tab", (function() {
-                                    return function(event) {
-                                        console.log(my_diagram.name + " diagram show.bs.tab");
-                                    };
-                                })());
-                                my_diagram.drag_container.on("mousemove", function(e) {
-                                    // console.log("mousemove");
-                                    if (my_diagram.drag) {
-                                        my_diagram.restore_drawing_surface();
-                                        my_diagram.drag_rect.w = (e.pageX - this.offsetLeft) - my_diagram.drag_rect.startX;
-                                        my_diagram.drag_rect.h = (e.pageY - this.offsetTop) - my_diagram.drag_rect.startY;
-                                        my_diagram.drag_ctx.setLineDash([5]);
-                                        my_diagram.drag_ctx.strokeStyle = "rgb(0, 102, 0)";
-                                        my_diagram.drag_ctx.strokeRect(my_diagram.drag_rect.startX, my_diagram.drag_rect.startY, my_diagram.drag_rect.w, my_diagram.drag_rect.h);
-                                        my_diagram.drag_ctx.setLineDash([]);
-                                        my_diagram.drag_ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
-                                        my_diagram.drag_ctx.fillRect(my_diagram.drag_rect.startX, my_diagram.drag_rect.startY, my_diagram.drag_rect.w, my_diagram.drag_rect.h);
-                                    }
-                                    if (e.pageX < 100) {
-                                        $("#inventory-drawer-div").animate({
-                                            width: "25%",
-                                        }, 500, function() {
-                                            // Animation complete.
-                                        });
-                                    }
-                                });
-                                my_diagram.drag_container.on("mousedown", function(e) {
-                                    if (e.button == 2) {
-                                        my_diagram.save_drawing_surface();
-                                        my_diagram.drag_rect.startX = e.pageX - this.offsetLeft;
-                                        my_diagram.drag_rect.startY = e.pageY - this.offsetTop;
-                                        my_diagram.drag = true;
-                                        my_diagram.drag_container[0].style.cursor = "crosshair";
-                                    }
-                                });
-                                my_diagram.drag_container.on("mouseup", function(e) {
-                                    // console.log("mouseup");
-                                    if (e.button == 2) {
-                                        my_diagram.restore_drawing_surface();
-                                        my_diagram.drag = false;
-                                        my_diagram.drag_container[0].style.cursor = "default";
-                                        my_diagram.select_nodes_from_highlight();
-                                    }
-                                });
-                                this.transition("restore-nodes");
+                        $("#" + my_diagram.tab_id).on("show.bs.tab", (function () {
+                            return function () {
+                                console.log(my_diagram.name + " diagram show.bs.tab");
+                            };
+                        })());
+                        my_diagram.drag_container.on("mousemove", function (e) {
+                            // console.log("mousemove");
+                            if (my_diagram.drag) {
+                                my_diagram.restore_drawing_surface();
+                                my_diagram.drag_rect.w = (e.pageX - this.offsetLeft) - my_diagram.drag_rect.startX;
+                                my_diagram.drag_rect.h = (e.pageY - this.offsetTop) - my_diagram.drag_rect.startY;
+                                my_diagram.drag_ctx.setLineDash([5]);
+                                my_diagram.drag_ctx.strokeStyle = "rgb(0, 102, 0)";
+                                my_diagram.drag_ctx.strokeRect(my_diagram.drag_rect.startX, my_diagram.drag_rect.startY, my_diagram.drag_rect.w, my_diagram.drag_rect.h);
+                                my_diagram.drag_ctx.setLineDash([]);
+                                my_diagram.drag_ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
+                                my_diagram.drag_ctx.fillRect(my_diagram.drag_rect.startX, my_diagram.drag_rect.startY, my_diagram.drag_rect.w, my_diagram.drag_rect.h);
                             }
-                        },
-                        "restore-nodes": {
-                            _onEnter: function() {
-                                my_diagram.restore_nodes().then(function(layout_items) {
-                                    // stop layout of node dump
-                                    my_diagram.network.setOptions(vis_options.without_layout);
-                                    // next state
-                                    my_diagram.statemachine.handle("restore-layout", layout_items);
+                            if (e.pageX < 100) {
+                                $("#inventory-drawer-div").animate({
+                                    width: "25%",
+                                }, 500, function () {
+                                    // Animation complete.
                                 });
-                            },
-                            "restore-layout": "restore-layout"
-                        },
-                        "restore-layout": {
-                            _onEnter: function(layout_items) {
-                                // restore the node layout
-                                my_diagram.restore_layout(layout_items).then(function() {
-                                    my_diagram.statemachine.transition("restore-edges");
-                                });
-                            }
-                        },
-                        "restore-edges": {
-                            _onEnter: function() {
-                                // restore the connections
-                                my_diagram.restore_edges();
-                                my_diagram.statemachine.transition("scale-first-view");
                             }
-                        },
-                        "scale-first-view": {
-                            _onEnter: function() {
-                                // hold off fitting until the last possible chance
-                                my_diagram.network.once("afterDrawing", (function() {
-                                    return function() {
-                                        // drag-select
-                                        my_diagram.drag_canvas = my_diagram.network.canvas.frame.canvas;
-                                        my_diagram.drag_ctx = my_diagram.drag_canvas.getContext('2d');
-                                        if (my_diagram.first_fit == false) {
-                                            my_diagram.first_fit = true;
-                                            my_diagram.network.fit();
-                                            my_diagram.statemachine.transition("ready-to-view");
-                                        }
-                                    };
-                                })());
+                        });
+                        my_diagram.drag_container.on("mousedown", function (e) {
+                            if (e.button == 2) {
+                                my_diagram.save_drawing_surface();
+                                my_diagram.drag_rect.startX = e.pageX - this.offsetLeft;
+                                my_diagram.drag_rect.startY = e.pageY - this.offsetTop;
+                                my_diagram.drag = true;
+                                my_diagram.drag_container[0].style.cursor = "crosshair";
                             }
-                        },
-                        "ready-to-view": {
-                            _onEnter: function() {
-                                my_diagram.add_node_dataset_callback(function(event, properties) {
-                                    // update edges when a node is added or removed
-                                    my_diagram.synchronize_edges(event, properties.items);
-                                    my_diagram.synchronize_content(event, properties.items);
-                                });
+                        });
+                        my_diagram.drag_container.on("mouseup", function (e) {
+                            // console.log("mouseup");
+                            if (e.button == 2) {
+                                my_diagram.restore_drawing_surface();
+                                my_diagram.drag = false;
+                                my_diagram.drag_container[0].style.cursor = "default";
+                                my_diagram.select_nodes_from_highlight();
                             }
-                        }
+                        });
+                        this.transition("restore-nodes");
+                    }
+                },
+                "restore-nodes": {
+                    _onEnter: function () {
+                        my_diagram.restore_nodes().then(function (layout_items) {
+                            // stop layout of node dump
+                            my_diagram.network.setOptions(vis_options.without_layout);
+                            // next state
+                            my_diagram.statemachine.handle("restore-layout", layout_items);
+                        });
                     },
-                    start: function() {
-                        this.handle("start");
+                    "restore-layout": "restore-layout"
+                },
+                "restore-layout": {
+                    _onEnter: function (layout_items) {
+                        // restore the node layout
+                        my_diagram.restore_layout(layout_items).then(function () {
+                            my_diagram.statemachine.transition("restore-edges");
+                        });
                     }
-                });
-            })();
-        }
-
-        return {
-            "create": create
-        };
-
-    });
\ No newline at end of file
+                },
+                "restore-edges": {
+                    _onEnter: function () {
+                        // restore the connections
+                        my_diagram.restore_edges();
+                        my_diagram.statemachine.transition("scale-first-view");
+                    }
+                },
+                "scale-first-view": {
+                    _onEnter: function () {
+                        // hold off fitting until the last possible chance
+                        my_diagram.network.once("afterDrawing", (function () {
+                            return function () {
+                                // drag-select
+                                my_diagram.drag_canvas = my_diagram.network.canvas.frame.canvas;
+                                my_diagram.drag_ctx = my_diagram.drag_canvas.getContext('2d');
+                                if (my_diagram.first_fit == false) {
+                                    my_diagram.first_fit = true;
+                                    my_diagram.network.fit();
+                                    my_diagram.statemachine.transition("ready-to-view");
+                                }
+                            };
+                        })());
+                    }
+                },
+                "ready-to-view": {
+                    _onEnter: function () {
+                        my_diagram.add_node_dataset_callback(function (event, properties) {
+                            // update edges when a node is added or removed
+                            my_diagram.synchronize_edges(event, properties.items);
+                            my_diagram.synchronize_content(event, properties.items);
+                        });
+                    }
+                }
+            },
+            start: function () {
+                this.handle("start");
+            }
+        });
+    })();
+}
diff --git a/source/html/js/app/ui/diagrams.js b/source/html/js/app/ui/diagrams.js
index 68cf4c7c..462fdb48 100644
--- a/source/html/js/app/ui/diagrams.js
+++ b/source/html/js/app/ui/diagrams.js
@@ -1,239 +1,241 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
-define(["jquery", "lodash", "app/settings", "app/ui/diagram_factory", "app/ui/alert"],
-    function ($, _, settings, diagram_factory, nav_alert) {
 
-        var diagrams = {};
 
-        var selection_callbacks = [];
+import * as settings from "../settings.js";
+import * as diagram_factory from "./diagram_factory.js";
+import * as nav_alert from "./alert.js";
 
-        var shown_diagram = function () {
-            var shown = null;
-            for (let d of Object.values(diagrams)) {
-                if (d.shown()) {
-                    shown = d;
-                    break;
-                }
-            }
-            return shown;
-        };
-
-        var get_all = function () {
-            return diagrams;
-        };
-
-        var add_selection_callback = function (callback) {
-            if (!selection_callbacks.includes(callback)) {
-                selection_callbacks.push(callback);
-            }
-        };
-
-        var add_diagram = function (name, view_id, save) {
-            var diagram = diagram_factory.create(name, view_id);
-            diagrams[name] = diagram;
-            if (save) {
-                save_diagrams();
-            }
-            diagram.add_singleclick_callback(function (diagram, event) {
-                for (let callback of selection_callbacks) {
-                    try {
-                        callback(diagram, event);
-                    } catch (error) {
-                        console.log(error);
-                    }
-                }
-            });
-            return diagram;
-        };
+var diagrams = {};
 
-        var remove_diagram = function (name) {
-            const view_id = diagrams[name].view_id;
-            // remove page elements
-            diagrams[name].remove();
-            // remove object
-            delete diagrams[name];
-            // update settings
-            save_diagrams();
-            // remove the lock settings
-            const key = `diagram_lock_${view_id}`;
-            settings.remove(key);
-            // select the tile tab
-            $("#channel-tiles-tab").tab('show');
-        };
-
-        var get_by_name = function (name) {
-            return diagrams[name];
-        };
+var selection_callbacks = [];
 
-        var save_diagrams = function () {
-            // var settings = _.map(Object.values(diagrams), ["name", "view_id"]);
-            var diagram_map = _.map(Object.values(diagrams), function (item) {
-                return {
-                    "name": item.name,
-                    "view_id": item.view_id
-                };
-            });
-            // console.log(settings);
-            settings.put("diagrams", diagram_map).then(function () {
-                console.log("diagrams saved");
-            }).catch(function (error) {
+var shown_diagram = function () {
+    var shown = null;
+    for (let d of Object.values(diagrams)) {
+        if (d.shown()) {
+            shown = d;
+            break;
+        }
+    }
+    return shown;
+};
+
+var get_all = function () {
+    return diagrams;
+};
+
+var add_selection_callback = function (callback) {
+    if (!selection_callbacks.includes(callback)) {
+        selection_callbacks.push(callback);
+    }
+};
+
+var add_diagram = function (name, view_id, save) {
+    var diagram = diagram_factory.create(name, view_id);
+    diagrams[name] = diagram;
+    if (save) {
+        save_diagrams();
+    }
+    diagram.add_singleclick_callback(function (diagram, event) {
+        for (let callback of selection_callbacks) {
+            try {
+                callback(diagram, event);
+            } catch (error) {
                 console.log(error);
-            });
-        };
-
-        var load_diagrams = function () {
-            return new Promise((resolve, reject) => {
-                // load diagram names from the cloud on initialization
-                settings.get("diagrams").then(function (diagrams) {
-                    console.log("load user-defined diagrams: " + JSON.stringify(diagrams));
-                    if (Array.isArray(diagrams) && diagrams.length > 0) {
-                        for (let diagram of diagrams) {
-                            add_diagram(diagram.name, diagram.view_id, false);
-                        }
-                    } else {
-                        // no diagrams, create default View from previous Global View
-                        console.log("no used-defined diagrams, creating default diagram");
-                        add_diagram("Default", "global", true);
-                    }
-                    resolve();
-                });
-            });
-        };
-
-        function have_all(node_ids) {
-            var results = [];
-            if (!Array.isArray(node_ids)) {
-                node_ids = [node_ids];
-            }
-            for (let name in diagrams) {
-                var diagram = diagrams[name];
-                var found = _.compact(diagram.nodes.get(node_ids));
-                if (found.length === node_ids.length) {
-                    results.push(diagram);
-                }
             }
-            return _.orderBy(results, ["name"]);
         }
-
-        function have_any(node_ids) {
-            var results = [];
-            node_ids = node_ids || [];
-            if (!Array.isArray(node_ids)) {
-                node_ids = [node_ids];
-            }
-            node_ids = node_ids.sort();
-            for (let diagram of Object.values(diagrams)) {
-                var intersect = _.intersection(diagram.nodes.getIds().sort(), node_ids);
-                if (intersect.length > 0) {
-                    results.push({
-                        diagram: diagram.name,
-                        found: intersect
-                    });
+    });
+    return diagram;
+};
+
+var remove_diagram = function (name) {
+    const view_id = diagrams[name].view_id;
+    // remove page elements
+    diagrams[name].remove();
+    // remove object
+    delete diagrams[name];
+    // update settings
+    save_diagrams();
+    // remove the lock settings
+    const key = `diagram_lock_${view_id}`;
+    settings.remove(key);
+    // select the tile tab
+    $("#channel-tiles-tab").tab('show');
+};
+
+var get_by_name = function (name) {
+    return diagrams[name];
+};
+
+var save_diagrams = function () {
+    // var settings = _.map(Object.values(diagrams), ["name", "view_id"]);
+    var diagram_map = _.map(Object.values(diagrams), function (item) {
+        return {
+            "name": item.name,
+            "view_id": item.view_id
+        };
+    });
+    // console.log(settings);
+    settings.put("diagrams", diagram_map).then(function () {
+        console.log("diagrams saved");
+    }).catch(function (error) {
+        console.error(error);
+    });
+};
+
+var load_diagrams = function () {
+    return new Promise((resolve) => {
+        // load diagram names from the cloud on initialization
+        settings.get("diagrams").then(function (diagrams) {
+            console.log("load user-defined diagrams: " + JSON.stringify(diagrams));
+            if (Array.isArray(diagrams) && diagrams.length > 0) {
+                for (let diagram of diagrams) {
+                    add_diagram(diagram.name, diagram.view_id, false);
                 }
+            } else {
+                // no diagrams, create default View from previous Global View
+                console.log("no used-defined diagrams, creating default diagram");
+                add_diagram("Default", "global", true);
             }
-            return _.orderBy(results, ["diagram"]);
+            resolve();
+        });
+    });
+};
+
+function have_all(node_ids) {
+    var results = [];
+    if (!Array.isArray(node_ids)) {
+        node_ids = [node_ids];
+    }
+    for (let name in diagrams) {
+        var diagram = diagrams[name];
+        var found = _.compact(diagram.nodes.get(node_ids));
+        if (found.length === node_ids.length) {
+            results.push(diagram);
         }
-
-        const update_lock_visibility = () => {
-            // are we showing a diagram or tiles?
-            if (shown_diagram()) {
-                // show the lock
-                $("#diagram-lock-button").removeClass("d-none");
-            }
-            else {
-                // hide the lock
-                $("#diagram-lock-button").addClass("d-none");
-            }
-        };
-
-        const update_lock_state = () => {
-            const menu_ids = ["diagram_manage_contents", "diagram_add_downstream",
-                "diagram_add_upstream", "diagram_add_all_nodes", "nodes_align_vertical", "nodes_align_horizontal", "nodes_layout_vertical",
-                "nodes_layout_horizontal", "nodes_layout_isolated", "diagram_remove_selected", "diagram_remove_diagram"];
-            // only update if we're showing a diagram
-            let diagram = shown_diagram();
-            if (diagram) {
-                // get the lock state from settings
-                diagram.isLocked().then((locked) => {
-                    console.log(`diagram ${diagram.name} is ${locked ? "locked" : "unlocked"}`);
-                    // update the lock icon
-                    const html = locked ? 'lock' : 'lock_open';
-                    $("#diagram-lock-icon").html(html);
-                    // change the state of the vis.js network to match the lock
-                    const options = {
-                        interaction: {
-                            dragNodes: !locked
-                        }
-                    };
-                    diagram.network.setOptions(options);
-                    // update menu items for diagrams
-                    for (let id of menu_ids) {
-                        if (locked) {
-                            $(`#${id}`).addClass("disabled");
-                        }
-                        else {
-                            $(`#${id}`).removeClass("disabled");
-                        }
-                    }
-                });
-            }
-        };
-
-        const create_lock_compartment = () => {
-            // do this relative to the diagram div
-            const diagramDiv = $("#diagram");
-            // get the location and size of the diagram div
-            const diagramPosition = diagramDiv.position();
-            const width = diagramDiv.width();
-            // console.log(`POSITION: ${JSON.stringify(position)}`);
-            // console.log(`WIDTH: ${width}`);
-            // create
-            const h_offset = 30;
-            const v_offset = 2;
-            const style = `position: absolute; top: ${diagramPosition.top + v_offset}px; left: ${width - h_offset}px; z-index: 500; cursor: pointer;`;
-            const buttonDiv = `<div id="diagram-lock-button" style="${style}"><span title="Lock/Unlock Changes" id="diagram-lock-icon" class="material-icons">lock_open</span></div>`;
-            // console.log(buttonDiv);
-            diagramDiv.before(buttonDiv);
-            $("#diagram-lock-button").click(() => {
-                const diagram = shown_diagram();
-                diagram.isLocked().then((locked) => {
-                    // reverse it
-                    locked = !locked;
-                    diagram.lock(locked).then(() => {
-                        update_lock_state();
-                        const message = locked ? "Diagram locked" : "Diagram unlocked";
-                        nav_alert.show(message);
-                    });
-                });
+    }
+    return _.orderBy(results, ["name"]);
+}
+
+function have_any(node_ids) {
+    var results = [];
+    node_ids = node_ids || [];
+    if (!Array.isArray(node_ids)) {
+        node_ids = [node_ids];
+    }
+    node_ids = node_ids.sort();
+    for (let diagram of Object.values(diagrams)) {
+        var intersect = _.intersection(diagram.nodes.getIds().sort(), node_ids);
+        if (intersect.length > 0) {
+            results.push({
+                diagram: diagram.name,
+                found: intersect
             });
-            update_lock_visibility();
-        };
-
-        // this is the initialization code for the diagrams component
-        load_diagrams().then(() => {
-            create_lock_compartment();
-            $("#diagram-tab").on('shown.bs.tab', () => {
-                update_lock_visibility();
+        }
+    }
+    return _.orderBy(results, ["diagram"]);
+}
+
+const update_lock_visibility = () => {
+    // are we showing a diagram or tiles?
+    if (shown_diagram()) {
+        // show the lock
+        $("#diagram-lock-button").removeClass("d-none");
+    }
+    else {
+        // hide the lock
+        $("#diagram-lock-button").addClass("d-none");
+    }
+};
+
+const update_lock_state = () => {
+    const menu_ids = ["diagram_manage_contents", "diagram_add_downstream",
+        "diagram_add_upstream", "diagram_add_all_nodes", "nodes_align_vertical", "nodes_align_horizontal", "nodes_layout_vertical",
+        "nodes_layout_horizontal", "nodes_layout_isolated", "diagram_remove_selected", "diagram_remove_diagram"];
+    // only update if we're showing a diagram
+    let diagram = shown_diagram();
+    if (diagram) {
+        // get the lock state from settings
+        diagram.isLocked().then((locked) => {
+            console.log(`diagram ${diagram.name} is ${locked ? "locked" : "unlocked"}`);
+            // update the lock icon
+            const html = locked ? 'lock' : 'lock_open';
+            $("#diagram-lock-icon").html(html);
+            // change the state of the vis.js network to match the lock
+            const options = {
+                interaction: {
+                    dragNodes: !locked
+                }
+            };
+            diagram.network.setOptions(options);
+            // update menu items for diagrams
+            for (let id of menu_ids) {
+                if (locked) {
+                    $(`#${id}`).addClass("disabled");
+                }
+                else {
+                    $(`#${id}`).removeClass("disabled");
+                }
+            }
+        });
+    }
+};
+
+const create_lock_compartment = () => {
+    // do this relative to the diagram div
+    const diagramDiv = $("#diagram");
+    // get the location and size of the diagram div
+    const diagramPosition = diagramDiv.position();
+    const width = diagramDiv.width();
+    // console.log(`POSITION: ${JSON.stringify(position)}`);
+    // console.log(`WIDTH: ${width}`);
+    // create
+    const h_offset = 30;
+    const v_offset = 2;
+    const style = `position: absolute; top: ${diagramPosition.top + v_offset}px; left: ${width - h_offset}px; z-index: 500; cursor: pointer;`;
+    const buttonDiv = `<div id="diagram-lock-button" style="${style}"><span title="Lock/Unlock Changes" id="diagram-lock-icon" class="material-icons">lock_open</span></div>`;
+    // console.log(buttonDiv);
+    diagramDiv.before(buttonDiv);
+    $("#diagram-lock-button").click(() => {
+        const diagram = shown_diagram();
+        diagram.isLocked().then((locked) => {
+            // reverse it
+            locked = !locked;
+            diagram.lock(locked).then(() => {
                 update_lock_state();
+                const message = locked ? "Diagram locked" : "Diagram unlocked";
+                nav_alert.show(message);
             });
-            var current_url = new URL(window.location);
-            var override_diagram = current_url.searchParams.get("diagram");
-            if (override_diagram) {
-                console.log("Show diagram " + override_diagram + " on start");
-                var diagram = get_by_name(override_diagram);
-                diagram.show();
-            }
         });
+    });
+    update_lock_visibility();
+};
+
+// this is the initialization code for the diagrams component
+load_diagrams().then(() => {
+    create_lock_compartment();
+    $("#diagram-tab").on('shown.bs.tab', () => {
+        update_lock_visibility();
+        update_lock_state();
+    });
+    var current_url = new URL(window.location);
+    var override_diagram = current_url.searchParams.get("diagram");
+    if (override_diagram) {
+        console.log("Show diagram " + override_diagram + " on start");
+        var diagram = get_by_name(override_diagram);
+        diagram.show();
+    }
+});
+
+export {
+    shown_diagram as shown,
+    get_all,
+    add_diagram as add,
+    remove_diagram as remove,
+    get_by_name,
+    have_all,
+    have_any,
+    add_selection_callback
+};
 
-        return {
-            shown: shown_diagram,
-            get_all: get_all,
-            add: add_diagram,
-            remove: remove_diagram,
-            get_by_name: get_by_name,
-            have_all: have_all,
-            have_any: have_any,
-            add_selection_callback: add_selection_callback
-        };
-
-    });
\ No newline at end of file
diff --git a/source/html/js/app/ui/dragdrop.js b/source/html/js/app/ui/dragdrop.js
index 3030d9b7..5a62b273 100644
--- a/source/html/js/app/ui/dragdrop.js
+++ b/source/html/js/app/ui/dragdrop.js
@@ -1,262 +1,268 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/channels", "app/ui/layout", "app/ui/diagrams", "app/ui/tile_view", "app/ui/confirmation", "app/ui/alert", "app/ui/channels_menu"],
-    function ($, _, model, channels, layout, diagrams, tile_view, confirmation, alert, channels_menu) {
+import * as model from "../model.js";
+import * as channels from "../channels.js";
+import * as layout from "./layout.js";
+import * as diagrams from "./diagrams.js";
+import * as tile_view from "./tile_view.js";
+import * as confirmation from "./confirmation.js";
+import * as alert from "./alert.js";
+import * as channels_menu from "./channels_menu.js";
 
-        var drag_id;
-        var drag_type;
+var drag_id;
+var drag_type;
 
-        function drop_node_to_diagram(event) {
-            var diagram = diagrams.shown();
-            var node;
-            var canvas;
-            if (diagram) {
-                console.log("add node " + drag_id + " to diagram " + diagram.name);
-                node = model.nodes.get(drag_id);
-                if (node) {
-                    /*ignore jslint start*/
-                    canvas = diagram.network.DOMtoCanvas({
-                        x: event.clientX,
-                        y: event.clientY
-                    });
-                    /*ignore jslint end*/
-                    diagram.nodes.update(node);
-                    diagram.network.moveNode(node.id, canvas.x, canvas.y);
-                }
-            }
+function drop_node_to_diagram(event) {
+    var diagram = diagrams.shown();
+    var node;
+    var canvas;
+    if (diagram) {
+        console.log("add node " + drag_id + " to diagram " + diagram.name);
+        node = model.nodes.get(drag_id);
+        if (node) {
+            /*ignore jslint start*/
+            canvas = diagram.network.DOMtoCanvas({
+                x: event.clientX,
+                y: event.clientY
+            });
+            /*ignore jslint end*/
+            diagram.nodes.update(node);
+            diagram.network.moveNode(node.id, canvas.x, canvas.y);
         }
+    }
+}
 
-        function drop_node_to_tile(tile) {
-            // get node
-            var node = model.nodes.get(drag_id);
-            var name = tile.attr("data-channel-name");
-            var html;
-            if (node) {
-                html = `Add ${node.header} to tile ${name}?`;
-                confirmation.show(html, function () {
-                    // confirm add node to tile
-                    channels.update_channel(name, [node.id]).then(function () {
-                        alert.show("Added to tile");
-                        tile_view.redraw_tiles();
-                    });
-                });
-            }
-        }
+function drop_node_to_tile(tile) {
+    // get node
+    var node = model.nodes.get(drag_id);
+    var name = tile.attr("data-channel-name");
+    var html;
+    if (node) {
+        html = `Add ${node.header} to tile ${name}?`;
+        confirmation.show(html, function () {
+            // confirm add node to tile
+            channels.update_channel(name, [node.id]).then(function () {
+                alert.show("Added to tile");
+                tile_view.redraw_tiles();
+            });
+        });
+    }
+}
 
-        function drop_diagram_to_diagram() {
-            var source_diagram = diagrams.get_by_name(drag_id);
-            var target_diagram = diagrams.shown();
-            var nodes;
-            var node_ids;
-            if (source_diagram && target_diagram) {
-                console.log("add diagram contents from " + source_diagram.name + " to diagram " + target_diagram.name);
-                nodes = source_diagram.nodes.get();
-                target_diagram.nodes.update(nodes);
-                node_ids = _.map(Array.from(nodes), "id");
-                layout.save_layout(target_diagram, node_ids);
-                target_diagram.network.fit();
-            }
+function drop_diagram_to_diagram() {
+    var source_diagram = diagrams.get_by_name(drag_id);
+    var target_diagram = diagrams.shown();
+    var nodes;
+    var node_ids;
+    if (source_diagram && target_diagram) {
+        console.log("add diagram contents from " + source_diagram.name + " to diagram " + target_diagram.name);
+        nodes = source_diagram.nodes.get();
+        target_diagram.nodes.update(nodes);
+        node_ids = _.map(Array.from(nodes), "id");
+        layout.save_layout(target_diagram, node_ids);
+        target_diagram.network.fit();
+    }
 
-        }
+}
 
-        function drop_diagram_to_tile(tile) {
-            var name = tile.attr("data-channel-name");
-            var source_diagram = diagrams.get_by_name(drag_id);
+function drop_diagram_to_tile(tile) {
+    var name = tile.attr("data-channel-name");
+    var source_diagram = diagrams.get_by_name(drag_id);
+    var node_ids;
+    var html;
+    if (source_diagram) {
+        console.log("add diagram contents from " + source_diagram.name + " to tile " + name);
+        html = `Add contents from diagram ${source_diagram.name} to tile ${name}?`;
+        confirmation.show(html, function () {
+            node_ids = source_diagram.nodes.getIds();
+            channels.update_channel(name, node_ids).then(function () {
+                alert.show("Added to tile");
+                tile_view.redraw_tiles();
+            });
+        });
+    }
+}
+
+function drop_tile_to_diagram() {
+    var tile_name = drag_id;
+    var target_diagram = diagrams.shown();
+    if (target_diagram) {
+        console.log("add tile contents from " + tile_name + " to diagram " + target_diagram.name);
+        channels.retrieve_channel(tile_name).then(function (contents) {
+            var channel_node_ids = _.map(contents, "id").sort();
+            // vis returns null for each id it can't find, therefore _.compact
+            var nodes = _.compact(model.nodes.get(channel_node_ids));
             var node_ids;
-            var html;
-            if (source_diagram) {
-                console.log("add diagram contents from " + source_diagram.name + " to tile " + name);
-                html = `Add contents from diagram ${source_diagram.name} to tile ${name}?`;
-                confirmation.show(html, function () {
-                    node_ids = source_diagram.nodes.getIds();
-                    channels.update_channel(name, node_ids).then(function () {
-                        alert.show("Added to tile");
-                        tile_view.redraw_tiles();
-                    });
-                });
-            }
-        }
+            target_diagram.nodes.update(nodes);
+            node_ids = _.map(Array.from(nodes), "id");
+            layout.save_layout(target_diagram, node_ids);
+            target_diagram.network.fit();
+        });
+    }
 
-        function drop_tile_to_diagram() {
-            var tile_name = drag_id;
-            var target_diagram = diagrams.shown();
-            if (target_diagram) {
-                console.log("add tile contents from " + tile_name + " to diagram " + target_diagram.name);
-                channels.retrieve_channel(tile_name).then(function (contents) {
-                    var channel_node_ids = _.map(contents, "id").sort();
-                    // vis returns null for each id it can't find, therefore _.compact
-                    var nodes = _.compact(model.nodes.get(channel_node_ids));
-                    var node_ids;
-                    target_diagram.nodes.update(nodes);
-                    node_ids = _.map(Array.from(nodes), "id");
-                    layout.save_layout(target_diagram, node_ids);
-                    target_diagram.network.fit();
-                });
-            }
+}
 
-        }
+function drop_tile_to_tile(tile) {
+    var source_tile_name = drag_id;
+    var target_tile_name = tile.attr("data-channel-name");
+    var html;
+    if (source_tile_name !== target_tile_name) {
+        html = `Add contents from tile ${source_tile_name} to tile ${target_tile_name}?`;
+        confirmation.show(html, function () {
+            var source_node_ids;
+            channels.retrieve_channel(source_tile_name).then(function (source_contents) {
+                source_node_ids = _.map(source_contents, "id").sort();
+                return channels.update_channel(target_tile_name, source_node_ids);
+            }).then(function () {
+                alert.show("Added to tile");
+                tile_view.redraw_tiles();
+            });
+        });
+    }
+}
 
-        function drop_tile_to_tile(tile) {
-            var source_tile_name = drag_id;
-            var target_tile_name = tile.attr("data-channel-name");
-            var html;
-            if (source_tile_name !== target_tile_name) {
-                html = `Add contents from tile ${source_tile_name} to tile ${target_tile_name}?`;
-                confirmation.show(html, function () {
-                    var source_node_ids;
-                    channels.retrieve_channel(source_tile_name).then(function (source_contents) {
-                        source_node_ids = _.map(source_contents, "id").sort();
-                        return channels.update_channel(target_tile_name, source_node_ids);
-                    }).then(function () {
-                        alert.show("Added to tile");
-                        tile_view.redraw_tiles();
-                    });
-                });
-            }
-        }
+function drop_node_to_tile_canvas() {
+    var node = model.nodes.get(drag_id);
+    var html;
+    if (node) {
+        html = `Create a new tile with ${node.header}?`;
+        confirmation.show(html, function () {
+            // confirm add node to tile
+            channels_menu.show_quick_new_tile([node.id]);
+        });
+    }
+}
 
-        function drop_node_to_tile_canvas() {
-            var node = model.nodes.get(drag_id);
-            var html;
-            if (node) {
-                html = `Create a new tile with ${node.header}?`;
-                confirmation.show(html, function () {
-                    // confirm add node to tile
-                    channels_menu.show_quick_new_tile([node.id]);
-                });
-            }
-        }
+function drop_diagram_to_tile_canvas() {
+    var diagram = diagrams.get_by_name(drag_id);
+    var html;
+    if (diagram) {
+        html = `Create a new tile from diagram ${diagram.name} contents?`;
+        confirmation.show(html, function () {
+            var node_ids = diagram.nodes.getIds();
+            // confirm add node to tile
+            channels_menu.show_quick_new_tile(node_ids);
+        });
+    }
+}
 
-        function drop_diagram_to_tile_canvas() {
-            var diagram = diagrams.get_by_name(drag_id);
-            var html;
-            if (diagram) {
-                html = `Create a new tile from diagram ${diagram.name} contents?`;
-                confirmation.show(html, function () {
-                    var node_ids = diagram.nodes.getIds();
-                    // confirm add node to tile
-                    channels_menu.show_quick_new_tile(node_ids);
-                });
-            }
+function drop_tile_to_tile_canvas() {
+    var source_tile_name = drag_id;
+    var html = `Create a new tile from tile ${source_tile_name} contents?`;
+    confirmation.show(html, function () {
+        var source_node_ids;
+        channels.retrieve_channel(source_tile_name).then(function (source_contents) {
+            source_node_ids = _.map(source_contents, "id").sort();
+            channels_menu.show_quick_new_tile(source_node_ids);
+        });
+    });
+}
+
+$("body").on("dragstart", function (event) {
+    try {
+        if (event.target.attributes["data-node-id"]) {
+            console.log("dragging node");
+            drag_id = event.target.attributes["data-node-id"].value;
+            drag_type = "node";
+        } else
+            if (event.target.attributes["data-diagram-name"]) {
+                console.log("dragging diagram");
+                drag_id = event.target.attributes["data-diagram-name"].value;
+                drag_type = "diagram";
+            } else
+                if (event.target.attributes["data-tile-name"]) {
+                    console.log("dragging tile");
+                    drag_id = event.target.attributes["data-tile-name"].value;
+                    drag_type = "tile";
+                } else {
+                    console.log("ignoring unknown draggable");
+                }
+    } catch (exception) {
+        console.log(exception);
+    }
+});
+
+$("#diagram-tab-content")[0].addEventListener("dragenter", async function (event) {
+    const shown = diagrams.shown();
+    if (shown) {
+        if (await shown.isLocked()) {
+            event.dataTransfer.dropEffect = "none";
+        }
+        else {
+            event.dataTransfer.dropEffect = "copy";
+            event.preventDefault();
         }
+    }
+    else {
+        event.dataTransfer.dropEffect = "copy";
+        event.preventDefault();
+    }
+}, false);
 
-        function drop_tile_to_tile_canvas() {
-            var source_tile_name = drag_id;
-            var html = `Create a new tile from tile ${source_tile_name} contents?`;
-            confirmation.show(html, function () {
-                var source_node_ids;
-                channels.retrieve_channel(source_tile_name).then(function (source_contents) {
-                    source_node_ids = _.map(source_contents, "id").sort();
-                    channels_menu.show_quick_new_tile(source_node_ids);
-                });
-            });
+$("#diagram-tab-content")[0].addEventListener("dragover", async function (event) {
+    const shown = diagrams.shown();
+    if (shown) {
+        if (await shown.isLocked()) {
+            event.dataTransfer.dropEffect = "none";
+        }
+        else {
+            event.dataTransfer.dropEffect = "copy";
+            event.preventDefault();
         }
+    }
+    else {
+        event.dataTransfer.dropEffect = "copy";
+        event.preventDefault();
+    }
+}, false);
 
-        $("body").on("dragstart", function (event) {
-            try {
-                if (event.target.attributes["data-node-id"]) {
-                    console.log("dragging node");
-                    drag_id = event.target.attributes["data-node-id"].value;
-                    drag_type = "node";
-                } else
-                    if (event.target.attributes["data-diagram-name"]) {
-                        console.log("dragging diagram");
-                        drag_id = event.target.attributes["data-diagram-name"].value;
-                        drag_type = "diagram";
-                    } else
-                        if (event.target.attributes["data-tile-name"]) {
-                            console.log("dragging tile");
-                            drag_id = event.target.attributes["data-tile-name"].value;
-                            drag_type = "tile";
-                        } else {
-                            console.log("ignoring unknown draggable");
-                        }
-            } catch (exception) {
-                console.log(exception);
-            }
-        });
+$("#diagram-tab-content")[0].addEventListener("dragend", function (event) {
+    event.preventDefault();
+}, false);
 
-        $("#diagram-tab-content")[0].addEventListener("dragenter", async function (event) {
-            const shown = diagrams.shown();
-            if (shown) {
-                if (await shown.isLocked()) {
-                    event.dataTransfer.dropEffect = "none";
-                }
-                else {
-                    event.dataTransfer.dropEffect = "copy";
-                    event.preventDefault();
-                }
+$("#diagram-tab-content")[0].addEventListener("drop", function (event) {
+    var tile;
+    event.preventDefault();
+    if (drag_type === "node" && drag_id) {
+        if (diagrams.shown()) {
+            drop_node_to_diagram(event);
+        } else if (tile_view.shown()) {
+            tile = $(event.target).parents("div[data-channel-name]");
+            console.log(tile);
+            if (tile.length === 1) {
+                drop_node_to_tile(tile);
+            } else {
+                drop_node_to_tile_canvas();
             }
-            else {
-                event.dataTransfer.dropEffect = "copy";
-                event.preventDefault();
-            }
-        }, false);
-
-        $("#diagram-tab-content")[0].addEventListener("dragover", async function (event) {
-            const shown = diagrams.shown();
-            if (shown) {
-                if (await shown.isLocked()) {
-                    event.dataTransfer.dropEffect = "none";
-                }
-                else {
-                    event.dataTransfer.dropEffect = "copy";
-                    event.preventDefault();
+        }
+    } else
+        if (drag_type === "diagram" && drag_id) {
+            if (diagrams.shown()) {
+                drop_diagram_to_diagram();
+            } else if (tile_view.shown()) {
+                tile = $(event.target).parents("div[data-channel-name]");
+                console.log(tile);
+                if (tile.length === 1) {
+                    drop_diagram_to_tile(tile);
+                } else {
+                    drop_diagram_to_tile_canvas();
                 }
             }
-            else {
-                event.dataTransfer.dropEffect = "copy";
-                event.preventDefault();
-            }
-        }, false);
-
-        $("#diagram-tab-content")[0].addEventListener("dragend", function (event) {
-            event.preventDefault();
-        }, false);
-
-        $("#diagram-tab-content")[0].addEventListener("drop", function (event) {
-            var tile;
-            event.preventDefault();
-            if (drag_type === "node" && drag_id) {
+        } else
+            if (drag_type === "tile" && drag_id) {
                 if (diagrams.shown()) {
-                    drop_node_to_diagram(event);
+                    drop_tile_to_diagram();
                 } else if (tile_view.shown()) {
                     tile = $(event.target).parents("div[data-channel-name]");
                     console.log(tile);
                     if (tile.length === 1) {
-                        drop_node_to_tile(tile);
+                        drop_tile_to_tile(tile);
                     } else {
-                        drop_node_to_tile_canvas();
+                        drop_tile_to_tile_canvas();
                     }
                 }
-            } else
-                if (drag_type === "diagram" && drag_id) {
-                    if (diagrams.shown()) {
-                        drop_diagram_to_diagram();
-                    } else if (tile_view.shown()) {
-                        tile = $(event.target).parents("div[data-channel-name]");
-                        console.log(tile);
-                        if (tile.length === 1) {
-                            drop_diagram_to_tile(tile);
-                        } else {
-                            drop_diagram_to_tile_canvas();
-                        }
-                    }
-                } else
-                    if (drag_type === "tile" && drag_id) {
-                        if (diagrams.shown()) {
-                            drop_tile_to_diagram();
-                        } else if (tile_view.shown()) {
-                            tile = $(event.target).parents("div[data-channel-name]");
-                            console.log(tile);
-                            if (tile.length === 1) {
-                                drop_tile_to_tile(tile);
-                            } else {
-                                drop_tile_to_tile_canvas();
-                            }
-                        }
-                    }
-        }, false);
+            }
+}, false);
 
-    });
\ No newline at end of file
+ 
\ No newline at end of file
diff --git a/source/html/js/app/ui/event_alert_indicators.js b/source/html/js/app/ui/event_alert_indicators.js
index 8182a43f..43913260 100644
--- a/source/html/js/app/ui/event_alert_indicators.js
+++ b/source/html/js/app/ui/event_alert_indicators.js
@@ -1,251 +1,250 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/events", "app/ui/diagrams"],
-    function($, _, model, event_alerts, diagrams) {
-
-        /**
-         * Retrieve all edges originating from the given arn.
-         */
-
-        const getEdges = (arn, reverse) => {
-            const edges = model.edges.get({
-                // filter: (item) => 
-                // {
-                //     return item.id.endsWith(`:${arn}`) || item.id.startsWith(`${arn}:`);
-                // }
-                filter: (item) => {
-                    // first arn in the edge id is the source
-                    return item.id.startsWith(`${arn}:`);
-                }
-            });
-            return _.isArray(edges) ? edges : [edges];
-        };
 
-        /**
-         * Retrieve all edges with the given arn and belonging to the given pipeline.
-         */
-
-        const getEdgesByPipeline = (arn, pipeline, bidi = true) => {
-            // console.log(arn, pipeline);
-            let options;
-            if (bidi) {
-                options = {
-                    filter: (item) => {
-                        // the arn as the source or target and the pipeline number at the end
-                        return ((item.id.includes(`:${arn}:`) || item.id.startsWith(`${arn}:`)) &&
-                            item.id.endsWith(`:${pipeline}`));
-                    }
-                };
-            } else {
-                options = {
-                    filter: (item) => {
-                        return item.id.startsWith(`${arn}:`) && item.id.endsWith(`:${pipeline}`);
-                    }
-                };
+import * as model from "../model.js";
+import * as event_alerts from "../events.js";
+import * as diagrams from "./diagrams.js";
+
+
+/**
+ * Retrieve all edges originating from the given arn.
+ */
+
+const getEdges = (arn) => {
+    const edges = model.edges.get({
+        filter: (item) => {
+            // first arn in the edge id is the source
+            return item.id.startsWith(`${arn}:`);
+        }
+    });
+    return _.isArray(edges) ? edges : [edges];
+};
+
+/**
+ * Retrieve all edges with the given arn and belonging to the given pipeline.
+ */
+
+const getEdgesByPipeline = (arn, pipeline, bidi = true) => {
+    // console.log(arn, pipeline);
+    let options;
+    if (bidi) {
+        options = {
+            filter: (item) => {
+                // the arn as the source or target and the pipeline number at the end
+                return ((item.id.includes(`:${arn}:`) || item.id.startsWith(`${arn}:`)) &&
+                    item.id.endsWith(`:${pipeline}`));
             }
-            const edges = model.edges.get(options);
-            return _.isArray(edges) ? edges : [edges];
         };
-
-        /**
-         * Update the node on all containing diagrams
-         * @param {DataSet} node The DataSet node provided by the model.
-         * @param {Boolean} alertState If true, alert setting call, or false for alert clearing
-         * @param {String} dataSet Default to 'nodes. Only other possible option is 'edges'.
-         */
-        const updateUIHandler = (node, alertState = true, dataSet = 'nodes') => {
-            let matches = [];
-            if (dataSet === 'nodes') {
-                matches = diagrams.have_all([node.id]);
-            } else if (dataSet === 'edges') {
-                // both nodes of an edge need to be on a diagram for the edge to be there
-                matches = diagrams.have_all([node.from, node.to]);
-            }
-
-            for (let diagram of matches) {
-                // update the diagrams state
-                diagram[dataSet].update(node);
-                diagram.alert(alertState);
+    } else {
+        options = {
+            filter: (item) => {
+                return item.id.startsWith(`${arn}:`) && item.id.endsWith(`:${pipeline}`);
             }
         };
-
-        const updateAlertHandler = (node, active_alert = true, alert_details = {}) => {
-            let selected = null;
-            let unselected = null;
-            let newState = 'normal';
-
-            if (node.degraded) {
-                newState = 'degraded';
-                selected = node.render.degraded_selected();
-                unselected = node.render.degraded_unselected();
-            } else if (node.alerting) {
-                newState = 'alerting';
-                selected = node.render.alert_selected();
-                unselected = node.render.alert_unselected();
-            } else {
-                selected = node.render.normal_selected();
-                unselected = node.render.normal_unselected();
-            }
-
-            if (selected != node.image.selected || unselected != node.image.unselected) {
-                /** Update the node */
-                node.image.selected = selected;
-                node.image.unselected = unselected;
-                model.nodes.update(node);
-                updateUIHandler(node, active_alert);
-            }
-
-            const newEdgeOpts = {
-                color: { color: (active_alert === true && newState !== 'normal') ? 'red' : 'black' },
-                dashes: (active_alert === true && newState !== 'normal'),
-                hoverWidth: 1
-            };
-
-            let edges;
-            if (node.id.includes(":medialive:") && node.id.includes(":channel:")) {
-                // get edges in both directions if possible
-                edges = getEdgesByPipeline(node.id, parseInt(alert_details.pipeline));
-            }
-            // else 
-            // if (_.has(alert_details, "pipeline")) {
-            //     // get outbound edges by pipeline
-            //     edges = getEdgesByPipeline(node.id, parseInt(alert_details.pipeline), false);
-            // } 
-            else {
-                // get outbound edges
-                edges = getEdges(node.id);
-            }
-
-            // console.log("edges: " + JSON.stringify(edges));
-
-            /** Update the edges */
-            edges.forEach((edge) => {
-                // console.log(JSON.stringify(edge));
-                // console.log(`edge: ${edge.id}`);
-
-                if (edge.color.color !== newEdgeOpts.color.color || edge.dashes !== newEdgeOpts.dashes) {
-                    // console.log("edge needs update");
-                    edge.color = newEdgeOpts.color;
-                    edge.dashes = newEdgeOpts.dashes;
-                    edge.hoverWidth = newEdgeOpts.hoverWidth;
-                    model.edges.update(edge);
-                    updateUIHandler(edge, active_alert, 'edges');
-                } else {
-                    // console.log("edge is correct");
-                }
-            });
-        };
-
-        const updateEventAlertState = (current_alerts, previous_alerts) => {
-            /** iterate through current 'set' alerts */
-            let alerting_nodes = new Set();
-
-            // console.log(`current alerts: ${current_alerts.length}`);
-            // console.log(`previous alerts: ${previous_alerts.length}`);
-
-            // we only need one unique alert per arn/pipeline
-            // filter out multiple alerts for either: same arn/pipeline or same arn (if no pipeline)
-
-            let uniq_current_alerts = _.uniqBy(current_alerts, (item) => {
-                if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
-                    return `${item.resource_arn}:${item.detail.pipeline}`;
-                } else {
-                    return `${item.resource_arn}`;
-                }
-            });
-
-            let uniq_previous_alerts = _.uniqBy(previous_alerts, (item) => {
-                if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
-                    return `${item.resource_arn}:${item.detail.pipeline}`;
-                } else {
-                    return `${item.resource_arn}`;
-                }
-            });
-
-            // console.log(`unique current alerts: ${uniq_current_alerts.length}`);
-            // console.log(`unique previous alerts: ${uniq_previous_alerts.length}`);
-
-            // use the filtered lists
-            current_alerts = uniq_current_alerts;
-            previous_alerts = uniq_previous_alerts;
-
-            for (let item of current_alerts) {
-                const node = model.nodes.get(item.resource_arn);
-                if (node) {
-                    node.alerting = true;
-                    alerting_nodes.add(node.id);
-                    // track which pipelines are down on the model item
-                    if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
-                        // create the attribute if its not there
-                        if (!_.isArray(node.running_pipelines)) {
-                            if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "SINGLE_PIPELINE") {
-                                node.running_pipelines = new Array(1);
-                            } else if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "STANDARD") {
-                                node.running_pipelines = new Array(2);
-                            } else if (_.has(node.data, "PipelinesRunningCount")) {
-                                let count = Number.parseInt(node.data.PipelinesRunningCount);
-                                node.running_pipelines = new Array(count);
-                            } else {
-                                node.running_pipelines = new Array(1);
-                            }
-                            node.running_pipelines.fill(1);
-                        }
-                        let index = Number.parseInt(item.detail.pipeline);
-                        node.running_pipelines[index] = 0;
-                        node.degraded = (_.sum(node.running_pipelines) > 0) && (_.sum(node.running_pipelines) < node.running_pipelines.length);
+    }
+    const edges = model.edges.get(options);
+    return _.isArray(edges) ? edges : [edges];
+};
+
+/**
+ * Update the node on all containing diagrams
+ * @param {DataSet} node The DataSet node provided by the model.
+ * @param {Boolean} alertState If true, alert setting call, or false for alert clearing
+ * @param {String} dataSet Default to 'nodes. Only other possible option is 'edges'.
+ */
+const updateUIHandler = (node, alertState = true, dataSet = 'nodes') => {
+    let matches = [];
+    if (dataSet === 'nodes') {
+        matches = diagrams.have_all([node.id]);
+    } else if (dataSet === 'edges') {
+        // both nodes of an edge need to be on a diagram for the edge to be there
+        matches = diagrams.have_all([node.from, node.to]);
+    }
+
+    for (let diagram of matches) {
+        // update the diagrams state
+        diagram[dataSet].update(node);
+        diagram.alert(alertState);
+    }
+};
+
+const updateAlertHandler = (node, active_alert = true, alert_details = {}) => {
+    let selected = null;
+    let unselected = null;
+    let newState = 'normal';
+
+    if (node.degraded) {
+        newState = 'degraded';
+        selected = node.render.degraded_selected();
+        unselected = node.render.degraded_unselected();
+    } else if (node.alerting) {
+        newState = 'alerting';
+        selected = node.render.alert_selected();
+        unselected = node.render.alert_unselected();
+    } else {
+        selected = node.render.normal_selected();
+        unselected = node.render.normal_unselected();
+    }
+
+    if (selected != node.image.selected || unselected != node.image.unselected) {
+        /** Update the node */
+        node.image.selected = selected;
+        node.image.unselected = unselected;
+        model.nodes.update(node);
+        updateUIHandler(node, active_alert);
+    }
+
+    const newEdgeOpts = {
+        color: { color: (active_alert === true && newState !== 'normal') ? 'red' : 'black' },
+        dashes: (active_alert === true && newState !== 'normal'),
+        hoverWidth: 1
+    };
+
+    let edges;
+    if (node.id.includes(":medialive:") && node.id.includes(":channel:")) {
+        // get edges in both directions if possible
+        edges = getEdgesByPipeline(node.id, parseInt(alert_details.pipeline));
+    }
+    // else 
+    // if (_.has(alert_details, "pipeline")) {
+    //     // get outbound edges by pipeline
+    //     edges = getEdgesByPipeline(node.id, parseInt(alert_details.pipeline), false);
+    // } 
+    else {
+        // get outbound edges
+        edges = getEdges(node.id);
+    }
+
+    // console.log("edges: " + JSON.stringify(edges));
+
+    /** Update the edges */
+    edges.forEach((edge) => {
+        // console.log(JSON.stringify(edge));
+        // console.log(`edge: ${edge.id}`);
+
+        if (edge.color.color !== newEdgeOpts.color.color || edge.dashes !== newEdgeOpts.dashes) {
+            // console.log("edge needs update");
+            edge.color = newEdgeOpts.color;
+            edge.dashes = newEdgeOpts.dashes;
+            edge.hoverWidth = newEdgeOpts.hoverWidth;
+            model.edges.update(edge);
+            updateUIHandler(edge, active_alert, 'edges');
+        } else {
+            // console.log("edge is correct");
+        }
+    });
+};
+
+const updateEventAlertState = (current_alerts, previous_alerts) => {
+    /** iterate through current 'set' alerts */
+    let alerting_nodes = new Set();
+
+    // console.log(`current alerts: ${current_alerts.length}`);
+    // console.log(`previous alerts: ${previous_alerts.length}`);
+
+    // we only need one unique alert per arn/pipeline
+    // filter out multiple alerts for either: same arn/pipeline or same arn (if no pipeline)
+
+    let uniq_current_alerts = _.uniqBy(current_alerts, (item) => {
+        if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
+            return `${item.resource_arn}:${item.detail.pipeline}`;
+        } else {
+            return `${item.resource_arn}`;
+        }
+    });
+
+    let uniq_previous_alerts = _.uniqBy(previous_alerts, (item) => {
+        if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
+            return `${item.resource_arn}:${item.detail.pipeline}`;
+        } else {
+            return `${item.resource_arn}`;
+        }
+    });
+
+    // console.log(`unique current alerts: ${uniq_current_alerts.length}`);
+    // console.log(`unique previous alerts: ${uniq_previous_alerts.length}`);
+
+    // use the filtered lists
+    current_alerts = uniq_current_alerts;
+    previous_alerts = uniq_previous_alerts;
+
+    for (let item of current_alerts) {
+        const node = model.nodes.get(item.resource_arn);
+        if (node) {
+            node.alerting = true;
+            alerting_nodes.add(node.id);
+            // track which pipelines are down on the model item
+            if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
+                // create the attribute if its not there
+                if (!_.isArray(node.running_pipelines)) {
+                    if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "SINGLE_PIPELINE") {
+                        node.running_pipelines = new Array(1);
+                    } else if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "STANDARD") {
+                        node.running_pipelines = new Array(2);
+                    } else if (_.has(node.data, "PipelinesRunningCount")) {
+                        let count = Number.parseInt(node.data.PipelinesRunningCount);
+                        node.running_pipelines = new Array(count);
                     } else {
-                        node.degraded = false;
+                        node.running_pipelines = new Array(1);
                     }
-                    updateAlertHandler(node, true, item.detail);
+                    node.running_pipelines.fill(1);
                 }
+                let index = Number.parseInt(item.detail.pipeline);
+                node.running_pipelines[index] = 0;
+                node.degraded = (_.sum(node.running_pipelines) > 0) && (_.sum(node.running_pipelines) < node.running_pipelines.length);
+            } else {
+                node.degraded = false;
             }
-
-            // filter out multiple alerts for either: same arn/pipeline or same arn (if no pipeline)
-            // cleared alerts are present in the previous list and not in the current list
-
-            let uniq_cleared_alerts = _.differenceBy(previous_alerts, current_alerts, (item) => {
-                if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
-                    return `${item.resource_arn}:${item.detail.pipeline}`;
-                } else {
-                    return `${item.resource_arn}`;
-                }
-            });
-
-            console.log(`unique cleared alerts: ${uniq_cleared_alerts.length}`);
-
-            for (let cleared of uniq_cleared_alerts) {
-                let node = model.nodes.get(cleared.resource_arn);
-                if (node) {
-                    if (!alerting_nodes.has(node.id)) {
-                        node.alerting = false;
-                    }
-                    // track which pipelines are up on the model item
-                    if (_.has(cleared, "detail") && _.has(cleared.detail, "pipeline")) {
-                        // create the attribute if its not there
-                        if (!_.isArray(node.running_pipelines)) {
-                            if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "SINGLE_PIPELINE") {
-                                node.running_pipelines = new Array(1);
-                            } else if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "STANDARD") {
-                                node.running_pipelines = new Array(2);
-                            } else if (_.has(node.data, "PipelinesRunningCount")) {
-                                let count = Number.parseInt(node.data.PipelinesRunningCount);
-                                node.running_pipelines = new Array(count);
-                            } else {
-                                node.running_pipelines = new Array(1);
-                            }
-                            node.running_pipelines.fill(1);
-                        }
-                        let index = Number.parseInt(cleared.detail.pipeline);
-                        node.running_pipelines[index] = 1;
-                        node.degraded = (_.sum(node.running_pipelines) > 0) && (_.sum(node.running_pipelines) < node.running_pipelines.length);
+            updateAlertHandler(node, true, item.detail);
+        }
+    }
+
+    // filter out multiple alerts for either: same arn/pipeline or same arn (if no pipeline)
+    // cleared alerts are present in the previous list and not in the current list
+
+    let uniq_cleared_alerts = _.differenceBy(previous_alerts, current_alerts, (item) => {
+        if (_.has(item, "detail") && _.has(item.detail, "pipeline")) {
+            return `${item.resource_arn}:${item.detail.pipeline}`;
+        } else {
+            return `${item.resource_arn}`;
+        }
+    });
+
+    console.log(`unique cleared alerts: ${uniq_cleared_alerts.length}`);
+
+    for (let cleared of uniq_cleared_alerts) {
+        let node = model.nodes.get(cleared.resource_arn);
+        if (node) {
+            if (!alerting_nodes.has(node.id)) {
+                node.alerting = false;
+            }
+            // track which pipelines are up on the model item
+            if (_.has(cleared, "detail") && _.has(cleared.detail, "pipeline")) {
+                // create the attribute if its not there
+                if (!_.isArray(node.running_pipelines)) {
+                    if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "SINGLE_PIPELINE") {
+                        node.running_pipelines = new Array(1);
+                    } else if (_.has(node.data, "ChannelClass") && node.data.ChannelClass === "STANDARD") {
+                        node.running_pipelines = new Array(2);
+                    } else if (_.has(node.data, "PipelinesRunningCount")) {
+                        let count = Number.parseInt(node.data.PipelinesRunningCount);
+                        node.running_pipelines = new Array(count);
                     } else {
-                        node.degraded = false;
+                        node.running_pipelines = new Array(1);
                     }
-                    updateAlertHandler(node, false, cleared.detail);
+                    node.running_pipelines.fill(1);
                 }
+                let index = Number.parseInt(cleared.detail.pipeline);
+                node.running_pipelines[index] = 1;
+                node.degraded = (_.sum(node.running_pipelines) > 0) && (_.sum(node.running_pipelines) < node.running_pipelines.length);
+            } else {
+                node.degraded = false;
             }
-        };
+            updateAlertHandler(node, false, cleared.detail);
+        }
+    }
+};
+
+event_alerts.add_callback(updateEventAlertState);
 
-        event_alerts.add_callback(updateEventAlertState);
-    });
\ No newline at end of file
diff --git a/source/html/js/app/ui/help_menu.js b/source/html/js/app/ui/help_menu.js
index 32b957c1..02e9c5af 100644
--- a/source/html/js/app/ui/help_menu.js
+++ b/source/html/js/app/ui/help_menu.js
@@ -1,22 +1,22 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/tools/build_numbers"], function($, build_numbers) {
 
-    $("#build-version-button").on("click", function(event) {
-        build_numbers.run().then(function (result) {
-            var alert_class = result.success ? "alert-success" : "alert-danger";
-            var prefix = result.success ? "Passed" : "Failed";
-            var html = `<div class="alert ${alert_class}" style="width: 100%; text-align: center;" role="alert">${prefix}: Output for build version</div>`;
-            $("#tool_output_modal_title").html(html);
-            $("#tool_output_modal_message").html(result.message);
-            $("#tool_output_modal").modal('show');
-        }).catch(function (error) {
-            var alert_class = "alert-danger";
-            var html = `<div class="alert ${alert_class}" style="width: 100%; text-align: center;" role="alert">Failed: Output for build version</div>`;
-            $("#tool_output_modal_title").html(html);
-            $("#tool_output_modal_message").html(error);
-            $("#tool_output_modal").modal('show');
-        });
+import * as build_numbers from "../tools/build_numbers.js";
+
+$("#build-version-button").on("click", function () {
+    build_numbers.run().then(function (result) {
+        var alert_class = result.success ? "alert-success" : "alert-danger";
+        var prefix = result.success ? "Passed" : "Failed";
+        var html = `<div class="alert ${alert_class}" style="width: 100%; text-align: center;" role="alert">${prefix}: Output for build version</div>`;
+        $("#tool_output_modal_title").html(html);
+        $("#tool_output_modal_message").html(result.message);
+        $("#tool_output_modal").modal('show');
+    }).catch(function (error) {
+        var alert_class = "alert-danger";
+        var html = `<div class="alert ${alert_class}" style="width: 100%; text-align: center;" role="alert">Failed: Output for build version</div>`;
+        $("#tool_output_modal_title").html(html);
+        $("#tool_output_modal_message").html(error);
+        $("#tool_output_modal").modal('show');
     });
 });
diff --git a/source/html/js/app/ui/information_compartment.js b/source/html/js/app/ui/information_compartment.js
index 13a4d265..6865f525 100644
--- a/source/html/js/app/ui/information_compartment.js
+++ b/source/html/js/app/ui/information_compartment.js
@@ -1,66 +1,62 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/settings"],
-    function($, settings) {
 
-        // REMEMBER SETTING
+import * as settings from "../settings.js";
 
-        let compartment_state = "max";
-        let settings_key = "info-compartment-state";
+let compartment_state = "max";
+let settings_key = "info-compartment-state";
 
-        $("#information-compartment-up-down-button").click(() => {
-            try {
-                if (compartment_state === "min") {
-                    maximize_compartment();
-                } else
-                if (compartment_state === "max") {
-                    minimize_compartment();
-                }
-            } catch (error) {
-                console.log(error);
+$("#information-compartment-up-down-button").click(() => {
+    try {
+        if (compartment_state === "min") {
+            maximize_compartment();
+        } else
+            if (compartment_state === "max") {
+                minimize_compartment();
             }
-            $("#information-compartment-up-down-button").blur();
-        });
-
-        let maximize_compartment = () => {
-            $("#information").fadeToggle("fast");
-            $("#information-compartment-flex").fadeToggle("fast");
-            $("#info-nav-flex").removeClass("border-bottom");
-            $("#diagram").animate({ height: "-=28%" });
-            compartment_state = "max";
-            settings.put(settings_key, { "state": compartment_state });
-        };
-
-        let minimize_compartment = () => {
-            $("#information").fadeToggle("fast");
-            $("#information-compartment-flex").fadeToggle("fast");
-            $("#info-nav-flex").addClass("border-bottom");
-            $("#diagram").animate({ height: "+=28%" });
-            compartment_state = "min";
-            settings.put(settings_key, { "state": compartment_state });
-        };
-
-        let restore_state = async() => {
-            try {
-                let value = await settings.get(settings_key);
-                console.log(`saved info compartment state = ${JSON.stringify(value)}`);
-                if (value === null) {
-                    // no setting, keep the default state of maximized
-                    settings.put(settings_key, { "state": "max" });
-                } else
-                if (value.state === "max") {
-                    // do nothing, default state
-                } else
+    } catch (error) {
+        console.log(error);
+    }
+    $("#information-compartment-up-down-button").blur();
+});
+
+let maximize_compartment = () => {
+    $("#information").fadeToggle("fast");
+    $("#information-compartment-flex").fadeToggle("fast");
+    $("#info-nav-flex").removeClass("border-bottom");
+    $("#diagram").animate({ height: "-=28%" });
+    compartment_state = "max";
+    settings.put(settings_key, { "state": compartment_state });
+};
+
+let minimize_compartment = () => {
+    $("#information").fadeToggle("fast");
+    $("#information-compartment-flex").fadeToggle("fast");
+    $("#info-nav-flex").addClass("border-bottom");
+    $("#diagram").animate({ height: "+=28%" });
+    compartment_state = "min";
+    settings.put(settings_key, { "state": compartment_state });
+};
+
+let restore_state = async () => {
+    try {
+        let value = await settings.get(settings_key);
+        console.log(`saved info compartment state = ${JSON.stringify(value)}`);
+        if (value === null) {
+            // no setting, keep the default state of maximized
+            settings.put(settings_key, { "state": "max" });
+        } else
+            if (value.state === "max") {
+                // do nothing, default state
+            } else
                 if (value.state === "min") {
                     minimize_compartment();
                 }
-            } catch (error) {
-                console.log(JSON.stringify(error));
-            }
-        };
-
-        // initialization
-        restore_state();
+    } catch (error) {
+        console.log(JSON.stringify(error));
+    }
+};
 
-    });
\ No newline at end of file
+// initialization
+restore_state();
diff --git a/source/html/js/app/ui/informational_overlays.js b/source/html/js/app/ui/informational_overlays.js
index 1c0e4c75..a6857a3c 100644
--- a/source/html/js/app/ui/informational_overlays.js
+++ b/source/html/js/app/ui/informational_overlays.js
@@ -1,62 +1,60 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-       define(["jquery", "lodash", "app/model", "app/plugins", "app/ui/diagrams"],
-       function($, _, model, plugins, diagrams) {
-   
-           var intervalID;
-           // interval in millis to update the cache
-           var update_interval = 5000;
-   
-           var update_overlay = function() {
-               // console.log("info overlay update");
-               // get all the overlays
-               for (let module_name of plugins.overlays) {
-                   const ov = require(module_name);
-   
-                   if (ov.informational == true) {
-                       const nodes = model.nodes.get({
-                           filter: function(item) {
-                               return ov.match_type == (item.generic_node_type || item.title);
-                           }
-                       });
-   
-                       for (let node of nodes) {
-                           let selected = node.render.normal_selected();
-                           let unselected = node.render.normal_unselected();
-   
-                           if (node.degraded) {
-                               selected = node.render.degraded_selected();
-                               unselected = node.render.degraded_unselected();
-                           } else if (node.alerting || node.alarming) {
-                               selected = node.render.alert_selected();
-                               unselected = node.render.alert_unselected();
-                           }
-   
-                           // only update the node if the SVG changes
-                           if (selected != node.image.selected || unselected != node.image.unselected) {
-                               node.image.selected = selected;
-                               node.image.unselected = unselected;
-                               model.nodes.update(node);
-   
-                               const matches = diagrams.have_all([node.id]);
-   
-                               for (let diagram of matches) {
-                                   diagram.nodes.update(node);
-                               }
-                           }
-                       }
-                   }
-               }
-           };
-   
-           var schedule_interval = function() {
-               if (intervalID) {
-                   clearInterval(intervalID);
-               }
-               intervalID = setInterval(update_overlay, update_interval);
-               console.log("informational overlays: interval scheduled " + update_interval + "ms, intervalID = " + intervalID);
-           };
-   
-           schedule_interval();
-       });
\ No newline at end of file
+
+import * as model from "../model.js";
+import * as overlays from "./overlays/overlays.js";
+import * as diagrams from "./diagrams.js";
+
+
+var intervalID;
+// interval in millis to update the cache
+var update_interval = 5000;
+
+var update_overlay = function () {
+    // console.log("info overlay update");
+    // get all the overlays
+    for (let ov of overlays.all) {
+        if (ov.informational == true) {
+            const nodes = model.nodes.get({
+                filter: (item) => { return ov.match_type == (item.generic_node_type || item.title); }
+            });
+
+            for (let node of nodes) {
+                let selected = node.render.normal_selected();
+                let unselected = node.render.normal_unselected();
+
+                if (node.degraded) {
+                    selected = node.render.degraded_selected();
+                    unselected = node.render.degraded_unselected();
+                } else if (node.alerting || node.alarming) {
+                    selected = node.render.alert_selected();
+                    unselected = node.render.alert_unselected();
+                }
+
+                // only update the node if the SVG changes
+                if (selected != node.image.selected || unselected != node.image.unselected) {
+                    node.image.selected = selected;
+                    node.image.unselected = unselected;
+                    model.nodes.update(node);
+
+                    const matches = diagrams.have_all([node.id]);
+
+                    for (let diagram of matches) {
+                        diagram.nodes.update(node);
+                    }
+                }
+            }
+        }
+    }
+};
+
+var schedule_interval = function () {
+    if (intervalID) {
+        clearInterval(intervalID);
+    }
+    intervalID = setInterval(update_overlay, update_interval);
+    console.log("informational overlays: interval scheduled " + update_interval + "ms, intervalID = " + intervalID);
+};
+
+schedule_interval();
diff --git a/source/html/js/app/ui/layout.js b/source/html/js/app/ui/layout.js
index 8447d769..fd436c06 100644
--- a/source/html/js/app/ui/layout.js
+++ b/source/html/js/app/ui/layout.js
@@ -1,76 +1,76 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/server", "app/connections", "app/ui/alert"], function($, server, connections, alert) {
 
+import * as server from "../server.js";
+import * as connections from "../connections.js";
+import * as alert from "./alert.js";
 
-    var retrieve_layout = function(diagram) {
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        var current_endpoint = `${url}/layout/view/${encodeURIComponent(diagram.view_id)}`;
-        return server.get(current_endpoint, api_key);
-    };
+var retrieve_layout = function (diagram) {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/layout/view/${encodeURIComponent(diagram.view_id)}`;
+    return server.get(current_endpoint, api_key);
+};
 
-    var delete_layout = function(diagram, node_ids) {
-        node_ids = node_ids || diagram.nodes.getIds();
-        alert.show("Deleting layout");
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        for (let node_id of node_ids) {
-            var current_endpoint = `${url}/layout/nodes/${encodeURIComponent(diagram.view_id)}/${encodeURIComponent(node_id)}`;
-            server.delete_method(current_endpoint, api_key);
-        }
-    };
-
-    var save_layout = function(diagram, node_ids) {
-        node_ids = node_ids || diagram.nodes.getIds();
-        alert.show("Saving layout");
-        var network = diagram.network;
-        var positions = network.getPositions(node_ids);
-        var layout = [];
-        for (let key of Object.keys(positions)) {
-            var entry = {
-                view: diagram.view_id,
-                id: key,
-                x: positions[key].x,
-                y: positions[key].y
-            };
-            layout.push(entry);
-        }
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        var current_endpoint = `${url}/layout/nodes`;
-        server.post(current_endpoint, api_key, layout).then(function() {
-            alert.show("Layout saved");
-            console.log("layout changes are saved");
-        }).catch(function(error) {
-            console.log(error);
-        });
-    };
+var delete_layout = function (diagram, node_ids) {
+    node_ids = node_ids || diagram.nodes.getIds();
+    alert.show("Deleting layout");
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    for (let node_id of node_ids) {
+        var current_endpoint = `${url}/layout/nodes/${encodeURIComponent(diagram.view_id)}/${encodeURIComponent(node_id)}`;
+        server.delete_method(current_endpoint, api_key);
+    }
+};
 
-    function delete_all() {
-        var current_connection = connections.get_current();
-        var url = current_connection[0];
-        var api_key = current_connection[1];
-        var current_endpoint = `${url}/layout/views`;
-        return new Promise((resolve, reject) => {
-            server.delete_method(current_endpoint, api_key).then((response) => {
-                resolve(response);
-            }).catch(function(error) {
-                console.log(error);
-                reject(error);
-            });
-        });
+var save_layout = function (diagram, node_ids) {
+    node_ids = node_ids || diagram.nodes.getIds();
+    alert.show("Saving layout");
+    var network = diagram.network;
+    var positions = network.getPositions(node_ids);
+    var layout = [];
+    for (let key of Object.keys(positions)) {
+        var entry = {
+            view: diagram.view_id,
+            id: key,
+            x: positions[key].x,
+            y: positions[key].y
+        };
+        layout.push(entry);
     }
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/layout/nodes`;
+    server.post(current_endpoint, api_key, layout).then(function () {
+        alert.show("Layout saved");
+        console.log("layout changes are saved");
+    }).catch(function (error) {
+        console.error(error);
+    });
+};
 
-    return {
-        "retrieve_layout": retrieve_layout,
-        "delete_layout": delete_layout,
-        "save_layout": save_layout,
-        "delete_all": delete_all
-    };
+function delete_all() {
+    var current_connection = connections.get_current();
+    var url = current_connection[0];
+    var api_key = current_connection[1];
+    var current_endpoint = `${url}/layout/views`;
+    return new Promise((resolve, reject) => {
+        server.delete_method(current_endpoint, api_key).then((response) => {
+            resolve(response);
+        }).catch(function (error) {
+            console.error(error);
+            reject(error);
+        });
+    });
+}
 
-});
\ No newline at end of file
+export {
+    retrieve_layout,
+    delete_layout,
+    save_layout,
+    delete_all
+};
diff --git a/source/html/js/app/ui/monitor_view.js b/source/html/js/app/ui/monitor_view.js
index be0b53d7..2ecdf770 100644
--- a/source/html/js/app/ui/monitor_view.js
+++ b/source/html/js/app/ui/monitor_view.js
@@ -1,423 +1,414 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/model", "app/events", "app/cloudwatch_events", "app/ui/tile_view", "app/ui/diagrams", "app/alarms", "app/ui/confirmation"],
-    function ($, _, model, event_alerts, cw_events, tile_view, diagrams, alarms, confirmation) {
-
-        var last_displayed;
+import * as model from "../model.js";
+import * as event_alerts from "../events.js";
+import * as cw_events from "../cloudwatch_events.js";
+import * as tile_view from "./tile_view.js";
+import * as diagrams from "./diagrams.js";
+import * as alarms from "../alarms.js";
+import * as confirmation from "./confirmation.js";
+
+
+var last_displayed;
+
+var consoleIcon = function () {
+    return `<i class='fa fa-desktop'></i>`;
+};
+
+var trashIcon = function () {
+    return `<i class='fa fa-trash'></i>`;
+};
+
+var alert_tabulator = new Tabulator("#nav-monitor-alerts-text", {
+    placeholder: "No Recent Alerts",
+    tooltips: true,
+    selectable: false,
+    height: 250,
+    layout: "fitColumns",
+    columns: [{
+        title: "Event Source ARN",
+        field: "resource_arn"
+    }, {
+        title: "Event Source Name",
+        field: "name"
+    }, {
+        title: "Alert",
+        field: "alert_type"
+    }, {
+        title: "Message",
+        field: "message",
+        widthGrow: 3
+    }, {
+        title: "Pipeline",
+        field: "pipeline",
+        widthGrow: 0
+    }, {
+        title: "Time",
+        field: "time"
+    }]
+});
+
+var alarm_tabulator = new Tabulator("#nav-monitor-alarms-text", {
+    placeholder: "No Alarm Subscriptions",
+    tooltips: true,
+    selectable: true,
+    selectableRangeMode: "click",
+    selectablePersistence: true,
+    height: 250,
+    layout: "fitColumns",
+    columns: [{
+        title: "Subscriber ARN",
+        field: "ARN"
+    }, {
+        title: "Subscriber Name",
+        field: "name"
+    }, {
+        title: "Alarm Region",
+        field: "Region"
+    }, {
+        title: "Alarm Namespace",
+        field: "Namespace"
+    }, {
+        title: "Alarm Name",
+        field: "AlarmName"
+    }, {
+        title: "Alarm State",
+        field: "StateValue"
+    }, {
+        title: "Alarm State Updated",
+        field: "StateUpdated"
+    },
+    {
+        tooltip: "Navigate to Alarm",
+        headerSort: false,
+        formatter: consoleIcon,
+        width: 40,
+        hozAlign: "center",
+        cellClick: function (e, cell) {
+            navigate_to_alarm(cell.getRow()._row.data);
+        }
+    },
+    {
+        tooltip: "Unsubscribe Alarm",
+        headerSort: false,
+        formatter: trashIcon,
+        width: 40,
+        hozAlign: "center",
+        cellClick: function (e, cell) {
+            unsubscribe_alarm(cell.getRow()._row.data);
+        }
+    }
+    ]
+});
 
-        var consoleIcon = function (cell, formatterParams) {
-            return `<i class='fa fa-desktop'></i>`;
-        };
+//custom header filter
+var dateFilterEditor = function (cell, onRendered, success, cancel) {
 
-        var trashIcon = function (cell, formatterParams) {
-            return `<i class='fa fa-trash'></i>`;
-        };
+    var container = $("<span></span>");
+    //create and style input
+    var start = $("<input type='text' placeholder='Start'/>");
+    var end = $("<input type='text' placeholder='End'/>");
 
-        var alert_tabulator = new Tabulator("#nav-monitor-alerts-text", {
-            placeholder: "No Recent Alerts",
-            tooltips: true,
-            selectable: false,
-            height: 250,
-            layout: "fitColumns",
-            columns: [{
-                title: "Event Source ARN",
-                field: "resource_arn"
-            }, {
-                title: "Event Source Name",
-                field: "name"
-            }, {
-                title: "Alert",
-                field: "alert_type"
-            }, {
-                title: "Message",
-                field: "message",
-                widthGrow: 3
-            }, {
-                title: "Pipeline",
-                field: "pipeline",
-                widthGrow: 0
-            }, {
-                title: "Time",
-                field: "time"
-            }]
-        });
-
-        var alarm_tabulator = new Tabulator("#nav-monitor-alarms-text", {
-            placeholder: "No Alarm Subscriptions",
-            tooltips: true,
-            selectable: true,
-            selectableRangeMode: "click",
-            selectablePersistence: true,
-            height: 250,
-            layout: "fitColumns",
-            columns: [{
-                title: "Subscriber ARN",
-                field: "ARN"
-            }, {
-                title: "Subscriber Name",
-                field: "name"
-            }, {
-                title: "Alarm Region",
-                field: "Region"
-            }, {
-                title: "Alarm Namespace",
-                field: "Namespace"
-            }, {
-                title: "Alarm Name",
-                field: "AlarmName"
-            }, {
-                title: "Alarm State",
-                field: "StateValue"
-            }, {
-                title: "Alarm State Updated",
-                field: "StateUpdated"
-            },
-            {
-                tooltip: "Navigate to Alarm",
-                headerSort: false,
-                formatter: consoleIcon,
-                width: 40,
-                hozAlign: "center",
-                cellClick: function (e, cell) {
-                    navigate_to_alarm(cell.getRow()._row.data);
-                }
-            },
-            {
-                tooltip: "Unsubscribe Alarm",
-                headerSort: false,
-                formatter: trashIcon,
-                width: 40,
-                hozAlign: "center",
-                cellClick: function (e, cell) {
-                    unsubscribe_alarm(cell.getRow()._row.data);
-                }
-            }
-            ]
-        });
+    container.append(start).append(end);
 
-        //custom header filter
-        var dateFilterEditor = function (cell, onRendered, success, cancel, editorParams) {
+    var inputs = $("input", container);
 
-            var container = $("<span></span>");
-            //create and style input
-            var start = $("<input type='text' placeholder='Start'/>");
-            var end = $("<input type='text' placeholder='End'/>");
 
-            container.append(start).append(end);
+    inputs.css({
+        "padding": "4px",
+        "width": "50%",
+        "box-sizing": "border-box",
+    })
+        .val(cell.getValue());
 
-            var inputs = $("input", container);
+    function buildDateString() {
+        return {
+            start: start.val(),
+            end: end.val(),
+        };
+    }
 
+    //submit new value on blur
+    inputs.on("change blur", function () {
+        success(buildDateString());
+    });
 
-            inputs.css({
-                "padding": "4px",
-                "width": "50%",
-                "box-sizing": "border-box",
-            })
-                .val(cell.getValue());
+    //submit new value on enter
+    inputs.on("keydown", function (e) {
+        if (e.keyCode == 13) {
+            success(buildDateString());
+        }
 
-            function buildDateString() {
-                return {
-                    start: start.val(),
-                    end: end.val(),
-                };
+        if (e.keyCode == 27) {
+            cancel();
+        }
+    });
+
+    return container[0];
+};
+
+//custom filter function
+function dateFilterFunction(headerValue, rowValue) {
+    //headerValue - the value of the header filter element
+    //rowValue - the value of the column in this row
+    //rowData - the data for the row being filtered
+    //filterParams - params object passed to the headerFilterFuncParams property
+
+    var start = moment(headerValue.start);
+    var end = moment(headerValue.end);
+    if (rowValue) {
+        var current_row_millis = new Date(rowValue);
+        console.log("current_row_millis: ");
+        console.log(current_row_millis);
+        var start_millis = 0;
+        var end_millis = 0;
+        if (start.isValid()) {
+            if (end.isValid()) {
+                start_millis = new Date(start);
+                end_millis = new Date(end);
+                console.log("start and end are given");
+                console.log(start_millis);
+                console.log(end_millis);
+                return current_row_millis >= start_millis && current_row_millis <= end_millis;
+            } else { //only start was given
+                start_millis = new Date(start);
+                console.log("only start was given");
+                console.log(start_millis);
+                return current_row_millis >= start_millis;
             }
-
-            //submit new value on blur
-            inputs.on("change blur", function (e) {
-                success(buildDateString());
-            });
-
-            //submit new value on enter
-            inputs.on("keydown", function (e) {
-                if (e.keyCode == 13) {
-                    success(buildDateString());
-                }
-
-                if (e.keyCode == 27) {
-                    cancel();
-                }
-            });
-
-            return container[0];
-        };
-
-        //custom filter function
-        function dateFilterFunction(headerValue, rowValue, rowData, filterParams) {
-            //headerValue - the value of the header filter element
-            //rowValue - the value of the column in this row
-            //rowData - the data for the row being filtered
-            //filterParams - params object passed to the headerFilterFuncParams property
-
-            var format = filterParams.format || "DD/MM/YYYY";
-            var start = moment(headerValue.start);
-            var end = moment(headerValue.end);
-            var value = moment(rowValue, format);
-            // console.log(rowValue);
-            // console.log(headerValue.start);
-            // console.log(headerValue.end);
-            if (rowValue) {
-                var current_row_millis = new Date(rowValue);
-                console.log("current_row_millis: ");
-                console.log(current_row_millis);
-                var start_millis = 0;
-                var end_millis = 0;
-                if (start.isValid()) {
-                    if (end.isValid()) {
-                        start_millis = new Date(start);
-                        end_millis = new Date(end);
-                        console.log("start and end are given");
-                        console.log(start_millis);
-                        console.log(end_millis);
-                        return current_row_millis >= start_millis && current_row_millis <= end_millis;
-                    } else { //only start was given
-                        start_millis = new Date(start);
-                        console.log("only start was given");
-                        console.log(start_millis);
-                        return current_row_millis >= start_millis;
-                    }
-                } else { // no start but there is end
-                    if (end.isValid()) {
-                        end_millis = new Date(end);
-                        console.log("only end was given");
-                        console.log(end_millis);
-                        return current_row_millis <= end_millis;
-                    }
-                }
+        } else { // no start but there is end
+            if (end.isValid()) {
+                end_millis = new Date(end);
+                console.log("only end was given");
+                console.log(end_millis);
+                return current_row_millis <= end_millis;
             }
-            return true; //must return a boolean, true if it passes the filter.
         }
-
-        var events_tabulator = new Tabulator("#nav-monitor-events-text", {
-            placeholder: "No Recent CloudWatch Events",
-            selectable: true,
-            height: 250,
-            layout: "fitColumns",
-            resizableRows: true,
-            initialSort: [
-                { column: "timestamp", dir: "desc" }
-            ],
-            columns: [{
-                title: "Time",
-                field: "timestamp",
-                headerFilter: dateFilterEditor,
-                headerFilterFunc: dateFilterFunction
-            }, {
-                title: "Event Type",
-                field: "type",
-                headerFilter: true
-            }, {
-                title: "Data",
-                field: "data",
-                formatter: "html",
-                headerFilter: true,
-                widthGrow: 2
-            }, {
-                tooltip: "Formatted Data View",
-                headerSort: false,
-                formatter: "tickCross",
-                formatterParams: {
-                    tickElement: "<i class='fa fa-info-circle' style='font-size:20px'></i>",
-                    crossElement: "<i class='fa fa-info-circle' style='font-size:20px'></i>"
-                },
-                width: 50,
-                hozAlign: "center",
-                cellClick: function (e, cell) {
-                    show_formatted_cloudwatch_event_data(cell.getRow()._row.data);
-                }
-            }]
-        });
-
-
-        var display_selected_node = function (node_id) {
-            var node = model.nodes.get(node_id);
-            // console.log(JSON.stringify(node));
-            last_displayed = node_id;
-            var data = [];
-            $("#nav-alarms-selected-item").html(node.header);
-            const link = (node.alerts_link || node.console_link)();
-            const consoleAnchor = `<a href="${link}" target="_blank" title="Navigate to Resource">${consoleIcon()}</a>`;
-            $("#nav-alerts-selected-item").html(node.header + "&nbsp;&nbsp;" + consoleAnchor);
-            $("#nav-events-selected-item").html(node.header);
-
-            // event alerts
+    }
+    return true; //must return a boolean, true if it passes the filter.
+}
+
+var events_tabulator = new Tabulator("#nav-monitor-events-text", {
+    placeholder: "No Recent CloudWatch Events",
+    selectable: true,
+    height: 250,
+    layout: "fitColumns",
+    resizableRows: true,
+    initialSort: [
+        { column: "timestamp", dir: "desc" }
+    ],
+    columns: [{
+        title: "Time",
+        field: "timestamp",
+        headerFilter: dateFilterEditor,
+        headerFilterFunc: dateFilterFunction
+    }, {
+        title: "Event Type",
+        field: "type",
+        headerFilter: true
+    }, {
+        title: "Data",
+        field: "data",
+        formatter: "html",
+        headerFilter: true,
+        widthGrow: 2
+    }, {
+        tooltip: "Formatted Data View",
+        headerSort: false,
+        formatter: "tickCross",
+        formatterParams: {
+            tickElement: "<i class='fa fa-info-circle' style='font-size:20px'></i>",
+            crossElement: "<i class='fa fa-info-circle' style='font-size:20px'></i>"
+        },
+        width: 50,
+        hozAlign: "center",
+        cellClick: function (e, cell) {
+            show_formatted_cloudwatch_event_data(cell.getRow()._row.data);
+        }
+    }]
+});
+
+
+var display_selected_node = async function (node_id) {
+    var node = model.nodes.get(node_id);
+    // console.log(JSON.stringify(node));
+    last_displayed = node_id;
+    var data = [];
+    $("#nav-alarms-selected-item").html(node.header);
+    const link = (node.alerts_link || node.console_link)();
+    const consoleAnchor = `<a href="${link}" target="_blank" title="Navigate to Resource">${consoleIcon()}</a>`;
+    $("#nav-alerts-selected-item").html(node.header + "&nbsp;&nbsp;" + consoleAnchor);
+    $("#nav-events-selected-item").html(node.header);
+
+    // event alerts
+    for (let event_value of event_alerts.get_cached_events().current) {
+        if (event_value.resource_arn == node.id) {
+            event_value.detail.name = node.name;
+            event_value.detail.resource_arn = event_value.resource_arn;
+            data.push(event_value.detail);
+        }
+    }
+    alert_tabulator.replaceData(data);
+    // alarms
+    const alarms = await import("../alarms.js");
+    alarms.alarms_for_subscriber(node.id).then(function (subscriptions) {
+        // console.log(subscriptions);
+        for (let subscription of subscriptions) {
+            if (Number.isInteger(subscription.StateUpdated)) {
+                subscription.StateUpdated = new Date(subscription.StateUpdated * 1000).toISOString();
+            }
+            subscription.ARN = node.id;
+            subscription.name = node.name;
+            subscription.id = node.id + ":" + subscription.Region + ":" + subscription.name;
+        }
+        alarm_tabulator.replaceData(subscriptions);
+    });
+    // cloudwatch events
+    cw_events.get_cloudwatch_events(node.id).then(function (events) {
+        // console.log(events);
+        for (let event of events) {
+            event.timestamp = new Date(event.timestamp).toISOString();
+        }
+        events_tabulator.replaceData(events);
+    });
+};
+
+var display_selected_tile = function (name, members) {
+    var alert_data = [];
+    var alarm_data = [];
+    var promises = [];
+    $("#nav-alarms-selected-item").html("Tile: ".concat(name));
+    $("#nav-alerts-selected-item").html("Tile: ".concat(name));
+    for (let member_value of members) {
+        var node = model.nodes.get(member_value.id);
+        if (node) {
             for (let event_value of event_alerts.get_cached_events().current) {
-                if (event_value.resource_arn == node.id) {
+                if (member_value.id == event_value.resource_arn) {
                     event_value.detail.name = node.name;
                     event_value.detail.resource_arn = event_value.resource_arn;
-                    data.push(event_value.detail);
+                    alert_data.push(event_value.detail);
                 }
             }
-            alert_tabulator.replaceData(data);
-            // alarms
-            require("app/alarms").alarms_for_subscriber(node.id).then(function (subscriptions) {
-                // console.log(subscriptions);
-                for (let subscription of subscriptions) {
-                    if (Number.isInteger(subscription.StateUpdated)) {
-                        subscription.StateUpdated = new Date(subscription.StateUpdated * 1000).toISOString();
-                    }
-                    subscription.ARN = node.id;
-                    subscription.name = node.name;
-                    subscription.id = node.id + ":" + subscription.Region + ":" + subscription.name;
-                }
-                alarm_tabulator.replaceData(subscriptions);
-            });
-            // cloudwatch events
-            cw_events.get_cloudwatch_events(node.id).then(function (events) {
-                // console.log(events);
-                for (let event of events) {
-                    event.timestamp = new Date(event.timestamp).toISOString();
-                }
-                events_tabulator.replaceData(events);
-            });
+            (function (local_member_value, local_node, local_alarm_data, local_promises) {
+                local_promises.push(new Promise(function (resolve) {
+                    var local_node_id = local_member_value.id;
+                    var local_node_name = local_node.name;
+                    import("../alarms.js").then((alarms)=>{
+                        alarms.alarms_for_subscriber(local_node_id).then(function (subscriptions) {
+                            for (let subscription of subscriptions) {
+                                if (Number.isInteger(subscription.StateUpdated)) {
+                                    subscription.StateUpdated = new Date(subscription.StateUpdated * 1000).toISOString();
+                                }
+                                subscription.ARN = local_node_id;
+                                subscription.name = local_node_name;
+                            }
+                            local_alarm_data = local_alarm_data.concat(subscriptions);
+                            resolve();
+                        });    
+                    });
+                }));
+            })(member_value, node, alarm_data, promises);
+        }
+    }
+    Promise.all(promises).then(function () {
+        alarm_tabulator.replaceData(alarm_data);
+        alert_tabulator.replaceData(alert_data);
+        alarm_tabulator.redraw();
+        alert_tabulator.redraw();
+    });
+};
+
+var tile_view_click_listener = function (name, members) {
+    if (tile_view.selected()) {
+        last_displayed = {
+            name: name,
+            members: members
         };
-
-        var display_selected_tile = function (name, members) {
-            var alert_data = [];
-            var alarm_data = [];
+        display_selected_tile(name, members);
+    }
+};
+
+var event_alert_listener = function () {
+    refresh();
+};
+
+tile_view.add_selection_callback(tile_view_click_listener);
+
+event_alerts.add_callback(event_alert_listener);
+
+alarms.add_callback(event_alert_listener);
+
+diagrams.add_selection_callback(function (diagram, event) {
+    if (event.nodes.length > 0) {
+        display_selected_node(event.nodes[0]);
+    }
+});
+
+$("#monitor-subscribe-alarms-button").click(async function () {
+    const alarms_menu = await import("./alarms_menu.js");
+    alarms_menu.show_alarm_subscribe_dialog();
+});
+
+$("#monitor-unsubscribe-alarms-button").click(function () {
+    var selected_alarms = alarm_tabulator.getSelectedData();
+    var diagram = diagrams.shown();
+    var selected_nodes = diagram.network.getSelectedNodes();
+    // console.log(selected_alarms);
+    confirmation.show("Unsubscribe selected node" +
+        (selected_nodes.length == 1 ? "" : "s") + " from " +
+        selected_alarms.length + " alarm" +
+        (selected_alarms.length == 1 ? "" : "s") + "?",
+        function () {
             var promises = [];
-            $("#nav-alarms-selected-item").html("Tile: ".concat(name));
-            $("#nav-alerts-selected-item").html("Tile: ".concat(name));
-            for (let member_value of members) {
-                var node = model.nodes.get(member_value.id);
-                if (node) {
-                    for (let event_value of event_alerts.get_cached_events().current) {
-                        if (member_value.id == event_value.resource_arn) {
-                            event_value.detail.name = node.name;
-                            event_value.detail.resource_arn = event_value.resource_arn;
-                            alert_data.push(event_value.detail);
-                        }
-                    }
-                    (function (local_member_value, local_node, local_require, local_alarm_data, local_promises) {
-                        local_promises.push(new Promise(function (resolve, reject) {
-                            var local_node_id = local_member_value.id;
-                            var local_node_name = local_node.name;
-                            local_require("app/alarms").alarms_for_subscriber(local_node_id).then(function (subscriptions) {
-                                // console.log(subscriptions);
-                                for (let subscription of subscriptions) {
-                                    if (Number.isInteger(subscription.StateUpdated)) {
-                                        subscription.StateUpdated = new Date(subscription.StateUpdated * 1000).toISOString();
-                                    }
-                                    subscription.ARN = local_node_id;
-                                    subscription.name = local_node_name;
-                                }
-                                local_alarm_data = local_alarm_data.concat(subscriptions);
-                                resolve();
-                            });
-                        }));
-                    })(member_value, node, require, alarm_data, promises);
-                }
+            for (let alarm of selected_alarms) {
+                promises.push(alarms.unsubscribe_from_alarm(alarm.Region, alarm.AlarmName, selected_nodes));
             }
             Promise.all(promises).then(function () {
-                alarm_tabulator.replaceData(alarm_data);
-                alert_tabulator.replaceData(alert_data);
-                alarm_tabulator.redraw();
-                alert_tabulator.redraw();
+                refresh();
             });
-        };
-
-        var diagram_selection_listener = function (diagram, event) {
-            if (event.nodes.length > 0) {
-                last_displayed = event.nodes[0];
-                display_selected_node(event.nodes[0]);
-            }
-        };
-
-        var tile_view_click_listener = function (name, members) {
-            if (tile_view.selected()) {
-                last_displayed = {
-                    name: name,
-                    members: members
-                };
-                display_selected_tile(name, members);
-            }
-        };
-
-        var event_alert_listener = function () {
-            refresh();
-        };
-
-        tile_view.add_selection_callback(tile_view_click_listener);
-
-        event_alerts.add_callback(event_alert_listener);
-
-        alarms.add_callback(event_alert_listener);
-
-        diagrams.add_selection_callback(function (diagram, event) {
-            if (event.nodes.length > 0) {
-                display_selected_node(event.nodes[0]);
-            }
-        });
-
-        $("#monitor-subscribe-alarms-button").click(function () {
-            require("app/ui/alarms_menu").show_alarm_subscribe_dialog();
         });
+});
 
-        $("#monitor-unsubscribe-alarms-button").click(function () {
-            var selected_alarms = alarm_tabulator.getSelectedData();
-            var diagram = diagrams.shown();
-            var selected_nodes = diagram.network.getSelectedNodes();
-            // console.log(selected_alarms);
-            confirmation.show("Unsubscribe selected node" +
-                (selected_nodes.length == 1 ? "" : "s") + " from " +
-                selected_alarms.length + " alarm" +
-                (selected_alarms.length == 1 ? "" : "s") + "?",
-                function () {
-                    var promises = [];
-                    for (let alarm of selected_alarms) {
-                        promises.push(alarms.unsubscribe_from_alarm(alarm.Region, alarm.AlarmName, selected_nodes));
-                    }
-                    Promise.all(promises).then(function () {
-                        refresh();
-                    });
-                });
-        });
 
-
-        function unsubscribe_alarm(row) {
-            console.log(row);
-            var node = model.nodes.get(row.ARN);
-            if (node) {
-                // prompt if the node still exists
-                confirmation.show(`Unsubscribe node ${node.name} from alarm ${row.AlarmName} in region ${row.Region}?`,
-                    function () {
-                        alarms.unsubscribe_from_alarm(row.Region, row.AlarmName, [row.ARN]).then(function () {
-                            refresh();
-                        });
-                    });
-            } else {
-                // otherwise just delete it
+function unsubscribe_alarm(row) {
+    console.log(row);
+    var node = model.nodes.get(row.ARN);
+    if (node) {
+        // prompt if the node still exists
+        confirmation.show(`Unsubscribe node ${node.name} from alarm ${row.AlarmName} in region ${row.Region}?`,
+            function () {
                 alarms.unsubscribe_from_alarm(row.Region, row.AlarmName, [row.ARN]).then(function () {
                     refresh();
                 });
-            }
-        }
-
-        function navigate_to_alarm(row) {
-            console.log(row);
-            const url = `https://console.aws.amazon.com/cloudwatch/home?region=${row.Region}#alarmsV2:alarm/${row.AlarmName}?`;
-            window.open(url, '_blank').focus();
-        }
-
-        function show_formatted_cloudwatch_event_data(row) {
-            console.log(row);
-            renderjson.set_show_to_level(1);
-            var data = JSON.parse(row.data);
-            var formatted_json = renderjson(data);
-            $("#cloudwatch_event_data_json").html(formatted_json);
-            $("#cloudwatch_event_data_view_modal").modal("show");
-        }
-
-        function refresh() {
-            if (typeof last_displayed == 'string') {
-                display_selected_node(last_displayed);
-            } else if (typeof last_displayed == 'object') {
-                display_selected_tile(last_displayed.name, last_displayed.members);
-            }
-        }
-
-        return {
-            refresh: refresh
-        };
-
-    });
\ No newline at end of file
+            });
+    } else {
+        // otherwise just delete it
+        alarms.unsubscribe_from_alarm(row.Region, row.AlarmName, [row.ARN]).then(function () {
+            refresh();
+        });
+    }
+}
+
+function navigate_to_alarm(row) {
+    console.log(row);
+    const url = `https://console.aws.amazon.com/cloudwatch/home?region=${row.Region}#alarmsV2:alarm/${row.AlarmName}?`;
+    window.open(url, '_blank').focus();
+}
+
+function show_formatted_cloudwatch_event_data(row) {
+    console.log(row);
+    renderjson.set_show_to_level(1);
+    var data = JSON.parse(row.data);
+    var formatted_json = renderjson(data);
+    $("#cloudwatch_event_data_json").html(formatted_json);
+    $("#cloudwatch_event_data_view_modal").modal("show");
+}
+
+export function refresh() {
+    if (typeof last_displayed == 'string') {
+        display_selected_node(last_displayed);
+    } else if (typeof last_displayed == 'object') {
+        display_selected_tile(last_displayed.name, last_displayed.members);
+    }
+}
diff --git a/source/html/js/app/ui/nodes_menu.js b/source/html/js/app/ui/nodes_menu.js
index d1865061..d75187bf 100644
--- a/source/html/js/app/ui/nodes_menu.js
+++ b/source/html/js/app/ui/nodes_menu.js
@@ -1,102 +1,99 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["lodash", "jquery", "app/ui/util", "app/ui/layout", "app/ui/alert", "app/ui/diagrams"],
-    function(_, $, ui_util, layout, alert, diagrams) {
+import * as ui_util from "./util.js";
+import * as layout from "./layout.js";
+import * as alert from "./alert.js";
+import * as diagrams from "./diagrams.js";
 
-        var selected_alarm_arn = [];
 
-        var view_name = "global";
+$("#nodes_layout_vertical").on("click", function () {
+    var shown = diagrams.shown();
+    if (shown) {
+        shown.layout_vertical(true);
+    }
+});
 
-        $("#nodes_layout_vertical").on("click", function(event) {
-            var shown = diagrams.shown();
-            if (shown) {
-                shown.layout_vertical(true);
-            }
-        });
-
-        $("#nodes_layout_horizontal").on("click", function(event) {
-            var shown = diagrams.shown();
-            if (shown) {
-                shown.layout_horizontal(true);
-            }
-        });
+$("#nodes_layout_horizontal").on("click", function () {
+    var shown = diagrams.shown();
+    if (shown) {
+        shown.layout_horizontal(true);
+    }
+});
 
-        $("#nodes_layout_isolated").on("click", function(event) {
-            var shown = diagrams.shown();
-            if (shown) {
-                shown.layout_isolated(true);
-            }
-        });
+$("#nodes_layout_isolated").on("click", function () {
+    var shown = diagrams.shown();
+    if (shown) {
+        shown.layout_isolated(true);
+    }
+});
 
-        $("#nodes_select_downstream").on("click", function(event) {
-            var shown = diagrams.shown();
-            if (shown) {
-                var selected = shown.network.getSelectedNodes();
-                var connected = [];
-                for (let node_id of selected) {
-                    if (!connected.includes(node_id)) {
-                        connected.push(node_id);
-                        ui_util.get_downstream(shown.edges, node_id, connected);
-                    }
-                }
-                console.log(connected);
-                alert.show(connected.length + " selected");
-                shown.network.selectNodes(connected);
+$("#nodes_select_downstream").on("click", function () {
+    var shown = diagrams.shown();
+    if (shown) {
+        var selected = shown.network.getSelectedNodes();
+        var connected = [];
+        for (let node_id of selected) {
+            if (!connected.includes(node_id)) {
+                connected.push(node_id);
+                ui_util.get_downstream(shown.edges, node_id, connected);
             }
-        });
+        }
+        console.log(connected);
+        alert.show(connected.length + " selected");
+        shown.network.selectNodes(connected);
+    }
+});
 
-        $("#nodes_select_upstream").on("click", function(event) {
-            var shown = diagrams.shown();
-            if (shown) {
-                var selected = shown.network.getSelectedNodes();
-                var connected = [];
-                for (let node_id of selected) {
-                    if (!connected.includes(node_id)) {
-                        connected.push(node_id);
-                        ui_util.get_upstream(shown.edges, node_id, connected);
-                    }
-                }
-                console.log(connected);
-                alert.show(connected.length + " selected");
-                shown.network.selectNodes(connected);
+$("#nodes_select_upstream").on("click", function () {
+    var shown = diagrams.shown();
+    if (shown) {
+        var selected = shown.network.getSelectedNodes();
+        var connected = [];
+        for (let node_id of selected) {
+            if (!connected.includes(node_id)) {
+                connected.push(node_id);
+                ui_util.get_upstream(shown.edges, node_id, connected);
             }
-        });
+        }
+        console.log(connected);
+        alert.show(connected.length + " selected");
+        shown.network.selectNodes(connected);
+    }
+});
 
-        $("#nodes_align_vertical").on("click", function(event) {
-            var diagram = diagrams.shown();
-            if (diagram) {
-                var selected = diagram.network.getSelectedNodes();
-                var positions = diagram.network.getPositions(selected);
-                var average_x = 0;
-                for (let node_id of Object.keys(positions)) {
-                    average_x += positions[node_id].x;
-                }
-                average_x = Math.round(average_x / selected.length);
-                for (let node_id of Object.keys(positions)) {
-                    diagram.network.moveNode(node_id, average_x, positions[node_id].y);
-                }
-                layout.save_layout(diagram, Object.keys(positions));
-                alert.show("Alignment complete");
-            }
-        });
-
-        $("#nodes_align_horizontal").on("click", function(event) {
-            var diagram = diagrams.shown();
-            if (diagram) {
-                var selected = diagram.network.getSelectedNodes();
-                var positions = diagram.network.getPositions(selected);
-                var average_y = 0;
-                for (let node_id of Object.keys(positions)) {
-                    average_y += positions[node_id].y;
-                }
-                average_y = Math.round(average_y / selected.length);
-                for (let node_id of Object.keys(positions)) {
-                    diagram.network.moveNode(node_id, positions[node_id].x, average_y);
-                }
-                layout.save_layout(diagram, Object.keys(positions));
-                alert.show("Alignment complete");
-            }
-        });
+$("#nodes_align_vertical").on("click", function () {
+    var diagram = diagrams.shown();
+    if (diagram) {
+        var selected = diagram.network.getSelectedNodes();
+        var positions = diagram.network.getPositions(selected);
+        var average_x = 0;
+        for (let node_id of Object.keys(positions)) {
+            average_x += positions[node_id].x;
+        }
+        average_x = Math.round(average_x / selected.length);
+        for (let node_id of Object.keys(positions)) {
+            diagram.network.moveNode(node_id, average_x, positions[node_id].y);
+        }
+        layout.save_layout(diagram, Object.keys(positions));
+        alert.show("Alignment complete");
+    }
+});
 
-    });
\ No newline at end of file
+$("#nodes_align_horizontal").on("click", function () {
+    var diagram = diagrams.shown();
+    if (diagram) {
+        var selected = diagram.network.getSelectedNodes();
+        var positions = diagram.network.getPositions(selected);
+        var average_y = 0;
+        for (let node_id of Object.keys(positions)) {
+            average_y += positions[node_id].y;
+        }
+        average_y = Math.round(average_y / selected.length);
+        for (let node_id of Object.keys(positions)) {
+            diagram.network.moveNode(node_id, positions[node_id].x, average_y);
+        }
+        layout.save_layout(diagram, Object.keys(positions));
+        alert.show("Alignment complete");
+    }
+});
diff --git a/source/html/js/app/ui/overlays/alarms_only.js b/source/html/js/app/ui/overlays/alarms_only.js
index 189f3594..54f36c17 100644
--- a/source/html/js/app/ui/overlays/alarms_only.js
+++ b/source/html/js/app/ui/overlays/alarms_only.js
@@ -1,25 +1,24 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
+import * as alarms from "../../alarms.js";
+import * as tools from "./overlay_tools.js";
 
-define(["jquery", "lodash", "app/alarms", "app/ui/overlays/overlay_tools"],
-    function($, _, alarms, tools) {
+export const match_type = "Default Overlay for Alarms";
 
-        var match_type = "Default Overlay for Alarms";
+const decorate_alarms = function (drawing, font_size, width, height, id) {
+    let alarm_count = 0;
+    for (let item of alarms.get_subscribers_with_alarms().current) {
+        if (item.ResourceArn == id) {
+            alarm_count += item.AlarmCount;
+        }
+    }
+    tools.set_alarm_text(alarm_count, drawing, font_size, width);
+};
 
-        var decorate_alarms = function(drawing, font_size, width, height, id) {
-            var alarm_count = 0;
-            for (let item of alarms.get_subscribers_with_alarms().current) {
-                if (item.ResourceArn == id) {
-                    alarm_count += item.AlarmCount;
-                }
-            }
-            tools.set_alarm_text(alarm_count, drawing, font_size, width);
-        };
+export const decorate = function (drawing, font_size, width, height, id) {
+    decorate_alarms(drawing, font_size, width, height, id);
+};
 
-        var decorate = function(drawing, font_size, width, height, id) {
-            decorate_alarms(drawing, font_size, width, height, id);
-        };
+export const informational = false;
 
-        return { match_type, decorate, informational: false };
-    });
\ No newline at end of file
diff --git a/source/html/js/app/ui/overlays/ec2_instance.js b/source/html/js/app/ui/overlays/ec2_instance.js
index 91afc1e0..858542d4 100644
--- a/source/html/js/app/ui/overlays/ec2_instance.js
+++ b/source/html/js/app/ui/overlays/ec2_instance.js
@@ -1,35 +1,38 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/events", "app/alarms", "app/ui/overlays/overlay_tools", "app/model"],
-    function($, _, alert_events, alarms, tools, model) {
-
-        var match_type = "EC2 Instance";
-
-        var decorate_alarms = function(drawing, font_size, width, height, id) {
-            var alarm_count = 0;
-            for (let item of alarms.get_subscribers_with_alarms().current) {
-                if (item.ResourceArn == id) {
-                    alarm_count += item.AlarmCount;
-                }
-            }
-            tools.set_alarm_text(alarm_count, drawing, font_size, width);
-        };
-
-        var decorate_information = function(drawing, font_size, width, height, id) {
-            var node = model.nodes.get(id);
-            if (node) {
-                if (node.data.Tags.Name) {
-                    let computer_name = node.data.Tags.Name;
-                    tools.set_info_text(computer_name, drawing, font_size, width, "Name");
-                }
-            }
-        };
-
-        var decorate = function(drawing, font_size, width, height, id) {
-            decorate_alarms(drawing, font_size, width, height, id);
-            decorate_information(drawing, font_size, width, height, id);
-        };
-
-        return { match_type, decorate, informational: true };
-    });
\ No newline at end of file
+
+import * as alarms from "../../alarms.js";
+import * as tools from "./overlay_tools.js";
+import * as model from "../../model.js";
+
+
+export const match_type = "EC2 Instance";
+
+const decorate_alarms = function (drawing, font_size, width, height, id) {
+    let alarm_count = 0;
+    for (let item of alarms.get_subscribers_with_alarms().current) {
+        if (item.ResourceArn == id) {
+            alarm_count += item.AlarmCount;
+        }
+    }
+    tools.set_alarm_text(alarm_count, drawing, font_size, width);
+};
+
+const decorate_information = function (drawing, font_size, width, height, id) {
+    const node = model.nodes.get(id);
+    if (node) {
+        if (node.data.Tags.Name) {
+            let computer_name = node.data.Tags.Name;
+            tools.set_info_text(computer_name, drawing, font_size, width, "Name");
+        }
+    }
+};
+
+export const decorate = function (drawing, font_size, width, height, id) {
+    decorate_alarms(drawing, font_size, width, height, id);
+    decorate_information(drawing, font_size, width, height, id);
+};
+
+
+export const informational = true;
diff --git a/source/html/js/app/ui/overlays/mediaconnect_flow.js b/source/html/js/app/ui/overlays/mediaconnect_flow.js
index bcf58b4e..fcf78d24 100644
--- a/source/html/js/app/ui/overlays/mediaconnect_flow.js
+++ b/source/html/js/app/ui/overlays/mediaconnect_flow.js
@@ -1,47 +1,50 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/events", "app/alarms", "app/ui/overlays/overlay_tools", "app/model"],
-    function($, _, alert_events, alarms, tools, model) {
-
-        var match_type = "MediaConnect Flow";
-
-        var decorate_alarms = function(drawing, font_size, width, height, id) {
-            var alarm_count = 0;
-            for (let item of alarms.get_subscribers_with_alarms().current) {
-                if (item.ResourceArn == id) {
-                    alarm_count += item.AlarmCount;
-                }
-            }
-            tools.set_alarm_text(alarm_count, drawing, font_size, width);
-        };
-
-        var decorate_information = function(drawing, font_size, width, height, id) {
-            var node = model.nodes.get(id);
-            if (node) {
-                var source_type = "Standard";
-                if (node.data.Source.EntitlementArn) {
-                    source_type = "Entitlement";
-                }
-                tools.set_info_text(source_type, drawing, font_size, width);
-            }
-        };
-
-        var decorate_alerts = function(drawing, font_size, width, height, id) {
-            var alert_count = 0;
-            for (let item of alert_events.get_cached_events().current_mediaconnect) {
-                if (item.resource_arn == id) {
-                    alert_count += 1;
-                }
-            }
-            tools.set_event_text(alert_count, drawing, font_size, width, "Alerts");
-        };
-
-        var decorate = function(drawing, font_size, width, height, id) {
-            decorate_alarms(drawing, font_size, width, height, id);
-            decorate_alerts(drawing, font_size, width, height, id);
-            decorate_information(drawing, font_size, width, height, id);
-        };
-
-        return { match_type, decorate, informational: true };
-    });
\ No newline at end of file
+
+import * as alert_events from "../../events.js";
+import * as alarms from "../../alarms.js";
+import * as tools from "./overlay_tools.js";
+import * as model from "../../model.js";
+
+
+export const match_type = "MediaConnect Flow";
+
+const decorate_alarms = function (drawing, font_size, width, height, id) {
+    let alarm_count = 0;
+    for (let item of alarms.get_subscribers_with_alarms().current) {
+        if (item.ResourceArn == id) {
+            alarm_count += item.AlarmCount;
+        }
+    }
+    tools.set_alarm_text(alarm_count, drawing, font_size, width);
+};
+
+const decorate_information = function (drawing, font_size, width, height, id) {
+    const node = model.nodes.get(id);
+    if (node) {
+        let source_type = "Standard";
+        if (node.data.Source.EntitlementArn) {
+            source_type = "Entitlement";
+        }
+        tools.set_info_text(source_type, drawing, font_size, width);
+    }
+};
+
+const decorate_alerts = function (drawing, font_size, width, height, id) {
+    let alert_count = 0;
+    for (let item of alert_events.get_cached_events().current_mediaconnect) {
+        if (item.resource_arn == id) {
+            alert_count += 1;
+        }
+    }
+    tools.set_event_text(alert_count, drawing, font_size, width, "Alerts");
+};
+
+export const decorate = function (drawing, font_size, width, height, id) {
+    decorate_alarms(drawing, font_size, width, height, id);
+    decorate_alerts(drawing, font_size, width, height, id);
+    decorate_information(drawing, font_size, width, height, id);
+};
+
+export const informational = true;
diff --git a/source/html/js/app/ui/overlays/medialive_channel.js b/source/html/js/app/ui/overlays/medialive_channel.js
index c2d38429..dc96e449 100644
--- a/source/html/js/app/ui/overlays/medialive_channel.js
+++ b/source/html/js/app/ui/overlays/medialive_channel.js
@@ -1,39 +1,43 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(['jquery', 'lodash', 'app/events', 'app/alarms', 'app/ui/overlays/overlay_tools'],
-    function($, _, alert_events, alarms, tools) {
-        const match_type = 'MediaLive Channel';
-
-        const decorate_alarms = function(drawing, font_size, width, height, id) {
-            let alarm_count = 0;
-            const cached_alarms = alarms.get_subscribers_with_alarms();
-
-            for (let item of cached_alarms.current) {
-                if (item.ResourceArn == id) {
-                    alarm_count += item.AlarmCount;
-                }
-            }
-            tools.set_alarm_text(alarm_count, drawing, font_size, width);
-        };
-
-        const decorate_events = function(drawing, font_size, width, height, id, data) {
-            const isSinglePipeline = tools.has_single_pipeline(id, data);
-            let pipeline_alerts = isSinglePipeline ? 0 : [0, 0];
-            for (let item of alert_events.get_cached_events().current_medialive) {
-                if (item.resource_arn == id) {
-                    if (isSinglePipeline) pipeline_alerts += 1;
-                    else pipeline_alerts[parseInt(item.detail.pipeline)] += 1;
-                }
-            }
-
-            tools.set_event_text(pipeline_alerts, drawing, font_size, width);
-        };
-
-        const decorate = function(drawing, font_size, width, height, id, data) {
-            decorate_alarms(drawing, font_size, width, height, id);
-            decorate_events(drawing, font_size, width, height, id, data);
-        };
-
-        return { match_type, decorate, informational: true };
-    });
\ No newline at end of file
+
+import * as alert_events from "../../events.js";
+import * as alarms from "../../alarms.js";
+import * as tools from "./overlay_tools.js";
+
+
+export const match_type = 'MediaLive Channel';
+
+const decorate_alarms = function (drawing, font_size, width, height, id) {
+    let alarm_count = 0;
+    const cached_alarms = alarms.get_subscribers_with_alarms();
+
+    for (let item of cached_alarms.current) {
+        if (item.ResourceArn == id) {
+            alarm_count += item.AlarmCount;
+        }
+    }
+    tools.set_alarm_text(alarm_count, drawing, font_size, width);
+};
+
+const decorate_events = function (drawing, font_size, width, height, id, data) {
+    const isSinglePipeline = tools.has_single_pipeline(id, data);
+    let pipeline_alerts = isSinglePipeline ? 0 : [0, 0];
+    for (let item of alert_events.get_cached_events().current_medialive) {
+        if (item.resource_arn == id) {
+            if (isSinglePipeline) pipeline_alerts += 1;
+            else pipeline_alerts[parseInt(item.detail.pipeline)] += 1;
+        }
+    }
+
+    tools.set_event_text(pipeline_alerts, drawing, font_size, width);
+};
+
+export const decorate = function (drawing, font_size, width, height, id, data) {
+    decorate_alarms(drawing, font_size, width, height, id);
+    decorate_events(drawing, font_size, width, height, id, data);
+};
+
+
+export const informational = true;
diff --git a/source/html/js/app/ui/overlays/medialive_multiplex.js b/source/html/js/app/ui/overlays/medialive_multiplex.js
index 42e08b71..07101dd7 100644
--- a/source/html/js/app/ui/overlays/medialive_multiplex.js
+++ b/source/html/js/app/ui/overlays/medialive_multiplex.js
@@ -1,37 +1,39 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(['jquery', 'lodash', 'app/events', 'app/alarms', 'app/ui/overlays/overlay_tools'],
-    function($, _, alert_events, alarms, tools) {
-        const match_type = 'MediaLive Multiplex';
-
-        const decorate_alarms = function(drawing, font_size, width, height, id) {
-            let alarm_count = 0;
-            for (let item of alarms.get_subscribers_with_alarms().current) {
-                if (item.ResourceArn == id) {
-                    alarm_count += item.AlarmCount;
-                }
-            }
-            tools.set_alarm_text(alarm_count, drawing, font_size, width);
-        };
-
-        const decorate_events = function(drawing, font_size, width, height, id, data) {
-            const isSinglePipeline = tools.has_single_pipeline(id, data);
-            let pipeline_alerts = isSinglePipeline ? 0 : [0, 0];
-            for (let item of alert_events.get_cached_events().current_medialive) {
-                if (item.resource_arn == id) {
-                    if (isSinglePipeline) pipeline_alerts += 1;
-                    else pipeline_alerts[parseInt(item.detail.pipeline)] += 1;
-                }
-            }
-
-            tools.set_event_text(pipeline_alerts, drawing, font_size, width);
-        };
-
-        const decorate = function(drawing, font_size, width, height, id, data) {
-            decorate_alarms(drawing, font_size, width, height, id);
-            decorate_events(drawing, font_size, width, height, id, data);
-        };
-
-        return { match_type, decorate, informational: true };
-    });
\ No newline at end of file
+
+import * as alert_events from "../../events.js";
+import * as alarms from "../../alarms.js";
+import * as tools from "./overlay_tools.js";
+
+export const match_type = 'MediaLive Multiplex';
+
+const decorate_alarms = function (drawing, font_size, width, height, id) {
+    let alarm_count = 0;
+    for (let item of alarms.get_subscribers_with_alarms().current) {
+        if (item.ResourceArn == id) {
+            alarm_count += item.AlarmCount;
+        }
+    }
+    tools.set_alarm_text(alarm_count, drawing, font_size, width);
+};
+
+const decorate_events = function (drawing, font_size, width, height, id, data) {
+    const isSinglePipeline = tools.has_single_pipeline(id, data);
+    let pipeline_alerts = isSinglePipeline ? 0 : [0, 0];
+    for (let item of alert_events.get_cached_events().current_medialive) {
+        if (item.resource_arn == id) {
+            if (isSinglePipeline) pipeline_alerts += 1;
+            else pipeline_alerts[parseInt(item.detail.pipeline)] += 1;
+        }
+    }
+
+    tools.set_event_text(pipeline_alerts, drawing, font_size, width);
+};
+
+export const decorate = function (drawing, font_size, width, height, id, data) {
+    decorate_alarms(drawing, font_size, width, height, id);
+    decorate_events(drawing, font_size, width, height, id, data);
+};
+
+export const informational = true;
diff --git a/source/html/js/app/ui/overlays/overlay_tools.js b/source/html/js/app/ui/overlays/overlay_tools.js
index dd7818db..c67b93a0 100644
--- a/source/html/js/app/ui/overlays/overlay_tools.js
+++ b/source/html/js/app/ui/overlays/overlay_tools.js
@@ -1,66 +1,68 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(['jquery', 'lodash', 'app/events', 'app/alarms'], function($, _, alert_events, alarms) {
-    const info_y = 80;
-    const event_y = 125;
-    const alarm_y = 154;
-    const generateText = (type, data) => `${type}: ${JSON.stringify(data)}`;
+import * as alert_events from "../../events.js";
 
-    const fetch_running_pipelines_count = data => {
-        let pipelines_count = 0;
 
-        if (_.has(data, 'ChannelClass')) {
-            if (data.ChannelClass === 'STANDARD') pipelines_count = 2;
-            else pipelines_count = 1;
-        } else if (_.has(data, 'Destinations')) pipelines_count = data.Destinations.length;
+const info_y = 80;
+const event_y = 125;
+const alarm_y = 154;
+const generateText = (type, data) => `${type}: ${JSON.stringify(data)}`;
 
-        return pipelines_count;
-    };
+const fetch_running_pipelines_count = data => {
+    let pipelines_count = 0;
 
-    const has_single_pipeline = (id, data) => {
-        const pipelines = {};
-        let pipelines_count = 0;
+    if (_.has(data, 'ChannelClass')) {
+        if (data.ChannelClass === 'STANDARD') pipelines_count = 2;
+        else pipelines_count = 1;
+    } else if (_.has(data, 'Destinations')) pipelines_count = data.Destinations.length;
 
-        if (data) {
-            if (_.has(data, 'PipelinesRunningCount') && data.PipelinesRunningCount > 1)
-                return false;
+    return pipelines_count;
+};
 
-            pipelines_count = fetch_running_pipelines_count(data);
+const has_single_pipeline = (id, data) => {
+    const pipelines = {};
+    let pipelines_count = 0;
 
-            if (pipelines_count > 1)
-                return false;
-        }
+    if (data) {
+        if (_.has(data, 'PipelinesRunningCount') && data.PipelinesRunningCount > 1)
+            return false;
 
-        const cached_events = alert_events.get_cached_events();
+        pipelines_count = fetch_running_pipelines_count(data);
 
-        for (let item of cached_events.current_medialive) {
-            if (item.resource_arn == id) pipelines[parseInt(item.detail.pipeline)] += 1;
-            if (_.keys(pipelines).length > 1 && pipelines_count > 1) return false;
-        }
+        if (pipelines_count > 1)
+            return false;
+    }
 
-        return true;
-    };
+    const cached_events = alert_events.get_cached_events();
 
-    const draw_font_set_position = function(typeLabel, font_size, width) {
-        typeLabel.font({ family: 'Arial', size: font_size });
-        typeLabel.cx(width / 2);
-    };
+    for (let item of cached_events.current_medialive) {
+        if (item.resource_arn == id) pipelines[parseInt(item.detail.pipeline)] += 1;
+        if (_.keys(pipelines).length > 1 && pipelines_count > 1) return false;
+    }
 
-    const set_alarm_text = function(data, drawing, font_size, width) {
-        const typeLabel = drawing.text(generateText('Active alarms', data)).y(alarm_y);
-        draw_font_set_position(typeLabel, font_size, width);
-    };
+    return true;
+};
 
-    const set_event_text = function(data, drawing, font_size, width, text = 'Pipeline alerts') {
-        const typeLabel = drawing.text(generateText(text, data)).y(event_y);
-        draw_font_set_position(typeLabel, font_size, width);
-    };
+const draw_font_set_position = function (typeLabel, font_size, width) {
+    typeLabel.font({ family: 'Arial', size: font_size });
+    typeLabel.cx(width / 2);
+};
 
-    const set_info_text = function(data, drawing, font_size, width, label = "Type") {
-        const typeLabel = drawing.text(generateText(label, data)).y(info_y);
-        draw_font_set_position(typeLabel, font_size, width);
-    };
+const set_alarm_text = function (data, drawing, font_size, width) {
+    const typeLabel = drawing.text(generateText('Active alarms', data)).y(alarm_y);
+    draw_font_set_position(typeLabel, font_size, width);
+};
+
+const set_event_text = function (data, drawing, font_size, width, text = 'Pipeline alerts') {
+    const typeLabel = drawing.text(generateText(text, data)).y(event_y);
+    draw_font_set_position(typeLabel, font_size, width);
+};
+
+const set_info_text = function (data, drawing, font_size, width, label = "Type") {
+    const typeLabel = drawing.text(generateText(label, data)).y(info_y);
+    draw_font_set_position(typeLabel, font_size, width);
+};
+
+export { set_alarm_text, set_event_text, set_info_text, has_single_pipeline };
 
-    return { set_alarm_text, set_event_text, set_info_text, has_single_pipeline };
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/overlays/overlays.js b/source/html/js/app/ui/overlays/overlays.js
new file mode 100644
index 00000000..53bde8ba
--- /dev/null
+++ b/source/html/js/app/ui/overlays/overlays.js
@@ -0,0 +1,16 @@
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+       SPDX-License-Identifier: Apache-2.0 */
+
+import * as overlay_mediaconnect_flow from "./mediaconnect_flow.js";
+import * as overlay_medialive_channel from "./medialive_channel.js";
+import * as overlay_medialive_multiplex from "./medialive_multiplex.js";
+import * as overlay_ssm_managed_instance from "./ssm_managed_instance.js";
+import * as overlay_ec2_instance from "./ec2_instance.js";
+import * as overlay_alarms_only from "./alarms_only.js";
+
+export const all = [
+    overlay_mediaconnect_flow, overlay_medialive_channel,
+    overlay_medialive_multiplex, overlay_ssm_managed_instance, overlay_ec2_instance
+];
+
+export const default_overlay = overlay_alarms_only;
diff --git a/source/html/js/app/ui/overlays/ssm_managed_instance.js b/source/html/js/app/ui/overlays/ssm_managed_instance.js
index 9346f5a8..4facff8d 100644
--- a/source/html/js/app/ui/overlays/ssm_managed_instance.js
+++ b/source/html/js/app/ui/overlays/ssm_managed_instance.js
@@ -1,35 +1,37 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/events", "app/alarms", "app/ui/overlays/overlay_tools", "app/model"],
-    function($, _, alert_events, alarms, tools, model) {
-
-        var match_type = "SSM Managed Instance";
-
-        var decorate_alarms = function(drawing, font_size, width, height, id) {
-            var alarm_count = 0;
-            for (let item of alarms.get_subscribers_with_alarms().current) {
-                if (item.ResourceArn == id) {
-                    alarm_count += item.AlarmCount;
-                }
-            }
-            tools.set_alarm_text(alarm_count, drawing, font_size, width);
-        };
-
-        var decorate_information = function(drawing, font_size, width, height, id) {
-            var node = model.nodes.get(id);
-            if (node) {
-                if (node.data.Data["AWS:InstanceInformation"].Content[0].ComputerName) {
-                    let computer_name = node.data.Data["AWS:InstanceInformation"].Content[0].ComputerName;
-                    tools.set_info_text(computer_name, drawing, font_size, width, "Name");
-                }
-            }
-        };
-
-        var decorate = function(drawing, font_size, width, height, id) {
-            decorate_alarms(drawing, font_size, width, height, id);
-            decorate_information(drawing, font_size, width, height, id);
-        };
-
-        return { match_type, decorate, informational: true };
-    });
\ No newline at end of file
+import * as alarms from "../../alarms.js";
+import * as tools from "./overlay_tools.js";
+import * as model from "../../model.js";
+
+
+export const match_type = "SSM Managed Instance";
+
+var decorate_alarms = function (drawing, font_size, width, height, id) {
+    var alarm_count = 0;
+    for (let item of alarms.get_subscribers_with_alarms().current) {
+        if (item.ResourceArn == id) {
+            alarm_count += item.AlarmCount;
+        }
+    }
+    tools.set_alarm_text(alarm_count, drawing, font_size, width);
+};
+
+var decorate_information = function (drawing, font_size, width, height, id) {
+    var node = model.nodes.get(id);
+    if (node) {
+        if (node.data.Data["AWS:InstanceInformation"].Content[0].ComputerName) {
+            let computer_name = node.data.Data["AWS:InstanceInformation"].Content[0].ComputerName;
+            tools.set_info_text(computer_name, drawing, font_size, width, "Name");
+        }
+    }
+};
+
+export const decorate = function (drawing, font_size, width, height, id) {
+    decorate_alarms(drawing, font_size, width, height, id);
+    decorate_information(drawing, font_size, width, height, id);
+};
+
+export const informational = true;
+
diff --git a/source/html/js/app/ui/search_view.js b/source/html/js/app/ui/search_view.js
index ccdebb3e..7a5c2e61 100644
--- a/source/html/js/app/ui/search_view.js
+++ b/source/html/js/app/ui/search_view.js
@@ -1,235 +1,238 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/search", "app/ui/util", "app/ui/tile_view", "app/ui/diagrams"],
-    function($, model, search, ui_util, tile_view, diagrams) {
 
-        var tab_id = "nav-search-tab";
-
-        const blinks = 10;
-
-        var show = function() {
-            $("#" + tab_id).tab('show');
-        };
-
-        function display_search_results(results) {
-            display_results_search_text(results);
-            display_results_model_matches(results);
-            display_results_diagram_name_matches(results);
-            display_results_diagram_contents_matches(results);
-            display_results_tile_name_matches(results);
-            display_results_tile_contents_matches(results);
-        }
-
-        function display_results_search_text(results) {
-            console.log(results);
-            $("#search-text-div").text(results.text);
-        }
-
-        function display_results_model_matches(results) {
-            $("#inventory-match-count").text(results.model.length);
-            var html = `<ol>`;
-            for (let node of results.model) {
-                var id = ui_util.makeid();
-                var line = `<li><b>${node.title}:</b> <a href="#" title="Drag to a Diagram or Tile" data-node-id="${node.id}" draggable="true" id="${id}">${node.name}</a></li>`;
-                html += line;
-            }
-            var close = `</ol>`;
-            html += close;
-            $("#global-model-search").html(html);
-        }
-
-        function display_results_diagram_name_matches(results) {
-            var anchor_handler_data = [];
-            $("#diagram-names-match-count").text(results.diagram_names.length);
-            var html = `<ol>`;
-            for (let name of results.diagram_names) {
-                var id = ui_util.makeid();
-                var line = `<li><a href="#" data-diagram-name="${name}" draggable="true" title="Click or Drag to a Diagram or Tile" id="${id}">${name}</a></li>`;
-                html += line;
-                anchor_handler_data.push({
-                    diagram: diagrams.get_by_name(name),
-                    anchor_id: id
-                });
-            }
-            var close = `</ol>`;
-            html += close;
-            $("#diagram-names-match").html(html);
-            for (let item of anchor_handler_data) {
-                var anchor_id = item.anchor_id;
-                var eventClosure = function(local_item, local_console) {
-                    var diagram = local_item.diagram;
-                    return function(event) {
-                        if (!diagram.shown()) {
-                            diagram.network.once("afterDrawing", (function() {
-                                return function() {
-                                    local_console.log(diagram);
-                                    diagram.network.fit();
-                                };
-                            })());
-                            diagram.show();
-                        } else {
+import * as model from "../model.js";
+import * as search from "../search.js";
+import * as ui_util from "./util.js";
+import * as tile_view from "./tile_view.js";
+import * as diagrams from "./diagrams.js";
+
+
+var tab_id = "nav-search-tab";
+
+const blinks = 10;
+
+var show = function () {
+    $("#" + tab_id).tab('show');
+};
+
+function display_search_results(results) {
+    display_results_search_text(results);
+    display_results_model_matches(results);
+    display_results_diagram_name_matches(results);
+    display_results_diagram_contents_matches(results);
+    display_results_tile_name_matches(results);
+    display_results_tile_contents_matches(results);
+}
+
+function display_results_search_text(results) {
+    console.log(results);
+    $("#search-text-div").text(results.text);
+}
+
+function display_results_model_matches(results) {
+    $("#inventory-match-count").text(results.model.length);
+    var html = `<ol>`;
+    for (let node of results.model) {
+        var id = ui_util.makeid();
+        var line = `<li><b>${node.title}:</b> <a href="#" title="Drag to a Diagram or Tile" data-node-id="${node.id}" draggable="true" id="${id}">${node.name}</a></li>`;
+        html += line;
+    }
+    var close = `</ol>`;
+    html += close;
+    $("#global-model-search").html(html);
+}
+
+function display_results_diagram_name_matches(results) {
+    var anchor_handler_data = [];
+    $("#diagram-names-match-count").text(results.diagram_names.length);
+    var html = `<ol>`;
+    for (let name of results.diagram_names) {
+        var id = ui_util.makeid();
+        var line = `<li><a href="#" data-diagram-name="${name}" draggable="true" title="Click or Drag to a Diagram or Tile" id="${id}">${name}</a></li>`;
+        html += line;
+        anchor_handler_data.push({
+            diagram: diagrams.get_by_name(name),
+            anchor_id: id
+        });
+    }
+    var close = `</ol>`;
+    html += close;
+    $("#diagram-names-match").html(html);
+    for (let item of anchor_handler_data) {
+        var anchor_id = item.anchor_id;
+        var eventClosure = function (local_item, local_console) {
+            var diagram = local_item.diagram;
+            return function () {
+                if (!diagram.shown()) {
+                    diagram.network.once("afterDrawing", (function () {
+                        return function () {
+                            local_console.log(diagram);
                             diagram.network.fit();
-                        }
-                    };
-                }(item, console);
-                $("#" + anchor_id).on("click", eventClosure);
-            }
-        }
-
-        function display_results_diagram_contents_matches(results) {
-            var anchor_handler_data = [];
-            $("#diagram-contents-match-count").text(results.diagram_contents.length);
-            var html = `<ol>`;
-            for (let entry of results.diagram_contents) {
-                var name = entry.diagram;
-                for (let node_id of entry.found) {
-                    var node = model.nodes.get(node_id);
-                    var id = ui_util.makeid();
-                    var line = `<li><b>${name}: </b>${node.title}: <a href="#" data-node-id="${node.id}" draggable="true" title="Click or Drag to a Diagram or Tile" id="${id}">${node.name}</a></li>`;
-                    html += line;
-                    anchor_handler_data.push({
-                        diagram: diagrams.get_by_name(name),
-                        node_id: node.id,
-                        anchor_id: id
-                    });
+                        };
+                    })());
+                    diagram.show();
+                } else {
+                    diagram.network.fit();
                 }
-            }
-            var close = `</ol>`;
-            html += close;
-            $("#diagram-contents-match").html(html);
-            for (let item of anchor_handler_data) {
-                let anchor_id = item.anchor_id;
-                let eventClosure = function(local_item, local_console) {
-                    let diagram = local_item.diagram;
-                    let node_id = local_item.node_id;
-                    return function(event) {
-                        if (!diagram.shown()) {
-                            diagram.network.once("afterDrawing", (function() {
-                                return function() {
-                                    local_console.log(diagram);
-                                    local_console.log(node_id);
-                                    diagram.network.fit({
-                                        nodes: [node_id],
-                                        animation: true
-                                    });
-                                    diagram.blink(blinks, node_id);
-                                };
-                            })());
-                            diagram.show();
-                        } else {
+            };
+        }(item, console);
+        $("#" + anchor_id).on("click", eventClosure);
+    }
+}
+
+function display_results_diagram_contents_matches(results) {
+    var anchor_handler_data = [];
+    $("#diagram-contents-match-count").text(results.diagram_contents.length);
+    var html = `<ol>`;
+    for (let entry of results.diagram_contents) {
+        var name = entry.diagram;
+        for (let node_id of entry.found) {
+            var node = model.nodes.get(node_id);
+            var id = ui_util.makeid();
+            var line = `<li><b>${name}: </b>${node.title}: <a href="#" data-node-id="${node.id}" draggable="true" title="Click or Drag to a Diagram or Tile" id="${id}">${node.name}</a></li>`;
+            html += line;
+            anchor_handler_data.push({
+                diagram: diagrams.get_by_name(name),
+                node_id: node.id,
+                anchor_id: id
+            });
+        }
+    }
+    var close = `</ol>`;
+    html += close;
+    $("#diagram-contents-match").html(html);
+    for (let item of anchor_handler_data) {
+        let anchor_id = item.anchor_id;
+        let eventClosure = function (local_item, local_console) {
+            let diagram = local_item.diagram;
+            let node_id = local_item.node_id;
+            return function () {
+                if (!diagram.shown()) {
+                    diagram.network.once("afterDrawing", (function () {
+                        return function () {
+                            local_console.log(diagram);
+                            local_console.log(node_id);
                             diagram.network.fit({
                                 nodes: [node_id],
                                 animation: true
                             });
                             diagram.blink(blinks, node_id);
-                        }
-                    };
-                }(item, console);
-                $("#" + anchor_id).on("click", eventClosure);
-            }
-        }
-
-        function display_results_tile_name_matches(results) {
-            var anchor_handler_data = [];
-            $("#tile-names-match-count").text(results.tile_names.length);
-            var html = `<ol>`;
-            for (let name of results.tile_names) {
-                var id = ui_util.makeid();
-                var line = `<li><a href="#" title="Click or Drag to a Diagram or Tile" data-tile-name="${name}" draggable="true" id="${id}">${name}</a></li>`;
-                html += line;
-                anchor_handler_data.push({
-                    tile: name,
-                    anchor_id: id
-                });
-            }
-            var close = `</ol>`;
-            html += close;
-            $("#tile-names-match").html(html);
-            for (let item of anchor_handler_data) {
-                let anchor_id = item.anchor_id;
-                let eventClosure = function(local_item, local_jq, local_tile_view) {
-                    var name = local_item.tile;
-                    return function(event) {
-                        local_jq("#channel-tiles-tab").tab('show');
-                        local_tile_view.blink(name);
-                    };
-                }(item, $, tile_view);
-                $("#" + anchor_id).on("click", eventClosure);
-            }
-        }
-
-        function display_results_tile_contents_matches(results) {
-            var anchor_handler_data = [];
-            $("#tile-contents-match-count").text(results.tile_contents.length);
-            var html = `<ol>`;
-            for (let entry of results.tile_contents) {
-                var name = entry.tile;
-                for (let node_id of entry.found) {
-                    var node = model.nodes.get(node_id);
-                    var id = ui_util.makeid();
-                    var line = `<li><b><a href="#" title="Click or Drag to a Diagram or Tile" data-tile-name="${name}" draggable="true" id="${id}">${name}</a>: </b>${node.title}: <a href="#" draggable="true" title="Drag to a Diagram or Tile" data-node-id="${node.id}">${node.name}</a></li>`;
-                    html += line;
-                    anchor_handler_data.push({
-                        tile: name,
-                        anchor_id: id
-                    });
-                }
-            }
-            var close = `</ol>`;
-            html += close;
-            $("#tile-contents-match").html(html);
-            for (let item of anchor_handler_data) {
-                let anchor_id = item.anchor_id;
-                let eventClosure = function(local_item, local_jq, local_tile_view) {
-                    let name = local_item.tile;
-                    return function(event) {
-                        local_jq("#channel-tiles-tab").tab('show');
-                        local_tile_view.blink(name);
-                    };
-                }(item, $, tile_view);
-                $("#" + anchor_id).on("click", eventClosure);
-            }
-        }
-
-        function search_now() {
-            show();
-            var text = $("#search_input").val();
-            var useful = new RegExp("\\S+");
-            if (useful.test(text)) {
-                search.search(text).then(function(results) {
-                    display_search_results(results);
-                    // build the results compartment
-                });
-            } else {
-                console.log("whitespace only");
-            }
-        }
-
-        // enter key handler
-        $("#search_input,#search_input_2").keypress(function(event) {
-            // console.log(event);
-            var keycode = (event.keyCode ? event.keyCode : event.which);
-            if (keycode == '13') {
-                if (event.target.id == "search_input") {
-                    $("#search_input_2").val($("#search_input").val());
+                        };
+                    })());
+                    diagram.show();
                 } else {
-                    $("#search_input").val($("#search_input_2").val());
+                    diagram.network.fit({
+                        nodes: [node_id],
+                        animation: true
+                    });
+                    diagram.blink(blinks, node_id);
                 }
-                search_now();
-            }
+            };
+        }(item, console);
+        $("#" + anchor_id).on("click", eventClosure);
+    }
+}
+
+function display_results_tile_name_matches(results) {
+    var anchor_handler_data = [];
+    $("#tile-names-match-count").text(results.tile_names.length);
+    var html = `<ol>`;
+    for (let name of results.tile_names) {
+        var id = ui_util.makeid();
+        var line = `<li><a href="#" title="Click or Drag to a Diagram or Tile" data-tile-name="${name}" draggable="true" id="${id}">${name}</a></li>`;
+        html += line;
+        anchor_handler_data.push({
+            tile: name,
+            anchor_id: id
         });
-
-        $("#search-now-button,#search-now-button-2").click(function(event) {
-            // console.log(event);
-            if (event.target.id == "search-now-button") {
-                $("#search_input_2").val($("#search_input").val());
-            } else {
-                $("#search_input").val($("#search_input_2").val());
-            }
-            search_now();
-            return false;
+    }
+    var close = `</ol>`;
+    html += close;
+    $("#tile-names-match").html(html);
+    for (let item of anchor_handler_data) {
+        let anchor_id = item.anchor_id;
+        let eventClosure = function (local_item, local_jq, local_tile_view) {
+            var name = local_item.tile;
+            return function () {
+                local_jq("#channel-tiles-tab").tab('show');
+                local_tile_view.blink(name);
+            };
+        }(item, $, tile_view);
+        $("#" + anchor_id).on("click", eventClosure);
+    }
+}
+
+function display_results_tile_contents_matches(results) {
+    var anchor_handler_data = [];
+    $("#tile-contents-match-count").text(results.tile_contents.length);
+    var html = `<ol>`;
+    for (let entry of results.tile_contents) {
+        var name = entry.tile;
+        for (let node_id of entry.found) {
+            var node = model.nodes.get(node_id);
+            var id = ui_util.makeid();
+            var line = `<li><b><a href="#" title="Click or Drag to a Diagram or Tile" data-tile-name="${name}" draggable="true" id="${id}">${name}</a>: </b>${node.title}: <a href="#" draggable="true" title="Drag to a Diagram or Tile" data-node-id="${node.id}">${node.name}</a></li>`;
+            html += line;
+            anchor_handler_data.push({
+                tile: name,
+                anchor_id: id
+            });
+        }
+    }
+    var close = `</ol>`;
+    html += close;
+    $("#tile-contents-match").html(html);
+    for (let item of anchor_handler_data) {
+        let anchor_id = item.anchor_id;
+        let eventClosure = function (local_item, local_jq, local_tile_view) {
+            let name = local_item.tile;
+            return function () {
+                local_jq("#channel-tiles-tab").tab('show');
+                local_tile_view.blink(name);
+            };
+        }(item, $, tile_view);
+        $("#" + anchor_id).on("click", eventClosure);
+    }
+}
+
+function search_now() {
+    show();
+    var text = $("#search_input").val();
+    var useful = new RegExp("\\S+");
+    if (useful.test(text)) {
+        search.search(text).then(function (results) {
+            display_search_results(results);
+            // build the results compartment
         });
+    } else {
+        console.log("whitespace only");
+    }
+}
+
+// enter key handler
+$("#search_input,#search_input_2").keypress(function (event) {
+    // console.log(event);
+    var keycode = (event.keyCode ? event.keyCode : event.which);
+    if (keycode == '13') {
+        if (event.target.id == "search_input") {
+            $("#search_input_2").val($("#search_input").val());
+        } else {
+            $("#search_input").val($("#search_input_2").val());
+        }
+        search_now();
+    }
+});
+
+$("#search-now-button,#search-now-button-2").click(function (event) {
+    // console.log(event);
+    if (event.target.id == "search-now-button") {
+        $("#search_input_2").val($("#search_input").val());
+    } else {
+        $("#search_input").val($("#search_input_2").val());
+    }
+    search_now();
+    return false;
+});
 
-
-    });
\ No newline at end of file
diff --git a/source/html/js/app/ui/selected_item_view.js b/source/html/js/app/ui/selected_item_view.js
index 2514ed3d..b101704d 100644
--- a/source/html/js/app/ui/selected_item_view.js
+++ b/source/html/js/app/ui/selected_item_view.js
@@ -1,146 +1,146 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/channels", "app/ui/tile_view", "app/ui/util", "app/ui/diagrams"],
-    function($, model, channels, tile_view, ui_util, diagrams) {
-
-        var data_div_id = "nav-data";
-        var alerts_div_id = "nav-alerts";
-        var alarms_div_id = "nav-alarms";
-        var events_div_id = "nav-events";
-
-        var data_tab_id = "nav-data-tab";
-        var alerts_tab_id = "nav-alerts-tab";
-        var alarms_tab_id = "nav-alarms-tab";
-        var events_tab_id = "nav-events-tab";
-
-        const blinks = 10;
-
-        var show = function() {
-            $("#" + data_tab_id).tab("show");
-        };
-
-        var display_selected_nodes = function(diagram, node_ids) {
-            var node = model.nodes.get(node_ids[0]);
-            var found_on = diagrams.have_all(node.id);
-            // console.log(found_on);
-            var diagram_links = "";
-            var diagram_link_ids = [];
-            for (let diagram of found_on) {
-                var id = ui_util.makeid();
-                var html = `<a href="#" data-diagram-name="${diagram.name}" draggable="true" id="${id}">${diagram.name}</a>&nbsp;&nbsp;&nbsp;&nbsp;`;
-                diagram_link_ids.push({
+import * as model from "../model.js";
+import * as channels from "../channels.js";
+import * as tile_view from "./tile_view.js";
+import * as ui_util from "./util.js";
+import * as diagrams from "./diagrams.js";
+
+
+var data_div_id = "nav-data";
+var alerts_div_id = "nav-alerts";
+var alarms_div_id = "nav-alarms";
+var events_div_id = "nav-events";
+
+var data_tab_id = "nav-data-tab";
+var alerts_tab_id = "nav-alerts-tab";
+var alarms_tab_id = "nav-alarms-tab";
+var events_tab_id = "nav-events-tab";
+
+const blinks = 10;
+
+var display_selected_nodes = function (diagram, node_ids) {
+    var node = model.nodes.get(node_ids[0]);
+    var found_on = diagrams.have_all(node.id);
+    // console.log(found_on);
+    var diagram_links = "";
+    var diagram_link_ids = [];
+    for (let diagram of found_on) {
+        var id = ui_util.makeid();
+        var html = `<a href="#" data-diagram-name="${diagram.name}" draggable="true" id="${id}">${diagram.name}</a>&nbsp;&nbsp;&nbsp;&nbsp;`;
+        diagram_link_ids.push({
+            id: id,
+            node_id: node.id,
+            diagram: diagram
+        });
+        diagram_links += html;
+    }
+    var diagram_html = `<p class="card-text small text-muted mb-0 pb-0"><b>Diagrams:</b>&nbsp;&nbsp;${diagram_links}</p>`;
+    channels.arn_to_channels(node.id).then(function (tile_names) {
+        var channel_tile_link_ids = [];
+        var tile_html = "";
+        if (tile_names.length > 0) {
+            var tile_links = "";
+            for (let name of tile_names) {
+                let id = ui_util.makeid();
+                channel_tile_link_ids.push({
                     id: id,
-                    node_id: node.id,
-                    diagram: diagram
+                    name: name
                 });
-                diagram_links += html;
+                let html = `<a href="#" data-tile-name="${name}" draggable="true" id="${id}">${name}</a>&nbsp;&nbsp;&nbsp;&nbsp;`;
+                tile_links = tile_links + html;
             }
-            var diagram_html = `<p class="card-text small text-muted mb-0 pb-0"><b>Diagrams:</b>&nbsp;&nbsp;${diagram_links}</p>`;
-            channels.arn_to_channels(node.id).then(function(tile_names) {
-                var channel_tile_link_ids = [];
-                var tile_html = "";
-                if (tile_names.length > 0) {
-                    var tile_links = "";
-                    for (let name of tile_names) {
-                        let id = ui_util.makeid();
-                        channel_tile_link_ids.push({
-                            id: id,
-                            name: name
-                        });
-                        let html = `<a href="#" data-tile-name="${name}" draggable="true" id="${id}">${name}</a>&nbsp;&nbsp;&nbsp;&nbsp;`;
-                        tile_links = tile_links + html;
-                    }
-                    tile_html = `<p class="card-text small text-muted mb-0 pb-0"><b>Tiles:</b>&nbsp;&nbsp;${tile_links}</p>`;
-                }
-                var cache_html = "";
-                if (node.cache_update != 0) {
-                    var updated = new Date();
-                    updated.setTime(Number.parseInt(node.cache_update) * 1000);
-                    cache_html = `<p class="card-text small text-muted mt-0 pt-0"><b>Updated:</b> ${updated.toString()}</p>`;
-                }
-                var data = node.data;
-                // console.log(data);
-                // $("#search_input").val("");
-                // $("#nav-data-subtitle").html(node.title);
-                renderjson.set_icons("+", "-");
-                renderjson.set_show_to_level(1);
-                let html = `
+            tile_html = `<p class="card-text small text-muted mb-0 pb-0"><b>Tiles:</b>&nbsp;&nbsp;${tile_links}</p>`;
+        }
+        var cache_html = "";
+        if (node.cache_update != 0) {
+            var updated = new Date();
+            updated.setTime(Number.parseInt(node.cache_update) * 1000);
+            cache_html = `<p class="card-text small text-muted mt-0 pt-0"><b>Updated:</b> ${updated.toString()}</p>`;
+        }
+        var data = node.data;
+        // console.log(data);
+        // $("#search_input").val("");
+        // $("#nav-data-subtitle").html(node.title);
+        renderjson.set_icons("+", "-");
+        renderjson.set_show_to_level(1);
+        let html = `
                     <h6 class="card-subtitle mb-2 text-muted" id="${data_div_id}-subtitle">${node.header}&nbsp;&nbsp;&nbsp;&nbsp;<small><a target="_blank" class="mb-2" href="${node.console_link()}">AWS Console</a>&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" class="mb-2" href="${node.cloudwatch_link()}">AWS CloudWatch</a></small></h6>
                     ${tile_html}
                     ${diagram_html}
                     ${cache_html}
                     <p class="card-text small" id="${data_div_id}-text"></p>
                     `;
-                // if (empty) {
-                $("#" + data_div_id).empty();
-                // }
-                $("#" + data_div_id).append(html);
-                var json = renderjson(data);
-                $("#" + data_div_id + "-text")[0].appendChild(
-                    json
-                );
-                // attach click handlers to tile links
-                for (let link of channel_tile_link_ids) {
-                    let id = link.id;
-                    let eventClosure = (function(local_tile_view, local_link, local_jq) {
-                        var local_view = local_tile_view;
-                        var local_name = local_link.name;
-                        return function(event) {
-                            var tab = local_jq("#channel-tiles-tab");
-                            if (tab.attr("aria-selected") == "false") {
-                                local_jq("#channel-tiles-tab").tab("show");
-                            }
-                            local_view.blink(local_name);
-                        };
-                    })(tile_view, link, $);
-                    $("#" + id).on("click", eventClosure);
-                }
-                // attach click handlers to diagram links
-                for (let item of diagram_link_ids) {
-                    let id = item.id;
-                    let eventClosure = function(local_item) {
-                        var local_diagram = local_item.diagram;
-                        var local_node_id = local_item.node_id;
-                        var local_blinks = blinks;
-                        return function(event) {
-                            local_diagram.network.once("afterDrawing", (function() {
-                                return function() {
-                                    local_diagram.network.fit({
-                                        nodes: [local_node_id],
-                                        animation: true
-                                    });
-                                    local_diagram.blink(local_blinks, local_node_id);
-                                };
-                            })());
-                            local_diagram.show();
+        // if (empty) {
+        $("#" + data_div_id).empty();
+        // }
+        $("#" + data_div_id).append(html);
+        var json = renderjson(data);
+        $("#" + data_div_id + "-text")[0].appendChild(
+            json
+        );
+        // attach click handlers to tile links
+        for (let link of channel_tile_link_ids) {
+            let id = link.id;
+            let eventClosure = (function (local_tile_view, local_link, local_jq) {
+                var local_view = local_tile_view;
+                var local_name = local_link.name;
+                return function () {
+                    var tab = local_jq("#channel-tiles-tab");
+                    if (tab.attr("aria-selected") == "false") {
+                        local_jq("#channel-tiles-tab").tab("show");
+                    }
+                    local_view.blink(local_name);
+                };
+            })(tile_view, link, $);
+            $("#" + id).on("click", eventClosure);
+        }
+        // attach click handlers to diagram links
+        for (let item of diagram_link_ids) {
+            let id = item.id;
+            let eventClosure = function (local_item) {
+                var local_diagram = local_item.diagram;
+                var local_node_id = local_item.node_id;
+                var local_blinks = blinks;
+                return function () {
+                    local_diagram.network.once("afterDrawing", (function () {
+                        return function () {
+                            local_diagram.network.fit({
+                                nodes: [local_node_id],
+                                animation: true
+                            });
+                            local_diagram.blink(local_blinks, local_node_id);
                         };
-                    }(item);
-                    $("#" + id).on("click", eventClosure);
-                }
-            });
-            // if node is managed instance, alerts and cloudwatch events don't apply
-            // if medialive channel/multiplex or mediaconnect flow, alerts apply
-            if (node_ids[0].includes("managed-instance")) {
-                show_elements([data_div_id, alarms_div_id, data_tab_id, alarms_tab_id]);
-                hide_elements([alerts_div_id, events_div_id, alerts_tab_id, events_tab_id]);
-            } else if ((node_ids[0].includes("medialive") && node_ids[0].includes("channel")) || node_ids[0].includes("multiplex") || node_ids[0].includes("mediaconnect")) {
-                show_elements([data_div_id, alerts_div_id, alarms_div_id, events_div_id, data_tab_id, alarms_tab_id, alerts_tab_id, events_tab_id]);
-            } else {
-                show_elements([data_div_id, alarms_div_id, events_div_id, data_tab_id, alarms_tab_id, events_tab_id]);
-                hide_elements([alerts_div_id, alerts_tab_id]);
-            }
-        };
-
-
-        var display_selected_edges = function(diagram, edges) {
-            var edge = model.edges.get(edges[0]);
-            var toNode = model.nodes.get(edge.to);
-            var fromNode = model.nodes.get(edge.from);
-            $("#" + data_div_id).empty();
-            renderjson.set_icons("+", "-");
-            renderjson.set_show_to_level(1);
-            var html = `
+                    })());
+                    local_diagram.show();
+                };
+            }(item);
+            $("#" + id).on("click", eventClosure);
+        }
+    });
+    // if node is managed instance, alerts and cloudwatch events don't apply
+    // if medialive channel/multiplex or mediaconnect flow, alerts apply
+    if (node_ids[0].includes("managed-instance")) {
+        show_elements([data_div_id, alarms_div_id, data_tab_id, alarms_tab_id]);
+        hide_elements([alerts_div_id, events_div_id, alerts_tab_id, events_tab_id]);
+    } else if ((node_ids[0].includes("medialive") && node_ids[0].includes("channel")) || node_ids[0].includes("multiplex") || node_ids[0].includes("mediaconnect")) {
+        show_elements([data_div_id, alerts_div_id, alarms_div_id, events_div_id, data_tab_id, alarms_tab_id, alerts_tab_id, events_tab_id]);
+    } else {
+        show_elements([data_div_id, alarms_div_id, events_div_id, data_tab_id, alarms_tab_id, events_tab_id]);
+        hide_elements([alerts_div_id, alerts_tab_id]);
+    }
+};
+
+
+var display_selected_edges = function (diagram, edges) {
+    var edge = model.edges.get(edges[0]);
+    var toNode = model.nodes.get(edge.to);
+    var fromNode = model.nodes.get(edge.from);
+    $("#" + data_div_id).empty();
+    renderjson.set_icons("+", "-");
+    renderjson.set_show_to_level(1);
+    var html = `
                 <h6 class="card-subtitle mb-2 text-muted">Connection from ${fromNode.title} to ${toNode.title}</h6>
                 <p class="card-text small" id="${data_div_id}-data"></p>
                 <h6 class="card-subtitle mb-2 text-muted">From</h6>
@@ -148,95 +148,87 @@ define(["jquery", "app/model", "app/channels", "app/ui/tile_view", "app/ui/util"
                 <h6 class="card-subtitle mb-2 text-muted">To</h6>
                 <p class="card-text small" id="${data_div_id}-to"></p>
                 `;
-            $("#" + data_div_id).append(html);
-            $("#" + data_div_id + "-data").append(renderjson(edge.data));
-            $("#" + data_div_id + "-from").append(renderjson(fromNode.data));
-            $("#" + data_div_id + "-to").append(renderjson(toNode.data));
-            show_elements([data_div_id, data_tab_id]);
-            hide_elements([alarms_div_id, alerts_div_id, events_div_id, alarms_tab_id, alerts_tab_id, events_tab_id]);
-        };
-
-
-        var display_selected_tile = function(name, members) {
-            renderjson.set_icons("+", "-");
-            renderjson.set_show_to_level(2);
-            var data = [];
-            var missing = [];
-            for (let member_value of members) {
-                var node = model.nodes.get(member_value.id);
-                if (node) {
-                    data.push(node.data);
-                } else {
-                    missing.push(member_value.id);
-                }
-            }
-            data.push({ "missing-nodes": missing });
-            var html = `
+    $("#" + data_div_id).append(html);
+    $("#" + data_div_id + "-data").append(renderjson(edge.data));
+    $("#" + data_div_id + "-from").append(renderjson(fromNode.data));
+    $("#" + data_div_id + "-to").append(renderjson(toNode.data));
+    show_elements([data_div_id, data_tab_id]);
+    hide_elements([alarms_div_id, alerts_div_id, events_div_id, alarms_tab_id, alerts_tab_id, events_tab_id]);
+};
+
+
+var display_selected_tile = function (name, members) {
+    renderjson.set_icons("+", "-");
+    renderjson.set_show_to_level(2);
+    var data = [];
+    var missing = [];
+    for (let member_value of members) {
+        var node = model.nodes.get(member_value.id);
+        if (node) {
+            data.push(node.data);
+        } else {
+            missing.push(member_value.id);
+        }
+    }
+    data.push({ "missing-nodes": missing });
+    var html = `
             <h6 class="card-subtitle mb-2 text-muted" id="${data_div_id}-subtitle">Tile: ${name}</h6>
             <p class="card-text small" id="${data_div_id}-text"></p>
             `;
-            $("#" + data_div_id).empty();
-            $("#" + data_div_id).append(html);
-            $("#" + data_div_id + "-text")[0].appendChild(
-                renderjson(data)
-            );
-            show_elements([data_tab_id, alarms_tab_id, alerts_tab_id, data_div_id, alarms_div_id, alerts_div_id]);
-            hide_elements([events_tab_id, events_div_id]);
-        };
-
-        var display_no_selection = function() {
-            hide_elements([data_tab_id, alarms_tab_id, alerts_tab_id, events_tab_id, data_div_id, alerts_div_id, alarms_div_id, events_div_id]);
-        };
-
-        // accepts a list of element IDs to hide
-        var hide_elements = function(element_list) {
-            for (let id in element_list) {
-                $("#" + element_list[id]).addClass("d-none");
-            }
-        };
-
-        // accepts a list of element IDs to show
-        var show_elements = function(element_list) {
-            // iterate through tabs to show
-            for (let id in element_list) {
-                $("#" + element_list[id]).removeClass("d-none");
-            }
-        };
-
-
-        var tile_view_listener = function(name, members) {
-            var selected = tile_view.selected();
-            if (selected === name) {
-                // show();
-                display_selected_tile(name, members);
-            } else if (selected) {
-                channels.retrieve_channel(selected).then((members) => {
-                    display_selected_tile(selected, members);
-                });
-            } else {
-                display_no_selection();
-            }
-        };
-
-        diagrams.add_selection_callback(function(diagram, event) {
-            // console.log(event);
-            if (event.nodes.length > 0) {
-                display_selected_nodes(diagram, event.nodes);
-            } else
-            if (event.edges.length > 0) {
-                display_selected_edges(diagram, event.edges);
-            } else
+    $("#" + data_div_id).empty();
+    $("#" + data_div_id).append(html);
+    $("#" + data_div_id + "-text")[0].appendChild(
+        renderjson(data)
+    );
+    show_elements([data_tab_id, alarms_tab_id, alerts_tab_id, data_div_id, alarms_div_id, alerts_div_id]);
+    hide_elements([events_tab_id, events_div_id]);
+};
+
+var display_no_selection = function () {
+    hide_elements([data_tab_id, alarms_tab_id, alerts_tab_id, events_tab_id, data_div_id, alerts_div_id, alarms_div_id, events_div_id]);
+};
+
+// accepts a list of element IDs to hide
+var hide_elements = function (element_list) {
+    for (let id in element_list) {
+        $("#" + element_list[id]).addClass("d-none");
+    }
+};
+
+// accepts a list of element IDs to show
+var show_elements = function (element_list) {
+    // iterate through tabs to show
+    for (let id in element_list) {
+        $("#" + element_list[id]).removeClass("d-none");
+    }
+};
+
+
+var tile_view_listener = function (name, members) {
+    var selected = tile_view.selected();
+    if (selected === name) {
+        // show();
+        display_selected_tile(name, members);
+    } else if (selected) {
+        channels.retrieve_channel(selected).then((members) => {
+            display_selected_tile(selected, members);
+        });
+    } else {
+        display_no_selection();
+    }
+};
+
+diagrams.add_selection_callback(function (diagram, event) {
+    // console.log(event);
+    if (event.nodes.length > 0) {
+        display_selected_nodes(diagram, event.nodes);
+    } else
+        if (event.edges.length > 0) {
+            display_selected_edges(diagram, event.edges);
+        } else
             if (event.nodes.length == 0 && event.edges.length == 0) {
                 display_no_selection();
             }
-        });
+});
 
-        tile_view.add_selection_callback(tile_view_listener);
-
-        // return {
-        //     "display_selected_tile": display_selected_tile,
-        //     "display_selected_nodes": display_selected_nodes,
-        //     "display_selected_edge": display_selected_edge,
-        //     "show": show
-        // }
-    });
\ No newline at end of file
+tile_view.add_selection_callback(tile_view_listener);
diff --git a/source/html/js/app/ui/settings_menu.js b/source/html/js/app/ui/settings_menu.js
index e94f8ea7..18e3ad3e 100644
--- a/source/html/js/app/ui/settings_menu.js
+++ b/source/html/js/app/ui/settings_menu.js
@@ -1,366 +1,373 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/connections", "app/regions", "app/ui/util", "app/api_check", "app/settings", "app/ui/confirmation", "lodash"],
-    function ($, connections, regions_promise, util, api_check, settings, confirmation, _) {
-
-        const history_to_buttons = function (history) {
-            const local_jq = $;
-            let index = 0;
-            for (let item of history) {
-                // console.log(item);
-                const id = util.makeid();
-                const url = item[0];
-                const apiKey = item[1];
-                if (index == 0) {
-                    $("#input_endpoint_url").val(url);
-                    $("#input_endpoint_key").val(apiKey);
-                }
-                const html = `<a class="dropdown-item" id="${id}" href="#">${url}</a>`;
-                $("#connectionHistoryDropdownMenu").append(html);
-                // add event handlers to each item to populate dialog fields
-                $("#" + id).click((function () {
-                    let u = url;
-                    let k = apiKey;
-                    return function (event) {
-                        local_jq("#input_endpoint_url").val(u);
-                        local_jq("#input_endpoint_key").val(k);
-                        local_jq("#connectionRemember").prop("checked", true);
-                    };
-                })());
-                index++;
-            }
-        };
-
-        const updateConnectionDialog = function () {
-            const history = Array.from(connections.get_remembered());
-            // clear the existing dropdown items
-            $("#connectionHistoryDropdownMenu").empty();
-            // replace with current history items
-            if (history.length > 0) {
-                $("#connectionHistoryMenuButton").removeClass("disabled");
-                history_to_buttons(history);
-            } else {
-                $("#connectionHistoryMenuButton").addClass("disabled");
-            }
-            const current = connections.get_current();
-            if (current) {
-                $("#input_endpoint_url").val(current[0]);
-                $("#input_endpoint_key").val(current[1]);
-            }
-        };
-
-        // add a save handler for the connection dialog
-        $("#save_endpoint_connection").on("click", () => {
-            try {
-                // trim the string, normalize the link, remove any trailing slash
-                const endpoint = new URI($("#input_endpoint_url").val().trim()).normalize().toString().replace(/\/+$/, "");
-                console.log("normalized to " + endpoint);
-                const apiKey = $("#input_endpoint_key").val().trim();
-                const store_locally = $("#connectionRemember").prop("checked");
-                console.log("store locally = " + store_locally);
-                // test the provided info before saving
-                api_check.ping(endpoint, apiKey).then(function (response) {
-                    // test worked
-                    console.log(response);
-                    connections.set_current(endpoint, apiKey, store_locally);
-                    hideConnectionDialog();
-                    updateConnectionDialog();
-                    require("app/statemachine").getToolStateMachine().connectionChanged();
-                }).catch(function (error) {
-                    console.log(error);
-                    setConnectionAlert("There is a problem with this endpoint connection, please fix it");
-                });
-            } catch (error) {
-                console.log(error);
-                setConnectionAlert("There is a problem with this endpoint connection, please fix it");
-            }
-            return true;
-        });
-        $("#connectionRemember").on("change", function () {
-            const store_locally = $("#connectionRemember").prop("checked");
-            console.log("store locally = " + store_locally);
-        });
-        $("#cancel_endpoint_connection").on("click", () => {
-            console.log("cancel connection");
-            const current_connection = connections.get_current();
-            if (current_connection) {
-                console.log("testing last connection used");
-                // test current connection with api-ping
-                const endpoint = current_connection[0];
-                const api_key = current_connection[1];
-                api_check.ping(endpoint, api_key).then(function (response) {
-                    // test worked
-                    console.log("still working");
-                    hideConnectionDialog();
-                    require("app/statemachine").getToolStateMachine().connectionExists();
-                }).catch(function (error) {
-                    console.log("not working");
-                    setConnectionAlert("There is a problem with this endpoint connection, please fix it");
-                    require("app/statemachine").getToolStateMachine().noSavedConnection();
-                });
-            } else {
-                setConnectionAlert("You must define at least one endpoint connection to continue");
+
+import * as connections from "../connections.js";
+import * as regions from "../regions.js";
+import * as util from "./util.js";
+import * as api_check from "../api_check.js";
+import * as settings from "../settings.js";
+import * as confirmation from "./confirmation.js";
+
+
+const history_to_buttons = function (history) {
+    const local_jq = $;
+    let index = 0;
+    for (let item of history) {
+        // console.log(item);
+        const id = util.makeid();
+        const url = item[0];
+        const apiKey = item[1];
+        if (index == 0) {
+            $("#input_endpoint_url").val(url);
+            $("#input_endpoint_key").val(apiKey);
+        }
+        const html = `<a class="dropdown-item" id="${id}" href="#">${url}</a>`;
+        $("#connectionHistoryDropdownMenu").append(html);
+        // add event handlers to each item to populate dialog fields
+        $("#" + id).click((function () {
+            let u = url;
+            let k = apiKey;
+            return function () {
+                local_jq("#input_endpoint_url").val(u);
+                local_jq("#input_endpoint_key").val(k);
+                local_jq("#connectionRemember").prop("checked", true);
+            };
+        })());
+        index++;
+    }
+};
+
+const updateConnectionDialog = function () {
+    const history = Array.from(connections.get_remembered());
+    // clear the existing dropdown items
+    $("#connectionHistoryDropdownMenu").empty();
+    // replace with current history items
+    if (history.length > 0) {
+        $("#connectionHistoryMenuButton").removeClass("disabled");
+        history_to_buttons(history);
+    } else {
+        $("#connectionHistoryMenuButton").addClass("disabled");
+    }
+    const current = connections.get_current();
+    if (current) {
+        $("#input_endpoint_url").val(current[0]);
+        $("#input_endpoint_key").val(current[1]);
+    }
+};
+
+
+const setConnectionAlert = function (message) {
+    const html = `<div id="endpoint_connection_alert" class="m-3 alert alert-danger" role="alert">${message}</div>`;
+    $("#endpoint_connection_alert").replaceWith(html);
+};
+
+const clearConnectionAlert = function () {
+    const html = `<div id="endpoint_connection_alert"></div>`;
+    $("#endpoint_connection_alert").replaceWith(html);
+};
+
+const setRegionSelectionAlert = function (message) {
+    const html = `<div id="region_selection_alert" class="mx-3 mt-3 mb-1 alert alert-danger" role="alert">${message}</div>`;
+    $("#region_selection_alert").replaceWith(html);
+};
+
+const clearRegionSelectionAlert = function () {
+    const html = `<div id="region_selection_alert"></div>`;
+    $("#region_selection_alert").replaceWith(html);
+};
+
+const showConnectionDialog = function () {
+    updateConnectionDialog();
+    $("#endpoint_connection_modal").modal('show');
+};
+
+const hideConnectionDialog = function () {
+    updateConnectionDialog();
+    $("#endpoint_connection_modal").modal('hide');
+};
+
+const setAdvancedSettingsAlert = function (message) {
+    const html = `<div id="advanced_settings_modal_alert" class="m-3 alert alert-danger" role="alert">${message}</div>`;
+    $("#advanced_settings_modal_alert").replaceWith(html);
+};
+
+const clearAdvancedSettingsAlert = function () {
+    const html = `<div id="advanced_settings_modal_alert"></div>`;
+    $("#advanced_settings_modal_alert").replaceWith(html);
+};
+
+const get_inventory_regions = function () {
+    return new Promise(function (resolve) {
+        settings.get("inventory-regions").then(function (data) {
+            if (data == null) {
+                data = [];
             }
-            return true;
+            resolve(data);
         });
+    });
+};
 
-        // add a save handler for the region selection dialog
-        $("#save_region_selections").on("click", () => {
-            regions_promise().then(function (regions) {
-                const toggles = $('.region-button');
-                const selected = [];
-                for (let button of toggles) {
-                    if (button.attributes['aria-pressed'].value == "true") {
-                        selected.push(button.textContent);
-                    }
-                }
-                console.log(selected);
-                if (selected.length === 0) {
-                    setRegionSelectionAlert("You must select at least one region to continue");
+const set_inventory_regions = function (regions) {
+    console.log("updating inventory-regions: " + JSON.stringify(regions));
+    return new Promise(function (resolve, reject) {
+        if (!Array.isArray(regions)) {
+            reject("regions must by an array");
+        } else {
+            if (regions.length == 1 && regions[0].length == 0) {
+                console.log("empty array, removing setting");
+                settings.remove("inventory-regions").then(function () {
+                    resolve();
+                });
+            } else
+                if (regions.length > 0) {
+                    settings.put("inventory-regions", regions.sort()).then(function () {
+                        resolve();
+                    });
                 } else {
-                    regions.set_selected(selected).then(function () {
-                        console.log("we have at least one region selection");
-                        clearRegionSelectionAlert();
-                        hideRegionSelectionDialog();
-                        console.log("region selections saved");
-                        require("app/statemachine").getToolStateMachine().regionsChanged();
+                    console.log("empty array, removing setting");
+                    settings.remove("inventory-regions").then(function () {
+                        resolve();
                     });
                 }
-            }).catch(function (error) {
-                console.log(error);
-            });
-            return true;
-        });
+        }
+    });
+};
 
-        $("#cancel_region_selections").on("click", () => {
-            console.log("cancel region selections");
-            regions_promise().then(function (regions) {
-                if (regions.get_selected().length == 0) {
-                    setRegionSelectionAlert("You must select at least one region to continue");
-                } else {
-                    console.log("we have at least one region selection");
-                    clearRegionSelectionAlert();
-                    hideRegionSelectionDialog();
-                }
-            });
-            return true;
-        });
 
-        const setConnectionAlert = function (message) {
-            const html = `<div id="endpoint_connection_alert" class="m-3 alert alert-danger" role="alert">${message}</div>`;
-            $("#endpoint_connection_alert").replaceWith(html);
-        };
+if (connections.get_current() !== null) {
+    updateConnectionDialog();
+    // updateRegionDialog();
+}
 
-        const clearConnectionAlert = function () {
-            const html = `<div id="endpoint_connection_alert"></div>`;
-            $("#endpoint_connection_alert").replaceWith(html);
-        };
 
-        const setRegionSelectionAlert = function (message) {
-            const html = `<div id="region_selection_alert" class="mx-3 mt-3 mb-1 alert alert-danger" role="alert">${message}</div>`;
-            $("#region_selection_alert").replaceWith(html);
-        };
+// add a save handler for the connection dialog
+$("#save_endpoint_connection").on("click", () => {
+    try {
+        // trim the string, normalize the link, remove any trailing slash
+        const endpoint = new URI($("#input_endpoint_url").val().trim()).normalize().toString().replace(/\/+$/, "");
+        console.log("normalized to " + endpoint);
+        const apiKey = $("#input_endpoint_key").val().trim();
+        const store_locally = $("#connectionRemember").prop("checked");
+        console.log("store locally = " + store_locally);
+        // test the provided info before saving
+        api_check.ping(endpoint, apiKey).then(async function (response) {
+            // test worked
+            console.log(response);
+            connections.set_current(endpoint, apiKey, store_locally);
+            hideConnectionDialog();
+            updateConnectionDialog();
+            const statemachine = await import("../statemachine.js");
+            statemachine.getToolStateMachine().connectionChanged();
+        }).catch(function (error) {
+            console.error(error);
+            setConnectionAlert("There is a problem with this endpoint connection, please fix it");
+        });
+    } catch (error) {
+        console.log(error);
+        setConnectionAlert("There is a problem with this endpoint connection, please fix it");
+    }
+    return true;
+});
 
-        const clearRegionSelectionAlert = function () {
-            const html = `<div id="region_selection_alert"></div>`;
-            $("#region_selection_alert").replaceWith(html);
-        };
+$("#connectionRemember").on("change", function () {
+    const store_locally = $("#connectionRemember").prop("checked");
+    console.log("store locally = " + store_locally);
+});
 
-        const showConnectionDialog = function () {
-            updateConnectionDialog();
-            $("#endpoint_connection_modal").modal('show');
-        };
+$("#cancel_endpoint_connection").on("click", () => {
+    console.log("cancel connection");
+    const current_connection = connections.get_current();
+    if (current_connection) {
+        console.log("testing last connection used");
+        // test current connection with api-ping
+        const endpoint = current_connection[0];
+        const api_key = current_connection[1];
+        api_check.ping(endpoint, api_key).then(function () {
+            // test worked
+            console.log("still working");
+            hideConnectionDialog();
+            import("../statemachine.js").then((statemachine) => {
+                statemachine.getToolStateMachine().connectionExists();
+            });
+        }).catch(function (error) {
+            console.error("not working");
+            console.error(error);
+            setConnectionAlert("There is a problem with this endpoint connection, please fix it");
+            import("../statemachine.js").then((statemachine) => {
+                statemachine.getToolStateMachine().noSavedConnection();
+            });
+        });
+    } else {
+        setConnectionAlert("You must define at least one endpoint connection to continue");
+    }
+    return true;
+});
 
-        const hideConnectionDialog = function () {
-            updateConnectionDialog();
-            $("#endpoint_connection_modal").modal('hide');
-        };
-
-        const showRegionSelectionDialog = function () {
-            updateRegionDialog();
-            $("#region_selection_modal").modal('show');
-        };
-
-        const hideRegionSelectionDialog = function () {
-            updateRegionDialog();
-            $("#region_selection_modal").modal('hide');
-        };
-
-        const setAdvancedSettingsAlert = function (message) {
-            const html = `<div id="advanced_settings_modal_alert" class="m-3 alert alert-danger" role="alert">${message}</div>`;
-            $("#advanced_settings_modal_alert").replaceWith(html);
-        };
-
-        const clearAdvancedSettingsAlert = function () {
-            const html = `<div id="advanced_settings_modal_alert"></div>`;
-            $("#advanced_settings_modal_alert").replaceWith(html);
-        };
-
-        const get_inventory_regions = function () {
-            return new Promise(function (resolve, reject) {
-                settings.get("inventory-regions").then(function (data) {
-                    if (data == null) {
-                        data = [];
-                    }
-                    resolve(data);
+// add a save handler for the region selection dialog
+$("#save_region_selections").on("click", () => {
+    regions.refresh().then(function (module) {
+        const toggles = $('.region-button');
+        const selected = [];
+        for (let button of toggles) {
+            if (button.attributes['aria-pressed'].value == "true") {
+                selected.push(button.textContent);
+            }
+        }
+        console.log(selected);
+        if (selected.length === 0) {
+            setRegionSelectionAlert("You must select at least one region to continue");
+        } else {
+            module.set_selected(selected).then(function () {
+                console.log("we have at least one region selection");
+                clearRegionSelectionAlert();
+                console.log("region selections saved");
+                import("../statemachine.js").then((statemachine) => {
+                    statemachine.getToolStateMachine().regionsChanged();
                 });
             });
-        };
+        }
+    }).catch(function (error) {
+        console.error(error);
+    });
+    return true;
+});
 
-        const set_inventory_regions = function (regions) {
-            console.log("updating inventory-regions: " + JSON.stringify(regions));
-            return new Promise(function (resolve, reject) {
-                if (!Array.isArray(regions)) {
-                    reject("regions must by an array");
-                } else {
-                    if (regions.length == 1 && regions[0].length == 0) {
-                        console.log("empty array, removing setting");
-                        settings.remove("inventory-regions").then(function () {
-                            resolve();
-                        });
-                    } else
-                        if (regions.length > 0) {
-                            settings.put("inventory-regions", regions.sort()).then(function () {
-                                resolve();
-                            });
-                        } else {
-                            console.log("empty array, removing setting");
-                            settings.remove("inventory-regions").then(function () {
-                                resolve();
-                            });
-                        }
-                }
-            });
-        };
+$("#cancel_region_selections").on("click", () => {
+    console.log("cancel region selections");
+    regions.refresh().then(function (module) {
+        if (module.get_selected().length == 0) {
+            setRegionSelectionAlert("You must select at least one region to continue");
+        } else {
+            console.log("we have at least one region selection");
+            clearRegionSelectionAlert();
+        }
+    });
+    return true;
+});
 
-        // only update if we have a connection
-        if (connections.get_current() !== null) {
-            updateConnectionDialog();
-            // updateRegionDialog();
+$("#advanced_settings_button").on("click", async function () {
+    try {
+        clearAdvancedSettingsAlert();
+        // get the current settings
+        const alarm_interval = (await import("../alarms.js")).get_update_interval();
+        const event_interval = (await import("../events.js")).get_update_interval();
+        const tiles_interval = (await import("./tile_view.js")).get_update_interval();
+        const inventory_regions = await get_inventory_regions();
+        const module = await regions.refresh();
+        // populate the dialog
+        $("#advanced-inventory-global").empty();
+        $("#advanced-inventory-regions").empty();
+        const all_regions = module.get_available();
+        for (let item of all_regions) {
+            const id = (item.RegionName == 'global') ? "#advanced-inventory-global" : "#advanced-inventory-regions";
+            const checkbox = `<label class="border-0 mx-2" style="cursor: pointer;">
+                            <input id="${util.makeid()}" type="checkbox" ${inventory_regions.indexOf(item.RegionName) != -1 ? "checked" : ""} value="${item.RegionName}">
+                            ${(item.RegionName == 'global') ? 'Global services (S3, CloudFront)' : item.RegionName}
+                            </label > `;
+            $(id).append(checkbox);
         }
+        $("#advanced-alarm-update-interval").val(Math.round(alarm_interval / 1000));
+        $("#advanced-event-update-interval").val(Math.round(event_interval / 1000));
+        $("#advanced-tiles-refresh-interval").val(Math.round(tiles_interval / 1000));
+        // get the layout method and update the choice
+        const value = await settings.get("layout-method");
+        $("#layout-method-select option[value='" + value.method + "']").prop("selected", true);
+        // show it
+        $("#advanced_settings_modal").modal('show');
+    } catch (error) {
+        console.error(error);
+    }
+});
 
-        $("#advanced_settings_button").on("click", async function (event) {
-            try {
-                clearAdvancedSettingsAlert();
-                // get the current settings
-                const alarm_interval = require("app/alarms").get_update_interval();
-                const event_interval = require("app/events").get_update_interval();
-                const tiles_interval = require("app/ui/tile_view").get_update_interval();
-                const inventory_regions = await get_inventory_regions();
-                const regions = await regions_promise();
-                // populate the dialog
-                $("#advanced-inventory-global").empty();
-                $("#advanced-inventory-regions").empty();
-                const all_regions = regions.get_available();
-                for (let item of all_regions) {
-                    const id = (item.RegionName == 'global') ? "#advanced-inventory-global" : "#advanced-inventory-regions";
-                    const checkbox = `<label class="border-0 mx-2" style="cursor: pointer;">
-                        <input id="${util.makeid()}" type="checkbox" ${inventory_regions.indexOf(item.RegionName) != -1 ? "checked" : ""} value="${item.RegionName}">
-                        ${(item.RegionName == 'global') ? 'Global services (S3, CloudFront)' : item.RegionName}
-                        </label > `;
-                    $(id).append(checkbox);
-                }
-                $("#advanced-alarm-update-interval").val(Math.round(alarm_interval / 1000));
-                $("#advanced-event-update-interval").val(Math.round(event_interval / 1000));
-                $("#advanced-tiles-refresh-interval").val(Math.round(tiles_interval / 1000));
-                // get the layout method and update the choice
-                const value = await settings.get("layout-method");
-                $("#layout-method-select option[value='" + value.method + "']").prop("selected", true);
-                // show it
-                $("#advanced_settings_modal").modal('show');
-            } catch (error) {
-                console.error(error);
-            }
+$("#advanced_settings_modal_save").on("click", async function () {
+    const alarm_interval = Number.parseInt($("#advanced-alarm-update-interval").val());
+    const event_interval = Number.parseInt($("#advanced-event-update-interval").val());
+    const tiles_interval = Number.parseInt($("#advanced-tiles-refresh-interval").val());
+    const regions_array = _.map($("#advanced-inventory-regions input:checked,#advanced-inventory-global input:checked"), 'value');
+    // validate it
+    if (Number.isNaN(alarm_interval)) {
+        setAdvancedSettingsAlert("Please check the CloudWatch Alarm Update Interval");
+    } else if (Number.isNaN(event_interval)) {
+        setAdvancedSettingsAlert("Please check the CloudWatch Event Update Interval");
+    } else if (Number.isNaN(tiles_interval)) {
+        setAdvancedSettingsAlert("Please check the Refresh Tile Inventory Interval");
+    } else if (!Array.isArray(regions_array)) {
+        setAdvancedSettingsAlert("Please check the Inventory Regions input");
+    } else {
+        // clear any dialog alerts
+        clearAdvancedSettingsAlert();
+        // update modules with new values
+        (await import("../alarms.js")).set_update_interval(alarm_interval);
+        (await import("../events.js")).set_update_interval(event_interval);
+        (await import("./tile_view.js")).set_update_interval(tiles_interval);
+        set_inventory_regions(regions_array);
+        // save layout method
+        const method = $("#layout-method-select").val();
+        console.log("layout-method is " + method);
+        settings.put("layout-method", {
+            "method": method
         });
+        // hide it
+        $("#advanced_settings_modal").modal('hide');
+    }
+});
 
-        $("#advanced_settings_modal_save").on("click", function (event) {
-            const alarm_interval = Number.parseInt($("#advanced-alarm-update-interval").val());
-            const event_interval = Number.parseInt($("#advanced-event-update-interval").val());
-            const tiles_interval = Number.parseInt($("#advanced-tiles-refresh-interval").val());
-            const regions_array = _.map($("#advanced-inventory-regions input:checked,#advanced-inventory-global input:checked"), 'value');
-            // validate it
-            if (Number.isNaN(alarm_interval)) {
-                setAdvancedSettingsAlert("Please check the CloudWatch Alarm Update Interval");
-            } else if (Number.isNaN(event_interval)) {
-                setAdvancedSettingsAlert("Please check the CloudWatch Event Update Interval");
-            } else if (Number.isNaN(tiles_interval)) {
-                setAdvancedSettingsAlert("Please check the Refresh Tile Inventory Interval");
-            } else if (!Array.isArray(regions_array)) {
-                setAdvancedSettingsAlert("Please check the Inventory Regions input");
-            } else {
-                // clear any dialog alerts
-                clearAdvancedSettingsAlert();
-                // update modules with new values
-                require("app/alarms").set_update_interval(alarm_interval);
-                require("app/events").set_update_interval(event_interval);
-                require("app/ui/tile_view").set_update_interval(tiles_interval);
-                set_inventory_regions(regions_array);
-                // save layout method
-                const method = $("#layout-method-select").val();
-                console.log("layout-method is " + method);
-                settings.put("layout-method", {
-                    "method": method
-                });
-                // hide it
-                $("#advanced_settings_modal").modal('hide');
-            }
-        });
+$("#advanced_settings_modal_cancel").on("click", function () {
+    // hide it
+    $("#advanced_settings_modal").modal('hide');
+});
 
-        $("#advanced_settings_modal_cancel").on("click", function (event) {
-            // hide it
-            $("#advanced_settings_modal").modal('hide');
-        });
+// handlers for bulk deletion buttons in advanced settings
 
-        // handlers for bulk deletion buttons in advanced settings
+$("#bulk-delete-all-diagrams-button").click(async function () {
+    $("#advanced_settings_modal").modal('hide');
+    let diagrams = await settings.get("diagrams");
+    let count = diagrams.length;
+    confirmation.show(`< p > This action will delete ${count} diagram${(count == 1 ? "" : "s")}. The browser will reload after completion.Continue ?</p > `, async function () {
+        const layout = await import("./layout.js");
+        layout.delete_all();
+        window.location.reload();
+    });
+});
 
-        $("#bulk-delete-all-diagrams-button").click(async function (event) {
-            $("#advanced_settings_modal").modal('hide');
-            let diagrams = await settings.get("diagrams");
-            let count = diagrams.length;
-            confirmation.show(`< p > This action will delete ${count} diagram${(count == 1 ? "" : "s")}. The browser will reload after completion.Continue ?</p > `, async function () {
-                await require("app/ui/layout").delete_all();
-                window.location.reload();
-            });
-        });
+$("#bulk-delete-all-tiles-button").click(async function () {
+    $("#advanced_settings_modal").modal('hide');
+    let channels = await settings.get("channels");
+    let count = channels.length;
+    confirmation.show(`< p > This action will delete ${count} tile${(count == 1 ? "" : "s")}. The browser will reload after completion.Continue ?</p > `, async function () {
+        (await import("../channels.js")).delete_all();
+        window.location.reload();
+    });
+});
 
-        $("#bulk-delete-all-tiles-button").click(async function (event) {
-            $("#advanced_settings_modal").modal('hide');
-            let channels = await settings.get("channels");
-            let count = channels.length;
-            confirmation.show(`< p > This action will delete ${count} tile${(count == 1 ? "" : "s")}. The browser will reload after completion.Continue ?</p > `, async function () {
-                await require("app/channels").delete_all();
-                window.location.reload();
-            });
-        });
+$("#bulk-delete-all-alarm-subscriptions-button").click(async function () {
+    $("#advanced_settings_modal").modal('hide');
+    confirmation.show("<p>This action will delete all alarm subscriptions in the tool. The browser will reload after completion. Continue?</p>", async function () {
+        (await import("../alarms.js")).delete_all_subscribers();
+        window.location.reload();
+    });
+});
 
-        $("#bulk-delete-all-alarm-subscriptions-button").click(async function (event) {
-            $("#advanced_settings_modal").modal('hide');
-            confirmation.show("<p>This action will delete all alarm subscriptions in the tool. The browser will reload after completion. Continue?</p>", async function () {
-                await require("app/alarms").delete_all_subscribers();
-                window.location.reload();
-            });
-        });
+$("#bulk-delete-all-button").click(async function () {
+    $("#advanced_settings_modal").modal('hide');
+    let channels = await settings.get("channels");
+    let channel_count = channels.length;
+    let diagrams = await settings.get("diagrams");
+    let diagram_count = diagrams.length;
+    confirmation.show(`< p > This action will delete ${diagram_count} diagram${(diagram_count == 1 ? "" : "s")}, ${channel_count} tile${(channel_count == 1 ? "" : "s")}, and all alarm subscriptions in the tool.The browser will reload after completion.Continue ?</p > `, async function () {
+        await Promise.all([(await import("./layout.js")).delete_all(), (await import("../channels.js")).delete_all(), (await import("../alarms.js")).delete_all_subscribers()]);
+        window.location.reload();
+    });
+});
 
-        $("#bulk-delete-all-button").click(async function (event) {
-            $("#advanced_settings_modal").modal('hide');
-            let channels = await settings.get("channels");
-            let channel_count = channels.length;
-            let diagrams = await settings.get("diagrams");
-            let diagram_count = diagrams.length;
-            confirmation.show(`< p > This action will delete ${diagram_count} diagram${(diagram_count == 1 ? "" : "s")}, ${channel_count} tile${(channel_count == 1 ? "" : "s")}, and all alarm subscriptions in the tool.The browser will reload after completion.Continue ?</p > `, async function () {
-                await Promise.all([require("app/ui/layout").delete_all(), require("app/channels").delete_all(), require("app/alarms").delete_all_subscribers()]);
-                window.location.reload();
-            });
-        });
 
-        // return the module object
-        return {
-            "showConnectionDialog": showConnectionDialog,
-            // "showRegionSelectionDialog": showRegionSelectionDialog,
-            "setConnectionAlert": setConnectionAlert,
-            "clearConnectionAlert": clearConnectionAlert,
-            "set_inventory_regions": set_inventory_regions,
-            "get_inventory_regions": get_inventory_regions
-        };
-    });
\ No newline at end of file
+// only update if we have a connection
+
+export {
+    showConnectionDialog,
+    setConnectionAlert,
+    clearConnectionAlert,
+    set_inventory_regions,
+    get_inventory_regions
+};
diff --git a/source/html/js/app/ui/status_view.js b/source/html/js/app/ui/status_view.js
index fba9245a..29ca33b4 100644
--- a/source/html/js/app/ui/status_view.js
+++ b/source/html/js/app/ui/status_view.js
@@ -1,39 +1,42 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/model", "app/statemachine"], function($, model, statemachine) {
-    var current_tab = '';
-    var progressTimer;
+import * as model from "../model.js";
+import * as statemachine from "../statemachine.js";
 
-    var calculate_progress = function(fsm) {
-        // get the total number of states for this FSM
-        var states = Object.keys(fsm.states);
-        // get our current position within the states
-        var index = states.indexOf(fsm.state);
-        // calculate the current state position as a percentage
-        var percent = Number.parseInt(((index + 1) / states.length) * 100);
-        return percent;
-    };
 
-    var show = function() {
-        if (typeof progressTimer === "undefined") {
-            progressTimer = setTimeout(update, 500);
-        }
-    };
+var current_tab = '';
+var progressTimer;
 
-    var update = function() {
-        var id = "#nav-status";
-        var tab = id + "-tab";
-        if (current_tab !== tab) {
-            $(tab).tab('show');
-        }
-        var configuration_percent = calculate_progress(statemachine.getConfigurationStateMachine());
-        var model_data_percent = calculate_progress(statemachine.getModelDataStateMachine());
-        var configuration_class = configuration_percent < 100 ? "progress-bar-striped progress-bar-animated bg-warning" : "bg-success";
-        var model_data_class = model_data_percent < 100 ? "progress-bar-striped progress-bar-animated bg-warning" : "bg-success";
-        var configuration_stats = configuration_percent < 100 ? configuration_percent + "%" : "Ready";
-        var model_stats = `${model.nodes.length} Nodes, ${model.edges.length} Connections`;
-        var html = `
+var calculate_progress = function (fsm) {
+    // get the total number of states for this FSM
+    var states = Object.keys(fsm.states);
+    // get our current position within the states
+    var index = states.indexOf(fsm.state);
+    // calculate the current state position as a percentage
+    var percent = Number.parseInt(((index + 1) / states.length) * 100);
+    return percent;
+};
+
+var show = function () {
+    if (typeof progressTimer === "undefined") {
+        progressTimer = setTimeout(update, 500);
+    }
+};
+
+var update = function () {
+    var id = "#nav-status";
+    var tab = id + "-tab";
+    if (current_tab !== tab) {
+        $(tab).tab('show');
+    }
+    var configuration_percent = calculate_progress(statemachine.getConfigurationStateMachine());
+    var model_data_percent = calculate_progress(statemachine.getModelDataStateMachine());
+    var configuration_class = configuration_percent < 100 ? "progress-bar-striped progress-bar-animated bg-warning" : "bg-success";
+    var model_data_class = model_data_percent < 100 ? "progress-bar-striped progress-bar-animated bg-warning" : "bg-success";
+    var configuration_stats = configuration_percent < 100 ? configuration_percent + "%" : "Ready";
+    var model_stats = `${model.nodes.length} Nodes, ${model.edges.length} Connections`;
+    var html = `
         <table class="table table-sm borderless">
             <tbody>
                 <tr>
@@ -54,20 +57,19 @@ define(["jquery", "app/model", "app/statemachine"], function($, model, statemach
                 </tr>
             </tbody>
         </table>`;
-        $(id).html(html);
-        progressTimer = undefined;
-    };
+    $(id).html(html);
+    progressTimer = undefined;
+};
 
-    model.nodes.on("add", function(event, properties, senderId) {
-        show();
-    });
+model.nodes.on("add", function () {
+    show();
+});
 
-    model.edges.on("add", function(event, properties, senderId) {
-        show();
-    });
+model.edges.on("add", function () {
+    show();
+});
 
-    statemachine.getToolStateMachine().on("transition", function(data) {
-        show();
-    });
+statemachine.getToolStateMachine().on("transition", function () {
+    show();
+});
 
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/svg_node.js b/source/html/js/app/ui/svg_node.js
index b7c1ec91..ec00edb9 100644
--- a/source/html/js/app/ui/svg_node.js
+++ b/source/html/js/app/ui/svg_node.js
@@ -1,86 +1,86 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/window", "app/ui/util", "app/plugins"], function($, _, window, ui_util, plugins) {
+import * as ui_util from "./util.js";
+import * as overlays from "./overlays/overlays.js";
 
-    const max_line_length = 25;
-    const font_family = 'Arial';
-    const work_div_id = ui_util.makeid();
-    const work_div_style = 'overflow:hidden;top:-100%;left:-100%;position:absolute;opacity:0;';
-    const work_div_html = `<div id="${work_div_id}" style="${work_div_style}"></div>`;
-    const border_rgb = "#a6a6a6";
-    const selected_border_rgb = "#262626";
-    const degraded_rgb = "#ffff33";
+const max_line_length = 25;
+const font_family = 'Arial';
+const work_div_id = ui_util.makeid();
+const work_div_style = 'overflow:hidden;top:-100%;left:-100%;position:absolute;opacity:0;';
+const work_div_html = `<div id="${work_div_id}" style="${work_div_style}"></div>`;
+const border_rgb = "#a6a6a6";
+const selected_border_rgb = "#262626";
+const degraded_rgb = "#ffff33";
 
-    const wordWrap = (str, max) => str.length > max ? [`${str.substring(0, max - 1)} [...]`] : [str];
+const wordWrap = (str, max) => str.length > max ? [`${str.substring(0, max - 1)} [...]`] : [str];
 
-    const create = (type_name, node_name, node_rgb, selected, id, data, generic_type_name) => {
-        const inc_y = 35;
-        const radius = 20;
-        const width = 400;
-        const height = 200;
-        const font_size = 25;
-        const w_border = selected ? Math.ceil(width * 0.05) : Math.ceil(width * 0.025);
-        let pos_y = 10;
+const create = (type_name, node_name, node_rgb, selected, id, data, generic_type_name) => {
+    const inc_y = 35;
+    const radius = 20;
+    const width = 400;
+    const height = 200;
+    const font_size = 25;
+    const w_border = selected ? Math.ceil(width * 0.05) : Math.ceil(width * 0.025);
+    let pos_y = 10;
 
-        $("#" + work_div_id).empty();
+    $("#" + work_div_id).empty();
 
-        const drawing = SVG(work_div_id).size(width, height);
-        drawing.rect(width, height).radius(radius).fill(selected ? selected_border_rgb : border_rgb);
-        drawing.rect(width - w_border, height - w_border).radius(radius).fill(node_rgb).dmove(w_border / 2, w_border / 2);
+    const drawing = SVG(work_div_id).size(width, height);
+    drawing.rect(width, height).radius(radius).fill(selected ? selected_border_rgb : border_rgb);
+    drawing.rect(width - w_border, height - w_border).radius(radius).fill(node_rgb).dmove(w_border / 2, w_border / 2);
 
-        const typeLabel = drawing.text(type_name + ":").y(pos_y);
-        typeLabel.font({ family: font_family, size: font_size, weight: 'bold' });
-        typeLabel.cx(width / 2);
+    const typeLabel = drawing.text(type_name + ":").y(pos_y);
+    typeLabel.font({ family: font_family, size: font_size, weight: 'bold' });
+    typeLabel.cx(width / 2);
 
-        pos_y += inc_y;
-
-        const lines = wordWrap(node_name, max_line_length);
+    pos_y += inc_y;
 
-        for (let value of lines) {
-            const nameLabel = drawing.text(value).y(pos_y);
-            nameLabel.font({ family: font_family, size: font_size });
-            nameLabel.cx(width / 2);
-            pos_y += inc_y;
-        }
+    const lines = wordWrap(node_name, max_line_length);
 
-        // give matching overlays a chance to supplement 'drawing'
-        let found = false;
-        const overlays = plugins.overlays;
-
-        for (let module of overlays) {
-            let overlay = require(module);
-            if (overlay.match_type == (generic_type_name || type_name)) {
-                // console.log("applying overlay " + overlay.name);
-                overlay.decorate(drawing, font_size, width, height, id, data);
-                found = true;
-            }
-        }
+    for (let value of lines) {
+        const nameLabel = drawing.text(value).y(pos_y);
+        nameLabel.font({ family: font_family, size: font_size });
+        nameLabel.cx(width / 2);
+        pos_y += inc_y;
+    }
 
-        // use the default overlay if needed
-        if (!found) {
-            // console.log("using default overlay for " + id)
-            let overlay = require(plugins["default-overlay"]);
+    // give matching overlays a chance to supplement 'drawing'
+    let found = false;
+    for (let overlay of overlays.all) {
+        if (overlay.match_type == (generic_type_name || type_name)) {
+            // console.log("applying overlay " + overlay.name);
             overlay.decorate(drawing, font_size, width, height, id, data);
+            found = true;
         }
+    }
+
+    // use the default overlay if needed
+    if (!found) {
+        // console.log("using default overlay for " + id)
+        let overlay = overlays.default_overlay;
+        overlay.decorate(drawing, font_size, width, height, id, data);
+    }
+
+    // export the SVG and turn it into an encoded inline image
+    const code = drawing.svg();
+    // remove randomly generated ids from the SVG code
+    const regex = /id="\w+"\s*/g;
+    const modified = code.replace(regex, "");
+    // console.log(modified);
+    return 'data:image/svg+xml;base64,' + window.btoa(modified);
+};
+
+// add the hidden SVG rendering div to the end of the body
+$("body").append(work_div_html);
+
+
+export const selected = (type_name, node_name, node_rgb, id, data, generic_type_name) => {
+    return create(type_name, node_name, node_rgb, true, id, data, generic_type_name);
+};
+
+export const unselected = (type_name, node_name, node_rgb, id, data, generic_type_name) => {
+    return create(type_name, node_name, node_rgb, false, id, data, generic_type_name);
+};
 
-        // export the SVG and turn it into an encoded inline image
-        const code = drawing.svg();
-        // remove randomly generated ids from the SVG code
-        const regex = /id\=\"\w+\"\s*/g;
-        const modified = code.replace(regex, "");
-        // console.log(modified);
-        return 'data:image/svg+xml;base64,' + window.btoa(modified);
-    };
-
-    // add the hidden SVG rendering div to the end of the body
-    $("body").append(work_div_html);
-
-    return {
-        selected: (type_name, node_name, node_rgb, id, data, generic_type_name) =>
-            create(type_name, node_name, node_rgb, true, id, data, generic_type_name),
-        unselected: (type_name, node_name, node_rgb, id, data, generic_type_name) =>
-            create(type_name, node_name, node_rgb, false, id, data, generic_type_name),
-        getDegradedRgb: () => degraded_rgb
-    };
-});
\ No newline at end of file
+export const getDegradedRgb = () => degraded_rgb;
diff --git a/source/html/js/app/ui/tile_view.js b/source/html/js/app/ui/tile_view.js
index c9549805..63cf5f0a 100644
--- a/source/html/js/app/ui/tile_view.js
+++ b/source/html/js/app/ui/tile_view.js
@@ -1,135 +1,145 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "app/channels", "app/model", "app/ui/util", "app/events", "app/alarms", "app/settings", "app/ui/diagrams", "lodash", "app/ui/confirmation", "app/ui/alert", "app/ui/channels_menu"],
-    function($, channels, model, ui_util, event_alerts, alarms, settings, diagrams, _, confirmation, alert, channels_menu) {
 
-        const tile_row_div_id = "channel-tile-row-zkjewrvwdqywhwx";
+import * as channels from "../channels.js";
+import * as model from "../model.js";
+import * as ui_util from "./util.js";
+import * as event_alerts from "../events.js";
+import * as alarms from "../alarms.js";
+import * as settings from "../settings.js";
+import * as diagrams from "./diagrams.js";
+import * as confirmation from "./confirmation.js";
+import * as alert from "./alert.js";
+import * as channels_menu from "./channels_menu.js";
 
-        let click_listeners = [];
 
-        const tile_outer_div = "channel-tiles-outer";
+const tile_row_div_id = "channel-tile-row-zkjewrvwdqywhwx";
 
-        const content_div = "channel-tiles-diagram";
+let click_listeners = [];
 
-        const tab_id = "channel-tiles-tab";
+const tile_outer_div = "channel-tiles-outer";
 
-        // interval in millis to check the cloud for tile changes
-        let update_interval;
+const content_div = "channel-tiles-diagram";
 
-        let intervalID;
+const tab_id = "channel-tiles-tab";
 
-        const settings_key = "app-tile-update-interval";
+// interval in millis to check the cloud for tile changes
+let update_interval;
 
-        const tile_width_px = 240;
-        const tile_height_px = 175;
+let intervalID;
 
-        const tile_view_key = "tile-view";
+const settings_key = "app-tile-update-interval";
 
-        const add_selection_callback = function(callback) {
-            if (!click_listeners.includes(callback)) {
-                click_listeners.push(callback);
-            }
-        };
+const tile_width_px = 240;
+const tile_height_px = 175;
 
-        const event_alert_callback = function() {
-            update_tile_info();
-        };
+const tile_view_key = "tile-view";
 
-        const alarm_callback = function() {
-            update_tile_info();
-        };
+const add_selection_callback = function (callback) {
+    if (!click_listeners.includes(callback)) {
+        click_listeners.push(callback);
+    }
+};
 
-        const selection_listener = function(name) {
-            toggle_tile(name);
-            // select(name);
-        };
+const event_alert_callback = function () {
+    update_tile_info();
+};
 
-        const selected = function() {
-            const tile = $(".selected-channel-tile");
-            return tile.attr("data-channel-name");
-        };
+const alarm_callback = function () {
+    update_tile_info();
+};
 
-        const toggle_tile = function(name) {
-            if (name === selected()) {
-                unselect_all();
-            } else {
-                select(name);
-            }
-        };
+const selection_listener = function (name) {
+    toggle_tile(name);
+    // select(name);
+};
 
-        const blink = function(blinks, tile) {
-            const interval_ms = 500;
-            if (blinks > 0) {
-                setTimeout(
-                    function() {
-                        if (blinks % 2 === 0) {
-                            select(tile);
-                        } else {
-                            unselect(tile);
-                        }
-                        blink(blinks - 1, tile);
-                    }, interval_ms);
-            } else {
-                select(tile);
-            }
-        };
+const selected = function () {
+    const tile = $(".selected-channel-tile");
+    return tile.attr("data-channel-name");
+};
 
-        const scroll_to_tile = function(name) {
-            // scroll to the selected item
-            const query = `[data-channel-name='${name}']`;
-            const selected = $(query);
-            $("#" + tile_row_div_id).animate({
-                scrollTop: selected.offset().top
-            }, "slow");
-        };
+const toggle_tile = function (name) {
+    if (name === selected()) {
+        unselect_all();
+    } else {
+        select(name);
+    }
+};
 
-        const select = function(name) {
-            // query = `[data-channel-name][data-channel-name!='${name}']`;
-            const unselected_tiles = $(".selected-channel-tile");
-            unselected_tiles.removeClass("selected-channel-tile");
-            const query = `[data-channel-name='${name}']`;
-            const selected_tile = $(query);
-            selected_tile.addClass("selected-channel-tile");
-        };
-
-        const unselect = function(name) {
-            const query = `[data-channel-name='${name}']`;
-            const selected_tile = $(query);
-            selected_tile.removeClass("selected-channel-tile");
-        };
-
-        const unselect_all = function() {
-            const query = `[data-channel-name]`;
-            const unselected_tiles = $(query);
-            unselected_tiles.removeClass("selected-channel-tile");
-        };
-
-        const shown = function() {
-            return $("#" + tab_id).attr("aria-selected") === "true";
-        };
-
-        function tab_alert(state) {
-            if (state) {
-                $("#channel-tiles-tab-icon").text("warning");
-            } else {
-                $("#channel-tiles-tab-icon").text("grid_on");
-            }
-        }
-
-        const show_edit_dialog = function(name, members) {
-            // console.log(members);
-            $("#channel_edit_name").val(name);
-            $("#channel_edit_name").attr("data-original-name", name);
-            $("#channel_edit_modal_items").empty();
-            let channel_content = "";
-            let index = 0;
-            for (let member of members) {
-                const node = model.nodes.get(member.id);
-                const checkbox_id = ui_util.makeid();
-                if (node) {
-                    channel_content += `
-                                        <tr><th scope="row">${index+1}</th>
+const blink = function (blinks, tile) {
+    const interval_ms = 500;
+    if (blinks > 0) {
+        setTimeout(
+            function () {
+                if (blinks % 2 === 0) {
+                    select(tile);
+                } else {
+                    unselect(tile);
+                }
+                blink(blinks - 1, tile);
+            }, interval_ms);
+    } else {
+        select(tile);
+    }
+};
+
+const scroll_to_tile = function (name) {
+    // scroll to the selected item
+    const query = `[data-channel-name='${name}']`;
+    const selected = $(query);
+    $("#" + tile_row_div_id).animate({
+        scrollTop: selected.offset().top
+    }, "slow");
+};
+
+const select = function (name) {
+    // query = `[data-channel-name][data-channel-name!='${name}']`;
+    const unselected_tiles = $(".selected-channel-tile");
+    unselected_tiles.removeClass("selected-channel-tile");
+    const query = `[data-channel-name='${name}']`;
+    const selected_tile = $(query);
+    selected_tile.addClass("selected-channel-tile");
+};
+
+const unselect = function (name) {
+    const query = `[data-channel-name='${name}']`;
+    const selected_tile = $(query);
+    selected_tile.removeClass("selected-channel-tile");
+};
+
+const unselect_all = function () {
+    const query = `[data-channel-name]`;
+    const unselected_tiles = $(query);
+    unselected_tiles.removeClass("selected-channel-tile");
+};
+
+const shown = function () {
+    return $("#" + tab_id).attr("aria-selected") === "true";
+};
+
+function tab_alert(state) {
+    if (state) {
+        $("#channel-tiles-tab-icon").text("warning");
+    } else {
+        $("#channel-tiles-tab-icon").text("grid_on");
+    }
+}
+
+const show_edit_dialog = function (name, members) {
+    // console.log(members);
+    $("#channel_edit_name").val(name);
+    $("#channel_edit_name").attr("data-original-name", name);
+    $("#channel_edit_modal_items").empty();
+    let channel_content = "";
+    let index = 0;
+    for (let member of members) {
+        const node = model.nodes.get(member.id);
+        const checkbox_id = ui_util.makeid();
+        if (node) {
+            channel_content += `
+                                        <tr><th scope="row">${index + 1}</th>
                                         <td>
                                         <div class="form-check form-check-inline">
                                             <input class="form-check-input" type="checkbox" id="${checkbox_id}" value="${member.id}">
@@ -137,9 +147,9 @@ define(["jquery", "app/channels", "app/model", "app/ui/util", "app/events", "app
                                         </td>
                                         <td>${node.title}</td><td>${node.id}</td></tr>
                                     `;
-                } else {
-                    channel_content += `
-                                        <tr><th scope="row">${index+1}</th>
+        } else {
+            channel_content += `
+                                        <tr><th scope="row">${index + 1}</th>
                                         <td>
                                         <div class="form-check form-check-inline">
                                             <input class="form-check-input" type="checkbox" id="${checkbox_id}" value="${member.id}">
@@ -147,10 +157,10 @@ define(["jquery", "app/channels", "app/model", "app/ui/util", "app/events", "app
                                         </td>
                                         <td>Expired</td><td>Expired</td></tr>
                                     `;
-                }
-                index++;
-            }
-            const html = `
+        }
+        index++;
+    }
+    const html = `
                         <table id="channel_edit_members_table" class="table table-sm table-hover">
                             <thead>
                                 <tr>
@@ -164,136 +174,136 @@ define(["jquery", "app/channels", "app/model", "app/ui/util", "app/events", "app
                                 ${channel_content}
                             </tbody>
                         </table>`;
-            $("#channel_edit_modal_items").html(html);
-            $("#channel_edit_modal").modal("show");
-        };
-
-        const update_tile_info = async function() {
-            // console.log("update_tile_info");
-            const cached_events = event_alerts.get_cached_events();
-            const cached_alarming_subscribers = alarms.get_subscribers_with_alarms();
-            const channel_list = await channels.channel_list();
-            for (let channel_name of channel_list) {
-                const channel_members = await channels.retrieve_channel(channel_name);
-                if (channel_members) {
-                    const query = `[data-channel-name='${channel_name}']`;
-                    const tile_id = $(query).attr("id");
-                    const service_count_id = tile_id + "_services";
-                    const event_count_id = tile_id + "_events";
-                    const alarm_count_id = tile_id + "_alarms";
-                    // console.log(channel_members);
-                    const service_count = channel_members.length;
-                    let alert_count = 0;
-                    let alarm_count = 0;
-                    let border_class = "border-success";
-                    for (let member of channel_members) {
-                        const filtered_events = _.filter(cached_events.current, { resource_arn: member.id });
-                        alert_count += filtered_events.length;
-                        const filtered_alarms = _.filter(cached_alarming_subscribers.current, { ResourceArn: member.id });
-                        alarm_count += filtered_alarms.length;
-                    }
-                    if (alert_count + alarm_count) {
-                        border_class = "border-danger";
-                        $("#" + tile_id).removeClass("border-success");
-                    } else {
-                        $("#" + tile_id).removeClass("border-danger");
-                    }
-                    if (channel_name == selected()) {
-                        border_class = `${border_class} selected-channel-tile`;
-                    }
-                    $("#" + tile_id).attr("data-alert-count", alert_count);
-                    $("#" + tile_id).attr("data-alarm-count", alarm_count);
-                    $("#" + tile_id).addClass(border_class);
-                    $("#" + service_count_id).html(`${service_count} cloud services`);
-                    $("#" + event_count_id).html(`${alert_count} alert event${(alert_count === 1 ? "" : "s")}`);
-                    $("#" + alarm_count_id).html(`${alarm_count} alarm${(alarm_count === 1 ? "" : "s")}`);
-                }
+    $("#channel_edit_modal_items").html(html);
+    $("#channel_edit_modal").modal("show");
+};
+
+const update_tile_info = async function () {
+    // console.log("update_tile_info");
+    const cached_events = event_alerts.get_cached_events();
+    const cached_alarming_subscribers = alarms.get_subscribers_with_alarms();
+    const channel_list = await channels.channel_list();
+    for (let channel_name of channel_list) {
+        const channel_members = await channels.retrieve_channel(channel_name);
+        if (channel_members) {
+            const query = `[data-channel-name='${channel_name}']`;
+            const tile_id = $(query).attr("id");
+            const service_count_id = tile_id + "_services";
+            const event_count_id = tile_id + "_events";
+            const alarm_count_id = tile_id + "_alarms";
+            // console.log(channel_members);
+            const service_count = channel_members.length;
+            let alert_count = 0;
+            let alarm_count = 0;
+            let border_class = "border-success";
+            for (let member of channel_members) {
+                const filtered_events = _.filter(cached_events.current, { resource_arn: member.id });
+                alert_count += filtered_events.length;
+                const filtered_alarms = _.filter(cached_alarming_subscribers.current, { ResourceArn: member.id });
+                alarm_count += filtered_alarms.length;
             }
-            sort_tiles();
-            filter_tiles();
-        };
-
-        const sort_tiles = function() {
-            const tiles = $("[data-channel-name]");
-            tiles.sort(function(a, b) {
-                let compare = 0;
-                let compA = Number.parseInt($(a).attr("data-alert-count")) + Number.parseInt($(a).attr("data-alarm-count"));
-                let compB = Number.parseInt($(b).attr("data-alert-count")) + Number.parseInt($(b).attr("data-alarm-count"));
-                compare = (compA < compB ? 1 : (compA > compB ? -1 : 0));
-                if (compare === 0) {
-                    compA = $(a).attr("data-channel-name");
-                    compB = $(b).attr("data-channel-name");
-                    compare = (compA < compB ? -1 : (compA > compB ? 1 : 0));
-                }
-                return compare;
-            });
-            for (let tile of tiles) {
-                $("[data-tile-row]").append(tile);
+            if (alert_count + alarm_count) {
+                border_class = "border-danger";
+                $("#" + tile_id).removeClass("border-success");
+            } else {
+                $("#" + tile_id).removeClass("border-danger");
             }
-        };
-
-        const filter_tiles = function() {
-            let tiles = $("[data-channel-name]");
-            load_tile_view().then(function(tile_settings) {
-                update_filter_mode(tile_settings.tile_filter_text);
-                const show_alarm_tiles = tile_settings.show_alarm_tiles;
-                const show_normal_tiles = tile_settings.show_normal_tiles;
-                for (let tile of tiles) {
-                    const total = (Number.parseInt($(tile).attr("data-alert-count")) + Number.parseInt($(tile).attr("data-alarm-count")));
-                    const alarming = (total > 0);
-                    if (show_alarm_tiles && show_normal_tiles) {
-                        $(tile).removeClass("d-none");
-                    } else if (show_alarm_tiles) {
-                        if (alarming) {
-                            $(tile).removeClass("d-none");
-                        } else {
-                            $(tile).addClass("d-none");
-                        }
-                    } else if (show_normal_tiles) {
-                        if (alarming) {
-                            $(tile).addClass("d-none");
-                        } else {
-                            $(tile).removeClass("d-none");
-                        }
-                    }
-                }
-                $("#" + tile_outer_div).removeClass("d-none");
-                tab_alert($("#" + content_div + " .border-danger").length > 0);
-            });
-        };
-
-        const redraw_tiles = async function() {
-            const local_lodash = _;
-            const local_jquery = $;
-            $("#" + tile_outer_div).addClass("d-none");
-            $("#" + content_div).html(`<div id="${tile_row_div_id}" data-tile-row="true" class="row ml-3">`);
-            const channel_list = await channels.channel_list();
-            const cached_events = event_alerts.get_cached_events();
-            const cached_alarming_subscribers = alarms.get_subscribers_with_alarms();
-            for (let channel_name of channel_list) {
-                const local_channel_name = channel_name;
-                let border_class = "border-success";
-                const channel_members = await channels.retrieve_channel(local_channel_name);
-                // console.log(channel_members);
-                const service_count = channel_members.length;
-                let alert_count = 0;
-                let alarm_count = 0;
-                for (let member of channel_members) {
-                    const filtered_events = _.filter(cached_events.current, { resource_arn: member.id });
-                    alert_count += filtered_events.length;
-                    const filtered_alarms = _.filter(cached_alarming_subscribers.current, { ResourceArn: member.id });
-                    alarm_count += filtered_alarms.length;
-                }
-                if (alert_count + alarm_count) {
-                    border_class = "border-danger";
+            if (channel_name == selected()) {
+                border_class = `${border_class} selected-channel-tile`;
+            }
+            $("#" + tile_id).attr("data-alert-count", alert_count);
+            $("#" + tile_id).attr("data-alarm-count", alarm_count);
+            $("#" + tile_id).addClass(border_class);
+            $("#" + service_count_id).html(`${service_count} cloud services`);
+            $("#" + event_count_id).html(`${alert_count} alert event${(alert_count === 1 ? "" : "s")}`);
+            $("#" + alarm_count_id).html(`${alarm_count} alarm${(alarm_count === 1 ? "" : "s")}`);
+        }
+    }
+    sort_tiles();
+    filter_tiles();
+};
+
+const sort_tiles = function () {
+    const tiles = $("[data-channel-name]");
+    tiles.sort(function (a, b) {
+        let compare = 0;
+        let compA = Number.parseInt($(a).attr("data-alert-count")) + Number.parseInt($(a).attr("data-alarm-count"));
+        let compB = Number.parseInt($(b).attr("data-alert-count")) + Number.parseInt($(b).attr("data-alarm-count"));
+        compare = (compA < compB ? 1 : (compA > compB ? -1 : 0));
+        if (compare === 0) {
+            compA = $(a).attr("data-channel-name");
+            compB = $(b).attr("data-channel-name");
+            compare = (compA < compB ? -1 : (compA > compB ? 1 : 0));
+        }
+        return compare;
+    });
+    for (let tile of tiles) {
+        $("[data-tile-row]").append(tile);
+    }
+};
+
+const filter_tiles = function () {
+    let tiles = $("[data-channel-name]");
+    load_tile_view().then(function (tile_settings) {
+        update_filter_mode(tile_settings.tile_filter_text);
+        const show_alarm_tiles = tile_settings.show_alarm_tiles;
+        const show_normal_tiles = tile_settings.show_normal_tiles;
+        for (let tile of tiles) {
+            const total = (Number.parseInt($(tile).attr("data-alert-count")) + Number.parseInt($(tile).attr("data-alarm-count")));
+            const alarming = (total > 0);
+            if (show_alarm_tiles && show_normal_tiles) {
+                $(tile).removeClass("d-none");
+            } else if (show_alarm_tiles) {
+                if (alarming) {
+                    $(tile).removeClass("d-none");
+                } else {
+                    $(tile).addClass("d-none");
                 }
-                if (local_channel_name == selected()) {
-                    border_class = `${border_class} selected-channel-tile`;
+            } else if (show_normal_tiles) {
+                if (alarming) {
+                    $(tile).addClass("d-none");
+                } else {
+                    $(tile).removeClass("d-none");
                 }
-                const channel_card_id = ui_util.makeid();
-                const model_button_id = channel_card_id + "_model_button";
-                const header_id = channel_card_id + "_header";
-                const tile = `
+            }
+        }
+        $("#" + tile_outer_div).removeClass("d-none");
+        tab_alert($("#" + content_div + " .border-danger").length > 0);
+    });
+};
+
+const redraw_tiles = async function () {
+    const local_lodash = _;
+    const local_jquery = $;
+    $("#" + tile_outer_div).addClass("d-none");
+    $("#" + content_div).html(`<div id="${tile_row_div_id}" data-tile-row="true" class="row ml-3">`);
+    const channel_list = await channels.channel_list();
+    const cached_events = event_alerts.get_cached_events();
+    const cached_alarming_subscribers = alarms.get_subscribers_with_alarms();
+    for (let channel_name of channel_list) {
+        const local_channel_name = channel_name;
+        let border_class = "border-success";
+        const channel_members = await channels.retrieve_channel(local_channel_name);
+        // console.log(channel_members);
+        const service_count = channel_members.length;
+        let alert_count = 0;
+        let alarm_count = 0;
+        for (let member of channel_members) {
+            const filtered_events = _.filter(cached_events.current, { resource_arn: member.id });
+            alert_count += filtered_events.length;
+            const filtered_alarms = _.filter(cached_alarming_subscribers.current, { ResourceArn: member.id });
+            alarm_count += filtered_alarms.length;
+        }
+        if (alert_count + alarm_count) {
+            border_class = "border-danger";
+        }
+        if (local_channel_name == selected()) {
+            border_class = `${border_class} selected-channel-tile`;
+        }
+        const channel_card_id = ui_util.makeid();
+        const model_button_id = channel_card_id + "_model_button";
+        const header_id = channel_card_id + "_header";
+        const tile = `
                         <div draggable="true" class="card ${border_class} ml-4 mb-4" id="${channel_card_id}" data-alert-count="${alert_count}" data-alarm-count="${alarm_count}" data-channel-name="${channel_name}" data-tile-name="${channel_name}" style="border-width: 3px; width: ${tile_width_px}px; min-width: ${tile_width_px}px; max-width: ${tile_width_px}px; height: ${tile_height_px}px; min-height: ${tile_height_px}px; max-height: ${tile_height_px}px;">
                             <div class="card-header" style="cursor: pointer;" title="Click to Select, Doubleclick to Edit" id="${header_id}">${local_channel_name}</div>
                             <div class="card-body text-info my-0 py-1">
@@ -306,272 +316,279 @@ define(["jquery", "app/channels", "app/model", "app/ui/util", "app/events", "app
                             </div>
                         </div>
                     `;
-                $("#" + tile_row_div_id).append(tile);
-                const header_click_closure = function(hc_console, hc_name, hc_channel_members, hc_click_listeners) {
-                    return function() {
-                        selection_listener(hc_name);
-                        for (let listener of hc_click_listeners) {
-                            const local_listener = listener;
-                            try {
-                                local_listener(hc_name, hc_channel_members);
-                            } catch (error) {
-                                hc_console.log(error);
-                            }
-                        }
-                    };
-                };
-                $("#" + header_id).on("click", header_click_closure(console, local_channel_name, channel_members, click_listeners));
-                $("#" + header_id).dblclick((function() {
-                    const name = local_channel_name;
-                    const members = channel_members;
-                    return function() {
-                        show_edit_dialog(name, members);
-                    };
-                })());
-                const local_alert = alert;
-                const model_click_closure = function(diagrams, confirmation, _, model) {
-                    const mc_diagrams = diagrams;
-                    const mc_tile_name = local_channel_name;
-                    const node_ids = local_lodash.map(channel_members, "id");
-                    return function() {
-                        let html;
-                        const matches = mc_diagrams.have_all(node_ids);
-                        // show tile diagram dialog
-                        local_jquery("#view_tile_diagram_selected_diagram").empty();
-                        if (node_ids.length === 0) {
-                            local_alert.show("Add resources to the tile");
-                        } else
-                        if (matches.length === 0) {
-                            html = `This tile's contents were not found on any diagram. Would you like to generate a new one?`;
-                            confirmation.show(html, function() {
-                                const diagram = mc_diagrams.add(mc_tile_name, _.snakeCase(mc_tile_name), true);
-                                // populate
-                                const nodes = local_lodash.compact(model.nodes.get(node_ids));
-                                diagram.nodes.update(nodes);
-                                diagram.show();
-                            });
-                        } else {
-                            for (let diagram of matches) {
-                                html = `<option value="${diagram.name}">${diagram.name}</option>`;
-                                local_jquery("#view_tile_diagram_selected_diagram").append(html);
-                            }
-                            local_jquery("#view_tile_diagram_dialog").attr("data-node-ids", JSON.stringify(node_ids));
-                            local_jquery("#view_tile_diagram_dialog").attr("data-tile-name", mc_tile_name);
-                            local_jquery("#view_tile_diagram_dialog").modal("show");
+        $("#" + tile_row_div_id).append(tile);
+        const header_click_closure = function (hc_console, hc_name, hc_channel_members, hc_click_listeners) {
+            return function () {
+                selection_listener(hc_name);
+                for (let listener of hc_click_listeners) {
+                    const local_listener = listener;
+                    try {
+                        local_listener(hc_name, hc_channel_members);
+                    } catch (error) {
+                        hc_console.log(error);
+                    }
+                }
+            };
+        };
+        $("#" + header_id).on("click", header_click_closure(console, local_channel_name, channel_members, click_listeners));
+        $("#" + header_id).dblclick((function () {
+            const name = local_channel_name;
+            const members = channel_members;
+            return function () {
+                show_edit_dialog(name, members);
+            };
+        })());
+        const local_alert = alert;
+        const model_click_closure = function (diagrams, confirmation, _, model) {
+            const mc_diagrams = diagrams;
+            const mc_tile_name = local_channel_name;
+            const node_ids = local_lodash.map(channel_members, "id");
+            return function () {
+                let html;
+                const matches = mc_diagrams.have_all(node_ids);
+                // show tile diagram dialog
+                local_jquery("#view_tile_diagram_selected_diagram").empty();
+                if (node_ids.length === 0) {
+                    local_alert.show("Add resources to the tile");
+                } else
+                    if (matches.length === 0) {
+                        html = `This tile's contents were not found on any diagram. Would you like to generate a new one?`;
+                        confirmation.show(html, function () {
+                            const diagram = mc_diagrams.add(mc_tile_name, _.snakeCase(mc_tile_name), true);
+                            // populate
+                            const nodes = local_lodash.compact(model.nodes.get(node_ids));
+                            diagram.nodes.update(nodes);
+                            diagram.show();
+                        });
+                    } else {
+                        for (let diagram of matches) {
+                            html = `<option value="${diagram.name}">${diagram.name}</option>`;
+                            local_jquery("#view_tile_diagram_selected_diagram").append(html);
                         }
-                    };
-                };
-                $("#" + model_button_id).on("click", model_click_closure(diagrams, confirmation, _, model));
-            }
-            sort_tiles();
-            filter_tiles();
+                        local_jquery("#view_tile_diagram_dialog").attr("data-node-ids", JSON.stringify(node_ids));
+                        local_jquery("#view_tile_diagram_dialog").attr("data-tile-name", mc_tile_name);
+                        local_jquery("#view_tile_diagram_dialog").modal("show");
+                    }
+            };
         };
-
-        $("#view_tile_diagram_show").on("click", function() {
-            const diagram_name = $("#view_tile_diagram_selected_diagram").val();
-            const node_ids = JSON.parse($("#view_tile_diagram_dialog").attr("data-node-ids"));
-            const diagram = diagrams.get_by_name(diagram_name);
-            diagram.network.once("afterDrawing", function() {
-                diagram.network.fit({
-                    nodes: node_ids,
-                    animation: true
-                });
-                diagram.blink(10, node_ids);
-            });
-            $("#view_tile_diagram_dialog").modal("hide");
-            diagram.show();
+        $("#" + model_button_id).on("click", model_click_closure(diagrams, confirmation, _, model));
+    }
+    sort_tiles();
+    filter_tiles();
+};
+
+$("#view_tile_diagram_show").on("click", function () {
+    const diagram_name = $("#view_tile_diagram_selected_diagram").val();
+    const node_ids = JSON.parse($("#view_tile_diagram_dialog").attr("data-node-ids"));
+    const diagram = diagrams.get_by_name(diagram_name);
+    diagram.network.once("afterDrawing", function () {
+        diagram.network.fit({
+            nodes: node_ids,
+            animation: true
         });
-
-        $("#view_tile_diagram_generate_diagram_button").on("click", function() {
-            const tile_name = $("#view_tile_diagram_dialog").attr("data-tile-name");
-            const node_ids = JSON.parse($("#view_tile_diagram_dialog").attr("data-node-ids"));
-            const diagram = diagrams.add(tile_name, _.snakeCase(tile_name), true);
-            // populate
-            const nodes = _.compact(model.nodes.get(node_ids));
-            diagram.nodes.update(nodes);
-            // diagram.network.once("afterDrawing", function() {
-            //     // layout
-            //     diagram.layout_vertical(true);
-            // });
-            // show
-            diagram.show();
-            $("#view_tile_diagram_dialog").modal("hide");
+        diagram.blink(10, node_ids);
+    });
+    $("#view_tile_diagram_dialog").modal("hide");
+    diagram.show();
+});
+
+$("#view_tile_diagram_generate_diagram_button").on("click", function () {
+    const tile_name = $("#view_tile_diagram_dialog").attr("data-tile-name");
+    const node_ids = JSON.parse($("#view_tile_diagram_dialog").attr("data-node-ids"));
+    const diagram = diagrams.add(tile_name, _.snakeCase(tile_name), true);
+    // populate
+    const nodes = _.compact(model.nodes.get(node_ids));
+    diagram.nodes.update(nodes);
+    // diagram.network.once("afterDrawing", function() {
+    //     // layout
+    //     diagram.layout_vertical(true);
+    // });
+    // show
+    diagram.show();
+    $("#view_tile_diagram_dialog").modal("hide");
+});
+
+$("#save_channel_edit").on("click", function () {
+    const edited_name = $("#channel_edit_name").val();
+    // console.log(edited_name);
+    const original_name = $("#channel_edit_name").attr("data-original-name");
+    // console.log(original_name);
+    const member_checkboxes = $("#channel_edit_members_table input[type='checkbox']");
+    // console.log(member_checkboxes);
+    channels.delete_channel(original_name).then(function () {
+        console.log("removed channel members");
+        const members = [];
+        for (let item of member_checkboxes) {
+            if (item.checked === false) {
+                members.push(item.value);
+            }
+        }
+        return channels.create_channel(edited_name, members);
+    }).then(function () {
+        console.log("added channel members");
+        console.log("channel " + original_name + " -> " + edited_name + " updated");
+        redraw_tiles();
+    }).catch(function (error) {
+        console.error(error);
+    });
+});
+
+$("#tiles_duplicate_selected_tile_button").on("click", function () {
+    const tile_name = selected();
+    if (shown() && tile_name && tile_name !== "") {
+        channels.retrieve_channel(tile_name).then(function (source_contents) {
+            const source_node_ids = _.map(source_contents, "id").sort();
+            channels_menu.show_quick_new_tile(source_node_ids);
         });
-
-        $("#save_channel_edit").on("click", function() {
-            const edited_name = $("#channel_edit_name").val();
-            // console.log(edited_name);
-            const original_name = $("#channel_edit_name").attr("data-original-name");
-            // console.log(original_name);
-            const member_checkboxes = $("#channel_edit_members_table input[type='checkbox']");
-            // console.log(member_checkboxes);
-            channels.delete_channel(original_name).then(function() {
-                console.log("removed channel members");
-                const members = [];
-                for (let item of member_checkboxes) {
-                    if (item.checked === false) {
-                        members.push(item.value);
-                    }
-                }
-                return channels.create_channel(edited_name, members);
-            }).then(function() {
-                console.log("added channel members");
-                console.log("channel " + original_name + " -> " + edited_name + " updated");
+    }
+});
+
+$("#tiles_edit_selected_tile_button").on("click", function () {
+    const tile_name = selected();
+    if (shown() && tile_name && tile_name !== "") {
+        channels.retrieve_channel(tile_name).then(function (contents) {
+            show_edit_dialog(tile_name, contents);
+        });
+    }
+});
+
+$("#tiles_delete_selected_tile_button").on("click", function () {
+    const tile_name = selected();
+    if (shown() && tile_name && tile_name !== "") {
+        $("#confirmation_dialog_proceed").on("click", function () {
+            channels.delete_channel(tile_name).then(function () {
                 redraw_tiles();
-            }).catch(function(error) {
-                console.log(error);
             });
         });
-
-        $("#tiles_duplicate_selected_tile_button").on("click", function() {
-            const tile_name = selected();
-            if (shown() && tile_name && tile_name !== "") {
-                channels.retrieve_channel(tile_name).then(function(source_contents) {
-                    const source_node_ids = _.map(source_contents, "id").sort();
-                    channels_menu.show_quick_new_tile(source_node_ids);
-                });
-            }
+        $("#confirmation_dialog").on("hide.bs.modal", function (event) {
+            console.log(event);
+            $("#confirmation_dialog_proceed").unbind("click");
         });
+        $("#confirmation_dialog_body").html("<p>Delete the tile named " + tile_name + "?</p>");
+        $("#confirmation_dialog").modal("show");
 
-        $("#tiles_edit_selected_tile_button").on("click", function() {
-            const tile_name = selected();
-            if (shown() && tile_name && tile_name !== "") {
-                channels.retrieve_channel(tile_name).then(function(contents) {
-                    show_edit_dialog(tile_name, contents);
-                });
-            }
-        });
+    }
+});
 
-        $("#tiles_delete_selected_tile_button").on("click", function() {
-            const tile_name = selected();
-            if (shown() && tile_name && tile_name !== "") {
-                $("#confirmation_dialog_proceed").on("click", function(event) {
-                    channels.delete_channel(tile_name).then(function(response) {
-                        redraw_tiles();
-                    });
-                });
-                $("#confirmation_dialog").on("hide.bs.modal", function(event) {
-                    console.log(event);
-                    $("#confirmation_dialog_proceed").unbind("click");
-                });
-                $("#confirmation_dialog_body").html("<p>Delete the tile named " + tile_name + "?</p>");
-                $("#confirmation_dialog").modal("show");
-
-            }
-        });
+const cache_update = redraw_tiles;
 
-        const cache_update = redraw_tiles;
-
-        const load_update_interval = function() {
-            return new Promise(function(resolve) {
-                settings.get(settings_key).then(function(value) {
-                    const seconds = Number.parseInt(value);
-                    update_interval = seconds * 1000;
-                    resolve();
-                });
-            });
-        };
-
-        const set_update_interval = function(seconds) {
-            // create a default
+const load_update_interval = function () {
+    return new Promise(function (resolve) {
+        settings.get(settings_key).then(function (value) {
+            const seconds = Number.parseInt(value);
             update_interval = seconds * 1000;
-            return settings.put(settings_key, seconds);
-        };
-
-        const schedule_interval = function() {
-            if (intervalID) {
-                clearInterval(intervalID);
-            }
-            intervalID = setInterval(cache_update, update_interval);
-            console.log("tile view: interval scheduled " + update_interval + "ms");
-        };
-
-        const load_tile_view = function() {
-            return new Promise(function(resolve) {
-                settings.get(tile_view_key).then(function(value) {
-                    resolve(value);
-                });
-            });
-        };
-
-        const update_tile_view = function(tile_view) {
-            return new Promise(function(resolve) {
-                settings.put(tile_view_key, tile_view).then(function() {
-                    console.log("tile view saved");
-                    resolve();
-                }).catch(function(error) {
-                    console.log(error);
-                });
-            });
-        };
-
-        const update_filter_mode = function(text) {
-            $("#tile-filter-dropdown").text(text);
-        };
-
-        $("#tile-filter-show-all").click(function(event) {
-            const tile_filter_text = "Showing All Tiles";
-            update_filter_mode(tile_filter_text);
-            update_tile_view({ "show_alarm_tiles": true, "show_normal_tiles": true, "tile_filter_text": tile_filter_text }).then(function() {
-                update_tile_info();
-            });
+            resolve();
         });
-
-        $("#tile-filter-show-alarm").click(function(event) {
-            const tile_filter_text = "Showing Alarm/Alert Tiles";
-            update_filter_mode(tile_filter_text);
-            update_tile_view({ "show_alarm_tiles": true, "show_normal_tiles": false, "tile_filter_text": tile_filter_text }).then(function() {
-                update_tile_info();
-            });
+    });
+};
+
+const set_update_interval = function (seconds) {
+    // create a default
+    update_interval = seconds * 1000;
+    return settings.put(settings_key, seconds);
+};
+
+const schedule_interval = function () {
+    if (intervalID) {
+        clearInterval(intervalID);
+    }
+    intervalID = setInterval(cache_update, update_interval);
+    console.log("tile view: interval scheduled " + update_interval + "ms");
+};
+
+const load_tile_view = function () {
+    return new Promise(function (resolve) {
+        settings.get(tile_view_key).then(function (value) {
+            resolve(value);
         });
-
-        $("#tile-filter-show-normal").click(function(event) {
-            const tile_filter_text = "Showing Normal Tiles";
-            update_filter_mode(tile_filter_text);
-            update_tile_view({ "show_alarm_tiles": false, "show_normal_tiles": true, "tile_filter_text": tile_filter_text }).then(function() {
-                update_tile_info();
-            });
+    });
+};
+
+const update_tile_view = function (tile_view) {
+    return new Promise(function (resolve) {
+        settings.put(tile_view_key, tile_view).then(function () {
+            console.log("tile view saved");
+            resolve();
+        }).catch(function (error) {
+            console.error(error);
         });
-
-        // check for any tiles, create a default if needed, finish initialization
-        channels.channel_list().then(function(channel_list) {
-            if (channel_list.length === 0) {
-                channels.create_channel("Default", []).then(function() {
-                    redraw_tiles();
-                });
-            } else {
-                redraw_tiles();
-            }
-            return load_update_interval();
-        }).then(function() {
-            schedule_interval();
-            event_alerts.add_callback(event_alert_callback);
-            alarms.add_callback(alarm_callback);
-            // add_selection_callback(selection_listener);
+    });
+};
+
+const update_filter_mode = function (text) {
+    $("#tile-filter-dropdown").text(text);
+};
+
+$("#tile-filter-show-all").click(function () {
+    const tile_filter_text = "Showing All Tiles";
+    update_filter_mode(tile_filter_text);
+    update_tile_view({ "show_alarm_tiles": true, "show_normal_tiles": true, "tile_filter_text": tile_filter_text }).then(function () {
+        update_tile_info();
+    });
+});
+
+$("#tile-filter-show-alarm").click(function () {
+    const tile_filter_text = "Showing Alarm/Alert Tiles";
+    update_filter_mode(tile_filter_text);
+    update_tile_view({ "show_alarm_tiles": true, "show_normal_tiles": false, "tile_filter_text": tile_filter_text }).then(function () {
+        update_tile_info();
+    });
+});
+
+$("#tile-filter-show-normal").click(function () {
+    const tile_filter_text = "Showing Normal Tiles";
+    update_filter_mode(tile_filter_text);
+    update_tile_view({ "show_alarm_tiles": false, "show_normal_tiles": true, "tile_filter_text": tile_filter_text }).then(function () {
+        update_tile_info();
+    });
+});
+
+// check for any tiles, create a default if needed, finish initialization
+channels.channel_list().then(function (channel_list) {
+    if (channel_list.length === 0) {
+        channels.create_channel("Default", []).then(function () {
+            redraw_tiles();
         });
-
-        return {
-            "add_selection_callback": add_selection_callback,
-            "redraw_tiles": redraw_tiles,
-            "update_tile_info": update_tile_info,
-            "select": function(name) {
-                scroll_to_tile(name);
-                select(name);
-            },
-            "unselect": unselect,
-            "selected": selected,
-            "set_update_interval": function(seconds) {
-                set_update_interval(seconds).then(function() {
-                    schedule_interval();
-                });
-            },
-            "get_update_interval": function() {
-                return update_interval;
-            },
-            "blink": function(name) {
-                scroll_to_tile(name);
-                blink(10, name);
-            },
-            "shown": shown
-        };
-    });
\ No newline at end of file
+    } else {
+        redraw_tiles();
+    }
+    return load_update_interval();
+}).then(function () {
+    schedule_interval();
+    event_alerts.add_callback(event_alert_callback);
+    alarms.add_callback(alarm_callback);
+    // add_selection_callback(selection_listener);
+});
+
+const select_external = function (name) {
+    scroll_to_tile(name);
+    select(name);
+};
+
+const set_update_interval_external = function (seconds) {
+    set_update_interval(seconds).then(function () {
+        schedule_interval();
+    });
+};
+
+const get_update_interval_external = function () {
+    return update_interval;
+};
+
+const blink_external = function (name) {
+    scroll_to_tile(name);
+    blink(10, name);
+};
+
+export {
+    add_selection_callback,
+    redraw_tiles,
+    update_tile_info,
+    unselect,
+    selected,
+    shown,
+    select_external as select,
+    set_update_interval_external as set_update_interval,
+    get_update_interval_external as get_update_interval,
+    blink_external as blink
+};
diff --git a/source/html/js/app/ui/tools_menu.js b/source/html/js/app/ui/tools_menu.js
deleted file mode 100644
index 6edaf5ce..00000000
--- a/source/html/js/app/ui/tools_menu.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-       SPDX-License-Identifier: Apache-2.0 */
-
-define(["jquery", "lodash", "app/plugins", "app/ui/util"], function($, _, plugins, ui_util) {
-
-    var div_id = "tools-dropdown-menu";
-
-    require(plugins.tools, function() {
-        for (let tool_module of arguments) {
-            var menu_id = ui_util.makeid();
-            var html = `<a class="dropdown-item" href="#" id="${menu_id}">${tool_module.name}</a>`;
-            $("#" + div_id).append(html);
-            $("#" + menu_id).on("click", (function(local_tool_module, local_jq) {
-                return function(event) {
-                    local_tool_module.run().then(function(result) {
-                        var alert_class = result.success ? "alert-success" : "alert-danger";
-                        var prefix = result.success ? "Passed" : "Failed";
-                        var html = `<div class="alert ${alert_class}" style="width: 100%; text-align: center;" role="alert">${prefix}: Output for ${local_tool_module.name}</div>`;
-                        local_jq("#tool_output_modal_title").html(html);
-                        local_jq("#tool_output_modal_message").html(result.message);
-                        local_jq("#tool_output_modal").modal('show');
-                    }).catch(function(error) {
-                        var alert_class = "alert-danger";
-                        var html = `<div class="alert ${alert_class}" style="width: 100%; text-align: center;" role="alert">Failed: Output for ${local_tool_module.name}</div>`;
-                        local_jq("#tool_output_modal_title").html(html);
-                        local_jq("#tool_output_modal_message").html(error);
-                        local_jq("#tool_output_modal").modal('show');
-                    });
-                };
-            })(tool_module, $));
-        }
-    });
-
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/user_defined.js b/source/html/js/app/ui/user_defined.js
index 5d7e780f..c3e32a5f 100644
--- a/source/html/js/app/ui/user_defined.js
+++ b/source/html/js/app/ui/user_defined.js
@@ -1,230 +1,229 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define(["jquery", "lodash", "app/ui/diagrams", "app/model", "app/ui/alert"],
-    function($, _, diagrams, model, alert) {
+import * as diagrams from "./diagrams.js";
+import * as model from "../model.js";
+import * as alert from "./alert.js";
 
-        var add_connection_compartment = "connect-nodes-button";
-        var remove_connection_compartment = "delete-connection-button";
-        var add_connection_button = "connect-nodes-button";
-        var remove_connection_button = "delete-connection-button";
-        var label_edit_compartment = "edit-connection-button";
-        var label_edit_button = "edit-connection-button";
-        // var label_edit_input = "label-edit-input";
+var add_connection_compartment = "connect-nodes-button";
+var remove_connection_compartment = "delete-connection-button";
+var add_connection_button = "connect-nodes-button";
+var remove_connection_button = "delete-connection-button";
+var label_edit_compartment = "edit-connection-button";
+var label_edit_button = "edit-connection-button";
+// var label_edit_input = "label-edit-input";
 
 
-        var create_connection_record = function(options) {
-            var updated = moment(new Date());
-            var expires = moment(updated).add(1, 'y');
-            var data = {
-                "user-defined": true,
-                "from": `${options.from}`,
-                "to": `${options.to}`,
-                "expires": options.expires || expires.unix()
-            };
-            var record = {
-                "arn": `${options.from}:${options.to}`,
-                "data": JSON.stringify(data),
-                "expires": options.expires || expires.unix(),
-                "label": options.label || "new connection",
-                "from": `${options.from}`,
-                "region": "global",
-                "service": "user-defined-connection",
-                "to": `${options.to}`,
-                "updated": updated.unix()
-            };
-            return record;
-        };
+var create_connection_record = function (options) {
+    var updated = moment(new Date());
+    var expires = moment(updated).add(1, 'y');
+    var data = {
+        "user-defined": true,
+        "from": `${options.from}`,
+        "to": `${options.to}`,
+        "expires": options.expires || expires.unix()
+    };
+    var record = {
+        "arn": `${options.from}:${options.to}`,
+        "data": JSON.stringify(data),
+        "expires": options.expires || expires.unix(),
+        "label": options.label || "new connection",
+        "from": `${options.from}`,
+        "region": "global",
+        "service": "user-defined-connection",
+        "to": `${options.to}`,
+        "updated": updated.unix()
+    };
+    return record;
+};
 
-        var show_add_connection = (visible) => {
-            if (visible) {
-                $("#" + add_connection_compartment).removeClass("hidden-compartment");
-            } else {
-                $("#" + add_connection_compartment).addClass("hidden-compartment");
-            }
-        };
+var show_add_connection = (visible) => {
+    if (visible) {
+        $("#" + add_connection_compartment).removeClass("hidden-compartment");
+    } else {
+        $("#" + add_connection_compartment).addClass("hidden-compartment");
+    }
+};
 
-        var show_remove_connection = (visible) => {
-            if (visible) {
-                $("#" + remove_connection_compartment).removeClass("hidden-compartment");
-            } else {
-                $("#" + remove_connection_compartment).addClass("hidden-compartment");
-            }
-        };
+var show_remove_connection = (visible) => {
+    if (visible) {
+        $("#" + remove_connection_compartment).removeClass("hidden-compartment");
+    } else {
+        $("#" + remove_connection_compartment).addClass("hidden-compartment");
+    }
+};
 
-        var show_edit_connection = (visible) => {
-            if (visible) {
-                $("#" + label_edit_compartment).removeClass("hidden-compartment");
-            } else {
-                $("#" + label_edit_compartment).addClass("hidden-compartment");
-            }
-        };
+var show_edit_connection = (visible) => {
+    if (visible) {
+        $("#" + label_edit_compartment).removeClass("hidden-compartment");
+    } else {
+        $("#" + label_edit_compartment).addClass("hidden-compartment");
+    }
+};
 
-        $("#" + add_connection_button).click((event) => {
-            // add a connection to the model
-            show_add_connection(false);
-            var diagram = diagrams.shown();
-            console.log(`diagram is ${diagram.name}`);
-            var selected = diagram.network.getSelectedNodes();
-            if (selected.length == 2) {
-                // add the new connection to the REST API
-                var record = create_connection_record({
-                    "from": selected[0],
-                    "to": selected[1]
-                });
-                // write the table first, don't wait
-                model.put_records(record).then(function(result) {
-                    alert.show("Saved connection");
-                }).catch(function(error) {
-                    console.log(error);
-                    alert.show("Error saving connection");
-                });
-                // update in-memory model
-                model.edges.update({
-                    "id": record.arn,
-                    "to": record.to,
-                    "from": record.from,
-                    "label": record.label,
-                    "data": JSON.parse(record.data),
-                    "arrows": "to",
-                    "color": {
-                        "color": "black"
-                    }
-                });
-                // refresh each diagram containing to and from nodes
-                var matches = diagrams.have_all([record.to, record.from]);
-                for (let match of matches) {
-                    // we only need to sync one side of the connection
-                    match.synchronize_edges("add", [record.from]);
-                }
-                // done
-            } else {
-                console.log("only two nodes can be selected");
-            }
+$("#" + add_connection_button).click(() => {
+    // add a connection to the model
+    show_add_connection(false);
+    var diagram = diagrams.shown();
+    console.log(`diagram is ${diagram.name}`);
+    var selected = diagram.network.getSelectedNodes();
+    if (selected.length == 2) {
+        // add the new connection to the REST API
+        var record = create_connection_record({
+            "from": selected[0],
+            "to": selected[1]
         });
-
-        $("#" + remove_connection_button).click((event) => {
-            show_remove_connection(false);
-            show_edit_connection(false);
-            var diagram = diagrams.shown();
-            console.log(`diagram is ${diagram.name}`);
-            var selected = diagram.network.getSelectedEdges();
-            if (selected.length == 1) {
-                var edge = model.edges.get(selected[0]);
-                // delete the connection from the REST API
-                model.delete_record(edge.id).then(function() {
-                    alert.show("Deleted");
-                }).catch(function(error) {
-                    console.log(error);
-                    alert.show("Error deleting connection");
-                });
-                // refresh the diagrams
-                model.edges.remove(edge.id);
-                // refresh each diagram containing to and from nodes
-                var matches = diagrams.have_all([edge.to, edge.from]);
-                for (let match of matches) {
-                    // we only need to sync one side of the connection
-                    match.edges.remove(edge.id);
-                }
-                // done
-            } else {
-                console.log("only one connection can be selected");
-            }
+        // write the table first, don't wait
+        model.put_records(record).then(function () {
+            alert.show("Saved connection");
+        }).catch(function (error) {
+            console.error(error);
+            alert.show("Error saving connection");
         });
-
-        $("#" + label_edit_button).click((event) => {
-            // open the create/edit connection dialog
-            $('#edit_connection_dialog_expiration').datepicker({
-                format: 'yyyy-mm-dd',
-                startDate: new Date().toDateString()
-            });
-            $("#edit_connection_dialog").modal("show");
-            // update the dialog fields
-            var diagram = diagrams.shown();
-            console.log(`diagram is ${diagram.name}`);
-            var selected = diagram.network.getSelectedEdges();
-            if (selected.length == 1) {
-                var edge = model.edges.get(selected[0]);
-                $("#edit_connection_dialog_label").val(edge.label);
-                var expires = new Date();
-                expires.setTime(edge.data.expires * 1000);
-                var initial = `${expires.getFullYear()}/${expires.getMonth()+1}/${expires.getDate()}`;
-                $('#edit_connection_dialog_expiration').datepicker('update', initial);
+        // update in-memory model
+        model.edges.update({
+            "id": record.arn,
+            "to": record.to,
+            "from": record.from,
+            "label": record.label,
+            "data": JSON.parse(record.data),
+            "arrows": "to",
+            "color": {
+                "color": "black"
             }
         });
+        // refresh each diagram containing to and from nodes
+        var matches = diagrams.have_all([record.to, record.from]);
+        for (let match of matches) {
+            // we only need to sync one side of the connection
+            match.synchronize_edges("add", [record.from]);
+        }
+        // done
+    } else {
+        console.log("only two nodes can be selected");
+    }
+});
 
-        $("#edit_connection_dialog_proceed").click((event) => {
-            $("#edit_connection_dialog").modal('hide');
-            var expires_seconds = moment($("#edit_connection_dialog_expiration").val()).format("X");
-            // var expires_seconds = (Date.parse($("#edit_connection_dialog_expiration").val()) / 1000).toFixed(0);
-            var diagram = diagrams.shown();
-            console.log(`diagram is ${diagram.name}`);
-            var selected = diagram.network.getSelectedEdges();
-            if (selected.length == 1) {
-                var edge = model.edges.get(selected[0]);
-                var new_expires = Number.parseInt(expires_seconds);
-                var new_label = $("#edit_connection_dialog_label").val();
-                // add the new connection to the REST API
-                var record = create_connection_record({
-                    "from": edge.from,
-                    "to": edge.to,
-                    "label": new_label,
-                    "expires": new_expires
-                });
-                // console.log(record);
-                // write the table first
-                model.put_records(record).then(function(result) {
-                    // done
-                    alert.show("Saved");
-                }).catch(function(error) {
-                    console.log(error);
-                    alert.show("Error saving changes");
-                });
-                // refresh the diagrams
-                var updated_edge = {
-                    "id": edge.id,
-                    "to": edge.to,
-                    "from": edge.from,
-                    "label": record.label,
-                    "data": JSON.parse(record.data),
-                    "arrows": "to",
-                    "color": {
-                        "color": "black"
-                    }
-                };
-                // console.log(updated_edge);
-                // update in-memory model
-                model.edges.update(updated_edge);
-                // refresh each diagram containing to and from nodes
-                var matches = diagrams.have_all([edge.to, edge.from]);
-                for (let match of matches) {
-                    match.edges.update(updated_edge);
-                }
-            } else {
-                console.log("only one connection can be selected");
-            }
+$("#" + remove_connection_button).click(() => {
+    show_remove_connection(false);
+    show_edit_connection(false);
+    var diagram = diagrams.shown();
+    console.log(`diagram is ${diagram.name}`);
+    var selected = diagram.network.getSelectedEdges();
+    if (selected.length == 1) {
+        var edge = model.edges.get(selected[0]);
+        // delete the connection from the REST API
+        model.delete_record(edge.id).then(function () {
+            alert.show("Deleted");
+        }).catch(function (error) {
+            console.error(error);
+            alert.show("Error deleting connection");
         });
+        // refresh the diagrams
+        model.edges.remove(edge.id);
+        // refresh each diagram containing to and from nodes
+        var matches = diagrams.have_all([edge.to, edge.from]);
+        for (let match of matches) {
+            // we only need to sync one side of the connection
+            match.edges.remove(edge.id);
+        }
+        // done
+    } else {
+        console.log("only one connection can be selected");
+    }
+});
 
-        diagrams.add_selection_callback(function(diagram, event) {
-            if (event.nodes.length == 2) {
-                diagram = diagrams.shown();
-                var connected = diagram.network.getConnectedNodes(event.nodes[0]);
-                // console.log(connected);
-                if (!connected.includes(event.nodes[1])) {
-                    show_add_connection(true);
-                }
-            } else {
-                show_add_connection(false);
-            }
-            if (event.edges.length == 1 && event.nodes.length == 0) {
-                diagram = diagrams.shown();
-                var edge = diagram.edges.get(event.edges[0]);
-                show_remove_connection(edge.data["user-defined"]);
-                show_edit_connection(edge.data["user-defined"]);
-            } else {
-                show_remove_connection(false);
-                show_edit_connection(false);
-            }
+$("#" + label_edit_button).click(() => {
+    // open the create/edit connection dialog
+    $('#edit_connection_dialog_expiration').datepicker({
+        format: 'yyyy-mm-dd',
+        startDate: new Date().toDateString()
+    });
+    $("#edit_connection_dialog").modal("show");
+    // update the dialog fields
+    var diagram = diagrams.shown();
+    console.log(`diagram is ${diagram.name}`);
+    var selected = diagram.network.getSelectedEdges();
+    if (selected.length == 1) {
+        var edge = model.edges.get(selected[0]);
+        $("#edit_connection_dialog_label").val(edge.label);
+        var expires = new Date();
+        expires.setTime(edge.data.expires * 1000);
+        var initial = `${expires.getFullYear()}/${expires.getMonth() + 1}/${expires.getDate()}`;
+        $('#edit_connection_dialog_expiration').datepicker('update', initial);
+    }
+});
+
+$("#edit_connection_dialog_proceed").click(() => {
+    $("#edit_connection_dialog").modal('hide');
+    var expires_seconds = moment($("#edit_connection_dialog_expiration").val()).format("X");
+    // var expires_seconds = (Date.parse($("#edit_connection_dialog_expiration").val()) / 1000).toFixed(0);
+    var diagram = diagrams.shown();
+    console.log(`diagram is ${diagram.name}`);
+    var selected = diagram.network.getSelectedEdges();
+    if (selected.length == 1) {
+        var edge = model.edges.get(selected[0]);
+        var new_expires = Number.parseInt(expires_seconds);
+        var new_label = $("#edit_connection_dialog_label").val();
+        // add the new connection to the REST API
+        var record = create_connection_record({
+            "from": edge.from,
+            "to": edge.to,
+            "label": new_label,
+            "expires": new_expires
+        });
+        // console.log(record);
+        // write the table first
+        model.put_records(record).then(function () {
+            // done
+            alert.show("Saved");
+        }).catch(function (error) {
+            console.error(error);
+            alert.show("Error saving changes");
         });
+        // refresh the diagrams
+        var updated_edge = {
+            "id": edge.id,
+            "to": edge.to,
+            "from": edge.from,
+            "label": record.label,
+            "data": JSON.parse(record.data),
+            "arrows": "to",
+            "color": {
+                "color": "black"
+            }
+        };
+        // console.log(updated_edge);
+        // update in-memory model
+        model.edges.update(updated_edge);
+        // refresh each diagram containing to and from nodes
+        var matches = diagrams.have_all([edge.to, edge.from]);
+        for (let match of matches) {
+            match.edges.update(updated_edge);
+        }
+    } else {
+        console.log("only one connection can be selected");
+    }
+});
 
-    });
\ No newline at end of file
+diagrams.add_selection_callback(function (diagram, event) {
+    if (event.nodes.length == 2) {
+        diagram = diagrams.shown();
+        var connected = diagram.network.getConnectedNodes(event.nodes[0]);
+        // console.log(connected);
+        if (!connected.includes(event.nodes[1])) {
+            show_add_connection(true);
+        }
+    } else {
+        show_add_connection(false);
+    }
+    if (event.edges.length == 1 && event.nodes.length == 0) {
+        diagram = diagrams.shown();
+        var edge = diagram.edges.get(event.edges[0]);
+        show_remove_connection(edge.data["user-defined"]);
+        show_edit_connection(edge.data["user-defined"]);
+    } else {
+        show_remove_connection(false);
+        show_edit_connection(false);
+    }
+});
diff --git a/source/html/js/app/ui/util.js b/source/html/js/app/ui/util.js
index da58750b..a13d5f7f 100644
--- a/source/html/js/app/ui/util.js
+++ b/source/html/js/app/ui/util.js
@@ -1,58 +1,48 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define([], function() {
+export var makeid = function (id_len = 10) {
+    var text = "";
+    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    for (let i = 0; i < id_len; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+};
 
-    var makeid = function(id_len = 10) {
-        var text = "";
-        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-        for (let i = 0; i < id_len; i++) {
-            text += possible.charAt(Math.floor(Math.random() * possible.length));
-        }
-        return text;
-    };
+export function get_random_number(max) {
+    return Math.floor(Math.random() * Math.floor(max));
+}
 
-    function get_random_number(max) {
-        return Math.floor(Math.random() * Math.floor(max));
-    }
+export function vary(value, limit) {
+    return value + (get_random_number(limit) * (get_random_number(2) == 0 ? -1 : 1));
+}
 
-    function vary(value, limit) {
-        return value + (get_random_number(limit) * (get_random_number(2) == 0 ? -1 : 1));
+export var get_downstream = function (edges, node_id, connected_nodes) {
+    var downstream_edges = edges.get({
+        filter: function (item) {
+            return item.from === node_id;
+        }
+    });
+    for (let edge of downstream_edges) {
+        if (!connected_nodes.includes(edge.to)) {
+            connected_nodes.push(edge.to);
+            get_downstream(edges, edge.to, connected_nodes);
+        }
     }
+};
 
-    var get_downstream = function(edges, node_id, connected_nodes) {
-        var downstream_edges = edges.get({
-            filter: function(item) {
-                return item.from === node_id;
-            }
-        });
-        for (let edge of downstream_edges) {
-            if (!connected_nodes.includes(edge.to)) {
-                connected_nodes.push(edge.to);
-                get_downstream(edges, edge.to, connected_nodes);
-            }
+export var get_upstream = function (edges, node_id, connected_nodes) {
+    var upstream_edges = edges.get({
+        filter: function (item) {
+            return item.to === node_id;
         }
-    };
-
-    var get_upstream = function(edges, node_id, connected_nodes) {
-        var upstream_edges = edges.get({
-            filter: function(item) {
-                return item.to === node_id;
-            }
-        });
-        for (let edge of upstream_edges) {
-            if (!connected_nodes.includes(edge.from)) {
-                connected_nodes.push(edge.from);
-                get_upstream(edges, edge.from, connected_nodes);
-            }
+    });
+    for (let edge of upstream_edges) {
+        if (!connected_nodes.includes(edge.from)) {
+            connected_nodes.push(edge.from);
+            get_upstream(edges, edge.from, connected_nodes);
         }
-    };
+    }
+};
 
-    return {
-        "makeid": makeid,
-        "get_random_number": get_random_number,
-        "vary": vary,
-        "get_downstream": get_downstream,
-        "get_upstream": get_upstream
-    };
-});
\ No newline at end of file
diff --git a/source/html/js/app/ui/vis_options.js b/source/html/js/app/ui/vis_options.js
index 19b7e62a..a6c1c62f 100644
--- a/source/html/js/app/ui/vis_options.js
+++ b/source/html/js/app/ui/vis_options.js
@@ -1,162 +1,165 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
        SPDX-License-Identifier: Apache-2.0 */
 
-define({
-    diagram_pre_options: {
-        layout: {
-            hierarchical: {
-                enabled: true
-            }
+   
+export const diagram_pre_options = {
+    layout: {
+        hierarchical: {
+            enabled: true
+        }
+    },
+    physics: {
+        enabled: false
+    },
+    interaction: {
+        dragNodes: true,
+        dragView: true,
+        hideEdgesOnDrag: false,
+        hideNodesOnDrag: false,
+        hover: true,
+        hoverConnectedEdges: true,
+        keyboard: {
+            enabled: false,
+            speed: {
+                x: 10,
+                y: 10,
+                zoom: 0.02
+            },
+            bindToWindow: true
         },
-        physics: {
+        multiselect: true,
+        navigationButtons: true,
+        selectable: true,
+        selectConnectedEdges: true,
+        tooltipDelay: 300,
+        zoomView: false
+    }
+};
+
+export const with_layout = {
+    layout: {
+        improvedLayout: true
+    },
+    nodes: {
+        widthConstraint: {
+            maximum: 200
+        }
+    },
+    edges: {
+        smooth: {
             enabled: false
-        },
-        interaction: {
-            dragNodes: true,
-            dragView: true,
-            hideEdgesOnDrag: false,
-            hideNodesOnDrag: false,
-            hover: true,
-            hoverConnectedEdges: true,
-            keyboard: {
-                enabled: false,
-                speed: {
-                    x: 10,
-                    y: 10,
-                    zoom: 0.02
-                },
-                bindToWindow: true
-            },
-            multiselect: true,
-            navigationButtons: true,
-            selectable: true,
-            selectConnectedEdges: true,
-            tooltipDelay: 300,
-            zoomView: false
         }
     },
-    with_layout: {
-        layout: {
-            improvedLayout: true
-        },
-        nodes: {
-            widthConstraint: {
-                maximum: 200
-            }
-        },
-        edges: {
-            smooth: {
-                enabled: false
-            }
-        },
-        physics: {
+    physics: {
+        enabled: true,
+        minVelocity: 25,
+        stabilization: {
             enabled: true,
-            minVelocity: 25,
-            stabilization: {
-                enabled: true,
-                iterations: 10
-            }
-        },
-        interaction: {
-            dragNodes: true,
-            dragView: true,
-            hideEdgesOnDrag: false,
-            hideNodesOnDrag: false,
-            hover: true,
-            hoverConnectedEdges: true,
-            keyboard: {
-                enabled: false,
-                speed: {
-                    x: 10,
-                    y: 10,
-                    zoom: 0.02
-                },
-                bindToWindow: true
-            },
-            multiselect: true,
-            navigationButtons: true,
-            selectable: true,
-            selectConnectedEdges: true,
-            tooltipDelay: 300,
-            zoomView: false
+            iterations: 10
         }
     },
-    without_layout: {
-        layout: {
-            hierarchical: {
-                enabled: false
-            }
-        },
-        edges: {
-            smooth: {
-                enabled: false
-            }
+    interaction: {
+        dragNodes: true,
+        dragView: true,
+        hideEdgesOnDrag: false,
+        hideNodesOnDrag: false,
+        hover: true,
+        hoverConnectedEdges: true,
+        keyboard: {
+            enabled: false,
+            speed: {
+                x: 10,
+                y: 10,
+                zoom: 0.02
+            },
+            bindToWindow: true
         },
-        physics: {
+        multiselect: true,
+        navigationButtons: true,
+        selectable: true,
+        selectConnectedEdges: true,
+        tooltipDelay: 300,
+        zoomView: false
+    }
+};
+
+export const without_layout = {
+    layout: {
+        hierarchical: {
             enabled: false
-        },
-        interaction: {
-            dragNodes: true,
-            dragView: true,
-            hideEdgesOnDrag: false,
-            hideNodesOnDrag: false,
-            hover: true,
-            hoverConnectedEdges: true,
-            keyboard: {
-                enabled: false,
-                speed: {
-                    x: 10,
-                    y: 10,
-                    zoom: 0.02
-                },
-                bindToWindow: true
-            },
-            multiselect: true,
-            navigationButtons: true,
-            selectable: true,
-            selectConnectedEdges: true,
-            tooltipDelay: 300,
-            zoomView: false
         }
     },
-    vertical_layout: {
-        layout: {
-            hierarchical: {
-                enabled: true,
-                direction: "UD",
-                sortMethod: "hubsize",
-                nodeSpacing: 250,
-                treeSpacing: 250,
-                levelSeparation: 250
-            }
-        },
-        edges: {
-            smooth: {
-                enabled: false
-            }
-        },
-        physics: {
+    edges: {
+        smooth: {
             enabled: false
         }
     },
-    horizontal_layout: {
-        layout: {
-            hierarchical: {
-                enabled: true,
-                direction: "LR",
-                sortMethod: "hubsize",
-                nodeSpacing: 250,
-                treeSpacing: 250,
-                levelSeparation: 350
-            }
-        },
-        edges: {
-            smooth: {
-                enabled: false
-            }
+    physics: {
+        enabled: false
+    },
+    interaction: {
+        dragNodes: true,
+        dragView: true,
+        hideEdgesOnDrag: false,
+        hideNodesOnDrag: false,
+        hover: true,
+        hoverConnectedEdges: true,
+        keyboard: {
+            enabled: false,
+            speed: {
+                x: 10,
+                y: 10,
+                zoom: 0.02
+            },
+            bindToWindow: true
         },
-        physics: {
+        multiselect: true,
+        navigationButtons: true,
+        selectable: true,
+        selectConnectedEdges: true,
+        tooltipDelay: 300,
+        zoomView: false
+    }
+};
+
+export const vertical_layout = {
+    layout: {
+        hierarchical: {
+            enabled: true,
+            direction: "UD",
+            sortMethod: "hubsize",
+            nodeSpacing: 250,
+            treeSpacing: 250,
+            levelSeparation: 250
+        }
+    },
+    edges: {
+        smooth: {
+            enabled: false
+        }
+    },
+    physics: {
+        enabled: false
+    }
+};
+
+export const horizontal_layout = {
+    layout: {
+        hierarchical: {
+            enabled: true,
+            direction: "LR",
+            sortMethod: "hubsize",
+            nodeSpacing: 250,
+            treeSpacing: 250,
+            levelSeparation: 350
+        }
+    },
+    edges: {
+        smooth: {
             enabled: false
         }
+    },
+    physics: {
+        enabled: false
     }
-});
\ No newline at end of file
+};
diff --git a/source/html/js/app/window.js b/source/html/js/app/window.js
deleted file mode 100644
index a9f1810b..00000000
--- a/source/html/js/app/window.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-       SPDX-License-Identifier: Apache-2.0 */
-
-define(function() {
-    return window;
-});
\ No newline at end of file
diff --git a/source/html/js/lib/jquery.js b/source/html/js/lib/jquery.js
deleted file mode 100644
index 1b6dd2c7..00000000
--- a/source/html/js/lib/jquery.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*! Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-       SPDX-License-Identifier: Apache-2.0 */
-
-define('jquery', [], function() {
-    return jQuery;
-});
\ No newline at end of file
diff --git a/source/html/package-lock.json b/source/html/package-lock.json
index b1cecaa3..64740234 100644
--- a/source/html/package-lock.json
+++ b/source/html/package-lock.json
@@ -19,11 +19,46 @@
         "moment": "2.24",
         "object-hash": "^2.2.0",
         "renderjson": "^1.4.0",
-        "requirejs": "^2.3.6",
         "svg.js": "^2.6.6",
         "tabulator-tables": "^4.9.3",
         "urijs": "^1.19.7",
         "vis": "^4.21.0"
+      },
+      "devDependencies": {
+        "eslint": "^8.11.0",
+        "jshint": "^2.13.4"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
+      "integrity": "sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.1",
+        "globals": "^13.9.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@fortawesome/fontawesome-free": {
@@ -35,6 +70,99 @@
         "node": ">=6"
       }
     },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
     "node_modules/bootstrap": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
@@ -56,11 +184,466 @@
         "jquery": ">=1.7.1 <4.0.0"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cli/-/cli-1.0.1.tgz",
+      "integrity": "sha1-IoF1NPJL+klQw01TLUjsvGIbjBQ=",
+      "dev": true,
+      "dependencies": {
+        "exit": "0.1.2",
+        "glob": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=0.2.5"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "node_modules/console-browserify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
+      "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=",
+      "dev": true,
+      "dependencies": {
+        "date-now": "^0.1.4"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/date-now": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
+      "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
+      "dev": true
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "node_modules/domhandler": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
+      "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "node_modules/emitter-component": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
       "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
     },
+    "node_modules/entities": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
+      "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=",
+      "dev": true
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.11.0.tgz",
+      "integrity": "sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/eslintrc": "^1.2.1",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.6.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
+      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.7.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
+      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
+      "dev": true
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
     "node_modules/fuse.js": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.5.3.tgz",
@@ -69,6 +652,53 @@
         "node": ">=10"
       }
     },
+    "node_modules/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
+      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/hammerjs": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
@@ -97,6 +727,111 @@
         "uglify-js": "^3.1.4"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
+      "integrity": "sha1-mWwosZFRaovoZQGn15dX5ccMEGg=",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "1",
+        "domhandler": "2.3",
+        "domutils": "1.5",
+        "entities": "1.0",
+        "readable-stream": "1.1"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+      "dev": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
     "node_modules/jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
@@ -112,16 +847,77 @@
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.0.2.tgz",
       "integrity": "sha1-cia3BOBLkUQfwivFlnrj2Awh+wo="
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jshint": {
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.13.4.tgz",
+      "integrity": "sha512-HO3bosL84b2qWqI0q+kpT/OpRJwo0R4ivgmxaO848+bo10rc50SkPnrtwSFXttW0ym4np8jbJvLwk5NziB7jIw==",
+      "dev": true,
+      "dependencies": {
+        "cli": "~1.0.0",
+        "console-browserify": "1.1.x",
+        "exit": "0.1.x",
+        "htmlparser2": "3.8.x",
+        "lodash": "~4.17.21",
+        "minimatch": "~3.0.2",
+        "strip-json-comments": "1.0.x"
+      },
+      "bin": {
+        "jshint": "bin/jshint"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
     "node_modules/keycharm": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
       "integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/machina": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/machina/-/machina-4.0.2.tgz",
@@ -138,6 +934,18 @@
       "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.10.5.tgz",
       "integrity": "sha512-+4l0xbfKlA2eSXJrhISYvCvT8e9HqQk3BLdOCPGal5qPYAQoTI8TTacYI0yXyf7WS6BpKrhQemUenhmR0IoS8A=="
     },
+    "node_modules/minimatch": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
@@ -151,6 +959,18 @@
         "node": "*"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -164,6 +984,62 @@
         "node": ">= 6"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@@ -175,6 +1051,15 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/propagating-hammerjs": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.5.0.tgz",
@@ -183,21 +1068,87 @@
         "hammerjs": "^2.0.8"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
     "node_modules/renderjson": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/renderjson/-/renderjson-1.4.0.tgz",
       "integrity": "sha512-R0IZoxjWQP4XMJjLkPjNKSwjDyl20EiLohyu1Os7AvIvO4F4Vtar1N6IjJLPLjDN7OYOXTsqtIVJupQnQMvYQw=="
     },
-    "node_modules/requirejs": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz",
-      "integrity": "sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg==",
-      "bin": {
-        "r_js": "bin/r.js",
-        "r.js": "bin/r.js"
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/source-map": {
@@ -208,6 +1159,48 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+      "dev": true
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
+      "integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=",
+      "dev": true,
+      "bin": {
+        "strip-json-comments": "cli.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/svg.js": {
       "version": "2.6.6",
       "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.6.6.tgz",
@@ -218,6 +1211,36 @@
       "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-4.9.3.tgz",
       "integrity": "sha512-iwwQqAEGGxlgrBpcmJJvMJrfjGLcCXOB3AOb/DGkXqBy1YKoYA36hIl7qXGp6Jo8dSkzFAlDT6pKLZgyhs9OnQ=="
     },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/uglify-js": {
       "version": "3.14.5",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.5.tgz",
@@ -230,11 +1253,26 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/urijs": {
       "version": "1.19.10",
       "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.10.tgz",
       "integrity": "sha512-EzauQlgKuJgsXOqoMrCiePBf4At5jVqRhXykF3Wfb8ZsOBMxPcfiVBcsHXug4Aepb/ICm2PIgqAUGMelgdrWEg=="
     },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
     "node_modules/vis": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/vis/-/vis-4.21.0.tgz",
@@ -248,18 +1286,142 @@
         "propagating-hammerjs": "^1.4.6"
       }
     },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     }
   },
   "dependencies": {
+    "@eslint/eslintrc": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
+      "integrity": "sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.1",
+        "globals": "^13.9.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        }
+      }
+    },
     "@fortawesome/fontawesome-free": {
       "version": "5.15.4",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
       "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
     },
+    "@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
     "bootstrap": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
@@ -274,16 +1436,408 @@
         "jquery": ">=1.7.1 <4.0.0"
       }
     },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "cli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cli/-/cli-1.0.1.tgz",
+      "integrity": "sha1-IoF1NPJL+klQw01TLUjsvGIbjBQ=",
+      "dev": true,
+      "requires": {
+        "exit": "0.1.2",
+        "glob": "^7.1.1"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "console-browserify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
+      "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=",
+      "dev": true,
+      "requires": {
+        "date-now": "^0.1.4"
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "date-now": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
+      "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+          "dev": true
+        }
+      }
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
+      "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1"
+      }
+    },
+    "domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "emitter-component": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
       "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
     },
+    "entities": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
+      "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true
+    },
+    "eslint": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.11.0.tgz",
+      "integrity": "sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==",
+      "dev": true,
+      "requires": {
+        "@eslint/eslintrc": "^1.2.1",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.6.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true
+    },
+    "espree": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
+      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.7.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
+      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
     "fuse.js": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.5.3.tgz",
       "integrity": "sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg=="
     },
+    "glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.3"
+      }
+    },
+    "globals": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
+      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.20.2"
+      }
+    },
     "hammerjs": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
@@ -301,6 +1855,90 @@
         "wordwrap": "^1.0.0"
       }
     },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "htmlparser2": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
+      "integrity": "sha1-mWwosZFRaovoZQGn15dX5ccMEGg=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1",
+        "domhandler": "2.3",
+        "domutils": "1.5",
+        "entities": "1.0",
+        "readable-stream": "1.1"
+      }
+    },
+    "ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
     "jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
@@ -316,16 +1954,68 @@
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.0.2.tgz",
       "integrity": "sha1-cia3BOBLkUQfwivFlnrj2Awh+wo="
     },
+    "js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
+    "jshint": {
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.13.4.tgz",
+      "integrity": "sha512-HO3bosL84b2qWqI0q+kpT/OpRJwo0R4ivgmxaO848+bo10rc50SkPnrtwSFXttW0ym4np8jbJvLwk5NziB7jIw==",
+      "dev": true,
+      "requires": {
+        "cli": "~1.0.0",
+        "console-browserify": "1.1.x",
+        "exit": "0.1.x",
+        "htmlparser2": "3.8.x",
+        "lodash": "~4.17.21",
+        "minimatch": "~3.0.2",
+        "strip-json-comments": "1.0.x"
+      }
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
     "keycharm": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
       "integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
     },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "machina": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/machina/-/machina-4.0.2.tgz",
@@ -339,6 +2029,15 @@
       "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.10.5.tgz",
       "integrity": "sha512-+4l0xbfKlA2eSXJrhISYvCvT8e9HqQk3BLdOCPGal5qPYAQoTI8TTacYI0yXyf7WS6BpKrhQemUenhmR0IoS8A=="
     },
+    "minimatch": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
@@ -349,6 +2048,18 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -359,12 +2070,62 @@
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
       "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
     },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
     "popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
       "peer": true
     },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
     "propagating-hammerjs": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.5.0.tgz",
@@ -373,21 +2134,100 @@
         "hammerjs": "^2.0.8"
       }
     },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true
+    },
     "renderjson": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/renderjson/-/renderjson-1.4.0.tgz",
       "integrity": "sha512-R0IZoxjWQP4XMJjLkPjNKSwjDyl20EiLohyu1Os7AvIvO4F4Vtar1N6IjJLPLjDN7OYOXTsqtIVJupQnQMvYQw=="
     },
-    "requirejs": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz",
-      "integrity": "sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg=="
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
     },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+      "dev": true
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-json-comments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
+      "integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E=",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
     "svg.js": {
       "version": "2.6.6",
       "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.6.6.tgz",
@@ -398,17 +2238,53 @@
       "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-4.9.3.tgz",
       "integrity": "sha512-iwwQqAEGGxlgrBpcmJJvMJrfjGLcCXOB3AOb/DGkXqBy1YKoYA36hIl7qXGp6Jo8dSkzFAlDT6pKLZgyhs9OnQ=="
     },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.14.5",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.5.tgz",
       "integrity": "sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==",
       "optional": true
     },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
     "urijs": {
       "version": "1.19.10",
       "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.10.tgz",
       "integrity": "sha512-EzauQlgKuJgsXOqoMrCiePBf4At5jVqRhXykF3Wfb8ZsOBMxPcfiVBcsHXug4Aepb/ICm2PIgqAUGMelgdrWEg=="
     },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
     "vis": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/vis/-/vis-4.21.0.tgz",
@@ -421,10 +2297,31 @@
         "propagating-hammerjs": "^1.4.6"
       }
     },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     }
   }
 }
diff --git a/source/html/package.json b/source/html/package.json
index 97f40a3d..41092d44 100644
--- a/source/html/package.json
+++ b/source/html/package.json
@@ -14,10 +14,13 @@
     "moment": "2.24",
     "object-hash": "^2.2.0",
     "renderjson": "^1.4.0",
-    "requirejs": "^2.3.6",
     "svg.js": "^2.6.6",
     "tabulator-tables": "^4.9.3",
     "urijs": "^1.19.7",
     "vis": "^4.21.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.11.0",
+    "jshint": "^2.13.4"
   }
 }
diff --git a/source/msam/app.py b/source/msam/app.py
index 0e1e404f..0cae6389 100644
--- a/source/msam/app.py
+++ b/source/msam/app.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains the REST API and CloudWatch entry-points for the MSAM backend.
diff --git a/source/msam/chalicelib/cache.py b/source/msam/chalicelib/cache.py
index fb3476f7..8af91750 100644
--- a/source/msam/chalicelib/cache.py
+++ b/source/msam/chalicelib/cache.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions for updating and querying the cache.
diff --git a/source/msam/chalicelib/channels.py b/source/msam/chalicelib/channels.py
index 551ecd57..1f42e244 100644
--- a/source/msam/chalicelib/channels.py
+++ b/source/msam/chalicelib/channels.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions related to channels.
diff --git a/source/msam/chalicelib/cloudwatch.py b/source/msam/chalicelib/cloudwatch.py
index ca91b934..35cfb618 100644
--- a/source/msam/chalicelib/cloudwatch.py
+++ b/source/msam/chalicelib/cloudwatch.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions related to CloudWatch alarms.
diff --git a/source/msam/chalicelib/connections.py b/source/msam/chalicelib/connections.py
index e9a358fe..2d023815 100644
--- a/source/msam/chalicelib/connections.py
+++ b/source/msam/chalicelib/connections.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions for building the connection cache.
diff --git a/source/msam/chalicelib/content.py b/source/msam/chalicelib/content.py
index 9582afea..46f550d9 100644
--- a/source/msam/chalicelib/content.py
+++ b/source/msam/chalicelib/content.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions related to the content DynamoDB table.
diff --git a/source/msam/chalicelib/layout.py b/source/msam/chalicelib/layout.py
index b80e312f..03c19c9e 100644
--- a/source/msam/chalicelib/layout.py
+++ b/source/msam/chalicelib/layout.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions related to layout.
diff --git a/source/msam/chalicelib/nodes.py b/source/msam/chalicelib/nodes.py
index 97f68b28..cbe4e422 100644
--- a/source/msam/chalicelib/nodes.py
+++ b/source/msam/chalicelib/nodes.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions for building the node cache.
diff --git a/source/msam/chalicelib/periodic.py b/source/msam/chalicelib/periodic.py
index cd5d830c..d7d266b5 100644
--- a/source/msam/chalicelib/periodic.py
+++ b/source/msam/chalicelib/periodic.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions for updating the cache.
diff --git a/source/msam/chalicelib/settings.py b/source/msam/chalicelib/settings.py
index 67e94d3f..f6483324 100644
--- a/source/msam/chalicelib/settings.py
+++ b/source/msam/chalicelib/settings.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions related to settings.
diff --git a/source/msam/chalicelib/tags.py b/source/msam/chalicelib/tags.py
index 08c1098a..812ff3bf 100644
--- a/source/msam/chalicelib/tags.py
+++ b/source/msam/chalicelib/tags.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This file contains helper functions for building the node cache.
diff --git a/source/msam/db/lambda_function.py b/source/msam/db/lambda_function.py
index f12ec371..79484e13 100644
--- a/source/msam/db/lambda_function.py
+++ b/source/msam/db/lambda_function.py
@@ -3,7 +3,7 @@
 templates to populate the database with reasonable defaults.
 """
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 import os
diff --git a/source/msam/db/makezip.sh b/source/msam/db/makezip.sh
index c45e8dc1..df405b1c 100755
--- a/source/msam/db/makezip.sh
+++ b/source/msam/db/makezip.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 ORIGIN=`pwd`
diff --git a/source/tools/autopep8.sh b/source/tools/autopep8.sh
index 0c1e20ac..543e98cd 100755
--- a/source/tools/autopep8.sh
+++ b/source/tools/autopep8.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 autopep8 -i -a -a -r .
diff --git a/source/tools/delete_disconnected.py b/source/tools/delete_disconnected.py
index d9629517..3749a1ba 100644
--- a/source/tools/delete_disconnected.py
+++ b/source/tools/delete_disconnected.py
@@ -1,4 +1,4 @@
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 """
 This is a tool to clean nodes without connections from the content database table.
diff --git a/source/tools/js-beautify.sh b/source/tools/js-beautify.sh
index 6dc80707..fba4d764 100755
--- a/source/tools/js-beautify.sh
+++ b/source/tools/js-beautify.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 find . -iname '*js' -type f -print | xargs -n 1 js-beautify -r
diff --git a/source/tools/jslint-report.sh b/source/tools/jslint-report.sh
index e5abcacc..a49d9edb 100755
--- a/source/tools/jslint-report.sh
+++ b/source/tools/jslint-report.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 find . -name '*js' -type f -print | xargs -n 1 jslint --browser --long --predef define --fudge --white --edition es6 > jslint-report.txt
diff --git a/source/web-cloudformation/cfn_bucket_loader.py b/source/web-cloudformation/cfn_bucket_loader.py
index 7b359725..53cb8874 100644
--- a/source/web-cloudformation/cfn_bucket_loader.py
+++ b/source/web-cloudformation/cfn_bucket_loader.py
@@ -3,7 +3,7 @@
 templates to populate the web bucket with contents of the MSAM web archive.
 """
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 import logging
diff --git a/source/web-cloudformation/makezip.sh b/source/web-cloudformation/makezip.sh
index 5382161f..4f5a9d04 100755
--- a/source/web-cloudformation/makezip.sh
+++ b/source/web-cloudformation/makezip.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 ORIGIN=`pwd`

From 03bc2be51dbe5a5dd1fb45c3ab58c5002bbb9d7a Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 11:16:53 -0700
Subject: [PATCH 03/10] Update copyright statements

---
 NOTICE.txt           | 2 +-
 deployment/deploy.sh | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/NOTICE.txt b/NOTICE.txt
index 981113a3..974e4d85 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -1,5 +1,5 @@
 Media Services Application Mapper
-Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 Licensed under the Apache License Version 2.0 (the "License"). You may not use this file except
 in compliance with the License. A copy of the License is located at http://www.apache.org/licenses/
 or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS,
diff --git a/deployment/deploy.sh b/deployment/deploy.sh
index 5e499ff5..727dca0e 100755
--- a/deployment/deploy.sh
+++ b/deployment/deploy.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-# Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 # SPDX-License-Identifier: Apache-2.0
 
 set -euo pipefail

From cd2a71a33b05b00efa74d43af9bc663d5bccdc97 Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 11:21:13 -0700
Subject: [PATCH 04/10] Syntax fix

---
 source/html/js/app/ui/diagram_menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/html/js/app/ui/diagram_menu.js b/source/html/js/app/ui/diagram_menu.js
index 7827bede..9826a0db 100644
--- a/source/html/js/app/ui/diagram_menu.js
+++ b/source/html/js/app/ui/diagram_menu.js
@@ -84,7 +84,7 @@ $("#diagram_remove_selected").on("click", function () {
 });
 
 $("#diagram_add_downstream").on("click", function () {
-    add_downstream_nodes()
+    add_downstream_nodes();
 });
 
 function add_downstream_nodes() {

From 61271dc04b77ae77324d83947539ff15432486bc Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 11:27:36 -0700
Subject: [PATCH 05/10] Update deployment requirements ordering

---
 deployment/requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/deployment/requirements.txt b/deployment/requirements.txt
index edebace1..5271d5e0 100644
--- a/deployment/requirements.txt
+++ b/deployment/requirements.txt
@@ -1,8 +1,8 @@
+chalice
 networkx
 boto3
 botocore
 cfn-lint
-chalice
 crhelper
 defusedxml
 fuzzywuzzy

From 2bad4ecf85c5b6ae8616f402317d94f3cd3fdac0 Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 14:06:25 -0700
Subject: [PATCH 06/10] Update variable scope

---
 source/html/js/app/alarms.js | 88 ++++++++++++++++++------------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/source/html/js/app/alarms.js b/source/html/js/app/alarms.js
index df5031f4..0e35033c 100644
--- a/source/html/js/app/alarms.js
+++ b/source/html/js/app/alarms.js
@@ -5,29 +5,29 @@ import * as server from "./server.js";
 import * as connections from "./connections.js";
 import * as settings from "./settings.js";
 
-var listeners = [];
+const listeners = [];
 
-var region_cache_clear_interval_ms = 60000;
+const region_cache_clear_interval_ms = 60000;
 
 // cache alarms in 'set' state
 // several modules use this at the same time
 
-var current_subscribers_with_alarms = [];
-var previous_subscribers_with_alarms = [];
+let current_subscribers_with_alarms = [];
+let previous_subscribers_with_alarms = [];
 
 // interval in millis to update the cache
 
-var update_interval;
+let update_interval;
 
-var intervalID;
+let intervalID;
 
-var settings_key = "app-alarm-update-interval";
+const settings_key = "app-alarm-update-interval";
 
-var subscribers_with_alarm_state = function (state) {
-    var current_connection = connections.get_current();
-    var url = current_connection[0];
-    var api_key = current_connection[1];
-    var current_endpoint = `${url}/cloudwatch/alarms/${state}/subscribers`;
+const subscribers_with_alarm_state = function (state) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/cloudwatch/alarms/${state}/subscribers`;
     return new Promise(function (resolve, reject) {
         server.get(current_endpoint, api_key).then(function (response) {
             // console.log(response);
@@ -40,12 +40,12 @@ var subscribers_with_alarm_state = function (state) {
 };
 
 
-var all_alarms_for_region = _.memoize(function (region) {
-    var current_connection = connections.get_current();
-    var url = current_connection[0];
-    var api_key = current_connection[1];
+const all_alarms_for_region = _.memoize(function (region) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
     region = encodeURIComponent(region);
-    var current_endpoint = `${url}/cloudwatch/alarms/all/${region}`;
+    const current_endpoint = `${url}/cloudwatch/alarms/all/${region}`;
     return new Promise(function (resolve, reject) {
         server.get(current_endpoint, api_key).then(function (response) {
             // console.log(response);
@@ -57,12 +57,12 @@ var all_alarms_for_region = _.memoize(function (region) {
     });
 });
 
-var alarms_for_subscriber = _.memoize(function (arn) {
-    var current_connection = connections.get_current();
-    var url = current_connection[0];
-    var api_key = current_connection[1];
+const alarms_for_subscriber = _.memoize(function (arn) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
     arn = encodeURIComponent(arn);
-    var current_endpoint = `${url}/cloudwatch/alarms/subscriber/${arn}`;
+    const current_endpoint = `${url}/cloudwatch/alarms/subscriber/${arn}`;
     return new Promise(function (resolve, reject) {
         server.get(current_endpoint, api_key).then(function (response) {
             resolve(response);
@@ -73,12 +73,12 @@ var alarms_for_subscriber = _.memoize(function (arn) {
     });
 });
 
-var subscribe_to_alarm = function (region, alarm_name, resource_arns) {
-    var current_connection = connections.get_current();
-    var url = current_connection[0];
-    var api_key = current_connection[1];
+const subscribe_to_alarm = function (region, alarm_name, resource_arns) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
     alarm_name = encodeURIComponent(alarm_name);
-    var current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/subscribe`;
+    const current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/subscribe`;
     return new Promise(function (resolve, reject) {
         server.post(current_endpoint, api_key, resource_arns).then(function (response) {
             for (let arn of resource_arns) {
@@ -92,13 +92,13 @@ var subscribe_to_alarm = function (region, alarm_name, resource_arns) {
     });
 };
 
-var unsubscribe_from_alarm = function (region, alarm_name, resource_arns) {
+const unsubscribe_from_alarm = function (region, alarm_name, resource_arns) {
     // console.log(region, alarm_name, resource_arns);
-    var current_connection = connections.get_current();
-    var url = current_connection[0];
-    var api_key = current_connection[1];
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
     alarm_name = encodeURIComponent(alarm_name);
-    var current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/unsubscribe`;
+    const current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/unsubscribe`;
     return new Promise(function (resolve, reject) {
         server.post(current_endpoint, api_key, resource_arns).then(function (response) {
             for (let arn of resource_arns) {
@@ -112,11 +112,11 @@ var unsubscribe_from_alarm = function (region, alarm_name, resource_arns) {
     });
 };
 
-var delete_all_subscribers = function () {
-    var current_connection = connections.get_current();
-    var url = current_connection[0];
-    var api_key = current_connection[1];
-    var current_endpoint = `${url}/cloudwatch/alarms/subscribed`;
+const delete_all_subscribers = function () {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/cloudwatch/alarms/subscribed`;
     return new Promise((resolve, reject) => {
         server.delete_method(current_endpoint, api_key).then((response) => {
             alarms_for_subscriber.cache.clear();
@@ -128,7 +128,7 @@ var delete_all_subscribers = function () {
     });
 };
 
-var clear_alarms_for_subscriber_cache = function (subscribers) {
+const clear_alarms_for_subscriber_cache = function (subscribers) {
     if (Array.isArray(subscribers)) {
         for (let subscriber of subscribers) {
             alarms_for_subscriber.cache.delete(subscriber.ResourceArn);
@@ -140,14 +140,14 @@ var clear_alarms_for_subscriber_cache = function (subscribers) {
     }
 };
 
-var cache_update = function () {
+const cache_update = function () {
     // console.log("cache_update()");
     subscribers_with_alarm_state("ALARM").then(function (response) {
         // console.log("updated set event cache");
         previous_subscribers_with_alarms = current_subscribers_with_alarms;
         current_subscribers_with_alarms = _.sortBy(response, "ResourceArn");
-        var added = _.differenceBy(current_subscribers_with_alarms, previous_subscribers_with_alarms, "ResourceArn");
-        var removed = _.differenceBy(previous_subscribers_with_alarms, current_subscribers_with_alarms, "ResourceArn");
+        const added = _.differenceBy(current_subscribers_with_alarms, previous_subscribers_with_alarms, "ResourceArn");
+        const removed = _.differenceBy(previous_subscribers_with_alarms, current_subscribers_with_alarms, "ResourceArn");
         if (added.length || removed.length) {
             clear_alarms_for_subscriber_cache(added);
             clear_alarms_for_subscriber_cache(removed);
@@ -161,7 +161,7 @@ var cache_update = function () {
     });
 };
 
-var load_update_interval = function () {
+const load_update_interval = function () {
     return new Promise(function (resolve) {
         settings.get(settings_key).then(function (value) {
             let seconds = Number.parseInt(value);
@@ -171,13 +171,13 @@ var load_update_interval = function () {
     });
 };
 
-var set_update_interval_setting = function (seconds) {
+const set_update_interval_setting = function (seconds) {
     // create a default
     update_interval = seconds * 1000;
     return settings.put(settings_key, seconds);
 };
 
-var schedule_interval = function () {
+const schedule_interval = function () {
     if (intervalID) {
         clearInterval(intervalID);
     }

From 8f56e24d41f0f74e77029f0a54958e175172107a Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 16:10:01 -0700
Subject: [PATCH 07/10] SQ minor severity issue clean up

---
 .../html/js/app/mappers/nodes/cloudfront.js   |  6 ++---
 source/html/js/app/mappers/nodes/ec2.js       |  6 ++---
 .../html/js/app/mappers/nodes/mediaconnect.js |  6 ++---
 source/html/js/app/mappers/nodes/medialive.js | 24 +++++++------------
 .../html/js/app/mappers/nodes/mediapackage.js | 12 ++++------
 .../html/js/app/mappers/nodes/mediastore.js   |  6 ++---
 .../html/js/app/mappers/nodes/mediatailor.js  |  6 ++---
 source/html/js/app/mappers/nodes/s3.js        |  6 ++---
 source/html/js/app/mappers/nodes/speke.js     |  6 ++---
 .../app/mappers/nodes/ssm_managed_instance.js |  6 ++---
 .../js/app/mappers/nodes/user_defined_node.js |  6 ++---
 source/html/js/app/ui/alarms_menu.js          |  3 +--
 source/html/js/app/ui/channels_menu.js        |  2 +-
 source/html/js/app/ui/diagram_factory.js      |  7 ++----
 .../js/app/ui/diagram_statemachine_factory.js |  2 +-
 .../html/js/app/ui/informational_overlays.js  |  2 +-
 source/html/js/app/ui/status_view.js          |  3 +--
 source/html/js/app/ui/user_defined.js         |  3 +--
 18 files changed, 38 insertions(+), 74 deletions(-)

diff --git a/source/html/js/app/mappers/nodes/cloudfront.js b/source/html/js/app/mappers/nodes/cloudfront.js
index 58ceb3e9..d0e8101d 100644
--- a/source/html/js/app/mappers/nodes/cloudfront.js
+++ b/source/html/js/app/mappers/nodes/cloudfront.js
@@ -77,8 +77,7 @@ export const update = function () {
                             region = 'us-east-1';
                         }
                         return function () {
-                            let html = `https://console.aws.amazon.com/cloudfront/home?region=${region}#distribution-settings:${id}`;
-                            return html;
+                            return `https://console.aws.amazon.com/cloudfront/home?region=${region}#distribution-settings:${id}`;
                         };
                     })(),
                     "cloudwatch_link": (function () {
@@ -88,8 +87,7 @@ export const update = function () {
                             region = 'us-east-1';
                         }
                         return function () {
-                            let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/CloudFront;dimensions=DistributionId,Region`;
-                            return html;
+                            return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/CloudFront;dimensions=DistributionId,Region`;
                         };
                     })()
                 };
diff --git a/source/html/js/app/mappers/nodes/ec2.js b/source/html/js/app/mappers/nodes/ec2.js
index bf7bd4a8..b12217dd 100644
--- a/source/html/js/app/mappers/nodes/ec2.js
+++ b/source/html/js/app/mappers/nodes/ec2.js
@@ -95,15 +95,13 @@ const map_config = function (cache_entry, items) {
         "console_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                let html = `https://console.aws.amazon.com/ec2/v2/home?region=${region}#Instances:instanceId=${name}`;
-                return html;
+                return `https://console.aws.amazon.com/ec2/v2/home?region=${region}#Instances:instanceId=${name}`;
             };
         })(),
         "cloudwatch_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fEC2*2cInstanceId*7d*20InstanceId*3d*22${name}*22`;
-                return html;
+                return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fEC2*2cInstanceId*7d*20InstanceId*3d*22${name}*22`;
             };
         })(),
         "generic_node_type": generic_node_type
diff --git a/source/html/js/app/mappers/nodes/mediaconnect.js b/source/html/js/app/mappers/nodes/mediaconnect.js
index 8d7dbee8..879a9e0c 100644
--- a/source/html/js/app/mappers/nodes/mediaconnect.js
+++ b/source/html/js/app/mappers/nodes/mediaconnect.js
@@ -87,8 +87,7 @@ const map_flow = function (cache_entry, items) {
             let split_id = id.split(":");
             let region = split_id[3];
             return function () {
-                let html = `https://${region}.console.aws.amazon.com/mediaconnect/home?region=${region}#/flows/${id}`;
-                return html;
+                return `https://${region}.console.aws.amazon.com/mediaconnect/home?region=${region}#/flows/${id}`;
             };
         })(),
         "cloudwatch_link": (function () {
@@ -96,8 +95,7 @@ const map_flow = function (cache_entry, items) {
             let region = split_id[3];
             let name = split_id[split_id.length - 1];
             return function () {
-                let html = `https://${region}.console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fMediaConnect*2cFlowARN*7d*20${name}`;
-                return html;
+                return `https://${region}.console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bAWS*2fMediaConnect*2cFlowARN*7d*20${name}`;
             };
         })()
     };
diff --git a/source/html/js/app/mappers/nodes/medialive.js b/source/html/js/app/mappers/nodes/medialive.js
index 6afe7b28..5f1af1f8 100644
--- a/source/html/js/app/mappers/nodes/medialive.js
+++ b/source/html/js/app/mappers/nodes/medialive.js
@@ -119,24 +119,21 @@ const map_channel = function (cache_entry, items) {
             const id = channel.Id;
             const region = channel.Arn.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}`;
-                return html;
+                return `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}`;
             };
         })(),
         alerts_link: (function () {
             const id = channel.Id;
             const region = channel.Arn.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}/alerts`;
-                return html;
+                return`https://console.aws.amazon.com/medialive/home?region=${region}#!/channels/${id}/alerts`;
             };
         })(),
         cloudwatch_link: (function () {
             const id = channel.Id;
             const region = channel.Arn.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=MediaLive;dimensions=ChannelId,Pipeline`;
-                return html;
+                return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=MediaLive;dimensions=ChannelId,Pipeline`;
             };
         })()
     };
@@ -181,14 +178,12 @@ const map_input = function (cache_entry, items) {
             const id = input.Id;
             const region = input.Arn.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/medialive/home?region=${region}#!/inputs/${id}`;
-                return html;
+                return `https://console.aws.amazon.com/medialive/home?region=${region}#!/inputs/${id}`;
             };
         })(),
         cloudwatch_link: (function () {
             return function () {
-                const html = `https://console.aws.amazon.com/cloudwatch/home`;
-                return html;
+                return `https://console.aws.amazon.com/cloudwatch/home`;
             };
         })()
     };
@@ -233,16 +228,14 @@ const map_multiplex = function (cache_entry, items) {
             const id = input.Id;
             const region = input.Arn.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}`;
-                return html;
+                return `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}`;
             };
         })(),
         alerts_link: (function () {
             const id = input.Id;
             const region = input.Arn.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}/alerts`;
-                return html;
+                return `https://console.aws.amazon.com/medialive/multiplex?region=${region}#/${id}/alerts`;
             };
         })(),
         cloudwatch_link: (function () {
@@ -316,8 +309,7 @@ const map_device = function (cache_entry, items) {
         "console_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                const html = `https://${region}.console.aws.amazon.com/medialive/home?region=${region}#!/devices/${name}`;
-                return html;
+                return `https://${region}.console.aws.amazon.com/medialive/home?region=${region}#!/devices/${name}`;
             };
         })(),
         "cloudwatch_link": (function () {
diff --git a/source/html/js/app/mappers/nodes/mediapackage.js b/source/html/js/app/mappers/nodes/mediapackage.js
index 1ab1e4a4..03b41601 100644
--- a/source/html/js/app/mappers/nodes/mediapackage.js
+++ b/source/html/js/app/mappers/nodes/mediapackage.js
@@ -74,16 +74,14 @@ const update_channels = function (items) {
                         let id = channel.Id;
                         let region = channel.Arn.split(":")[3];
                         return function () {
-                            let html = `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${id}`;
-                            return html;
+                            return `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${id}`;
                         };
                     })(),
                     "cloudwatch_link": (function () {
                         let id = channel.Id;
                         let region = channel.Arn.split(":")[3];
                         return function () {
-                            let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel`;
-                            return html;
+                            return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel`;
                         };
                     })()
                 };
@@ -167,16 +165,14 @@ const update_endpoints = function (items) {
                         let parent_id = endpoint.ChannelId;
                         let region = endpoint.Arn.split(":")[3];
                         return function () {
-                            let html = `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${parent_id}/endpoints/${id}`;
-                            return html;
+                            return `https://console.aws.amazon.com/mediapackage/home?region=${region}#/channels/${parent_id}/endpoints/${id}`;
                         };
                     })(),
                     "cloudwatch_link": (function () {
                         let id = endpoint.Id;
                         let region = endpoint.Arn.split(":")[3];
                         return function () {
-                            let html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel,OriginEndpoint`;
-                            return html;
+                            return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();search=${id};namespace=AWS/MediaPackage;dimensions=Channel,OriginEndpoint`;
                         };
                     })()
                 };
diff --git a/source/html/js/app/mappers/nodes/mediastore.js b/source/html/js/app/mappers/nodes/mediastore.js
index 043e4a95..6844c64c 100644
--- a/source/html/js/app/mappers/nodes/mediastore.js
+++ b/source/html/js/app/mappers/nodes/mediastore.js
@@ -74,14 +74,12 @@ export const update = function () {
                         const id = container.Name;
                         const region = container.ARN.split(":")[3];
                         return function () {
-                            const html = `https://${region}.console.aws.amazon.com/mediastore/home/containers/${id}`;
-                            return html;
+                            return `https://${region}.console.aws.amazon.com/mediastore/home/containers/${id}`;
                         };
                     })(),
                     "cloudwatch_link": (function () {
                         return function () {
-                            const html = `https://console.aws.amazon.com/cloudwatch/home`;
-                            return html;
+                            return `https://console.aws.amazon.com/cloudwatch/home`;
                         };
                     })()
                 };
diff --git a/source/html/js/app/mappers/nodes/mediatailor.js b/source/html/js/app/mappers/nodes/mediatailor.js
index 2a993286..1cda06f9 100644
--- a/source/html/js/app/mappers/nodes/mediatailor.js
+++ b/source/html/js/app/mappers/nodes/mediatailor.js
@@ -86,15 +86,13 @@ const map_config = function (cache_entry, items) {
         "console_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/mediatailor/home?region=${region}#/config/${name}`;
-                return html;
+                return `https://console.aws.amazon.com/mediatailor/home?region=${region}#/config/${name}`;
             };
         })(),
         "cloudwatch_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#logs:prefix=MediaTailor`;
-                return html;
+                return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#logs:prefix=MediaTailor`;
             };
         })()
     };
diff --git a/source/html/js/app/mappers/nodes/s3.js b/source/html/js/app/mappers/nodes/s3.js
index a58581b5..7ee3e7a2 100644
--- a/source/html/js/app/mappers/nodes/s3.js
+++ b/source/html/js/app/mappers/nodes/s3.js
@@ -75,15 +75,13 @@ export const update = function () {
                     "console_link": (function () {
                         const id = bucket.Name;
                         return function () {
-                            let html = `https://s3.console.aws.amazon.com/s3/buckets/${id}/?tab=overview`;
-                            return html;
+                            return `https://s3.console.aws.amazon.com/s3/buckets/${id}/?tab=overview`;
                         };
                     })(),
                     "cloudwatch_link": (function () {
                         const id = bucket.Name;
                         return function () {
-                            let html = `https://console.aws.amazon.com/cloudwatch/home#metricsV2:graph=~();search=${id};namespace=AWS/S3;dimensions=BucketName,StorageType`;
-                            return html;
+                            return `https://console.aws.amazon.com/cloudwatch/home#metricsV2:graph=~();search=${id};namespace=AWS/S3;dimensions=BucketName,StorageType`;
                         };
                     })()
                 };
diff --git a/source/html/js/app/mappers/nodes/speke.js b/source/html/js/app/mappers/nodes/speke.js
index 0068313e..61051d4b 100644
--- a/source/html/js/app/mappers/nodes/speke.js
+++ b/source/html/js/app/mappers/nodes/speke.js
@@ -80,14 +80,12 @@ export const update = function () {
                     },
                     "console_link": (function () {
                         return function () {
-                            let html = `https://console.aws.amazon.com/`;
-                            return html;
+                            return `https://console.aws.amazon.com/`;
                         };
                     })(),
                     "cloudwatch_link": (function () {
                         return function () {
-                            let html = `https://console.aws.amazon.com/`;
-                            return html;
+                            return `https://console.aws.amazon.com/`;
                         };
                     })()
                 };
diff --git a/source/html/js/app/mappers/nodes/ssm_managed_instance.js b/source/html/js/app/mappers/nodes/ssm_managed_instance.js
index 88055d61..d76f8ba3 100644
--- a/source/html/js/app/mappers/nodes/ssm_managed_instance.js
+++ b/source/html/js/app/mappers/nodes/ssm_managed_instance.js
@@ -96,15 +96,13 @@ const map_config = function (cache_entry, items) {
         "console_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/systems-manager/managed-instances/${name}/description?region=${region}`;
-                return html;
+                return `https://console.aws.amazon.com/systems-manager/managed-instances/${name}/description?region=${region}`;
             };
         })(),
         "cloudwatch_link": (function () {
             const region = id.split(":")[3];
             return function () {
-                const html = `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bMSAM*2fSSMRunCommand*2c*22Instance*20ID*22*7d*20${name}`;
-                return html;
+                return `https://console.aws.amazon.com/cloudwatch/home?region=${region}#metricsV2:graph=~();query=~'*7bMSAM*2fSSMRunCommand*2c*22Instance*20ID*22*7d*20${name}`;
             };
         })(),
         "generic_node_type": generic_node_type
diff --git a/source/html/js/app/mappers/nodes/user_defined_node.js b/source/html/js/app/mappers/nodes/user_defined_node.js
index 72d4fa17..f7d45cb1 100644
--- a/source/html/js/app/mappers/nodes/user_defined_node.js
+++ b/source/html/js/app/mappers/nodes/user_defined_node.js
@@ -83,14 +83,12 @@ export const update = function () {
                     },
                     "console_link": (function () {
                         return function () {
-                            const html = `#`;
-                            return html;
+                            return "#";
                         };
                     })(),
                     "cloudwatch_link": (function () {
                         return function () {
-                            const html = `#`;
-                            return html;
+                            return "#";
                         };
                     })()
                 };
diff --git a/source/html/js/app/ui/alarms_menu.js b/source/html/js/app/ui/alarms_menu.js
index 586d255f..1f5d34d6 100644
--- a/source/html/js/app/ui/alarms_menu.js
+++ b/source/html/js/app/ui/alarms_menu.js
@@ -81,8 +81,7 @@ const nodes_tabulator = new Tabulator("#subscribe_to_alarms_modal_selected_items
 
 
 const progress_bar_html = function (value, text, color_class) {
-    const html = `<div class="m-2"><div class="progress"><div class="progress-bar ${color_class}" role="progressbar" style="width: ${value}%" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100">${text}</div></div></div>`;
-    return html;
+    return `<div class="m-2"><div class="progress"><div class="progress-bar ${color_class}" role="progressbar" style="width: ${value}%" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100">${text}</div></div></div>`;
 };
 
 const start_progress_message = function () {
diff --git a/source/html/js/app/ui/channels_menu.js b/source/html/js/app/ui/channels_menu.js
index 57b25e91..b1ae8761 100644
--- a/source/html/js/app/ui/channels_menu.js
+++ b/source/html/js/app/ui/channels_menu.js
@@ -152,7 +152,7 @@ $("#save_channel_add_node").on("click", function () {
     const channel_checks = $("#channel_add_node_modal_channels input[type='checkbox']");
     const promises = [];
     for (let item of channel_checks) {
-        if ($(item).prop("checked") == true) {
+        if ($(item).prop("checked")) {
             promises.push(channels.update_channel($(item).val(), node_ids));
         }
     }
diff --git a/source/html/js/app/ui/diagram_factory.js b/source/html/js/app/ui/diagram_factory.js
index cdd1d4d7..31c08673 100644
--- a/source/html/js/app/ui/diagram_factory.js
+++ b/source/html/js/app/ui/diagram_factory.js
@@ -402,9 +402,7 @@ class Diagram {
         var xRange = this.get_start_to_end(this.drag_rect.startX, this.drag_rect.w);
         var yRange = this.get_start_to_end(this.drag_rect.startY, this.drag_rect.h);
 
-        var allNodes = this.nodes.get();
-        for (let i = 0; i < allNodes.length; i++) {
-            var curNode = allNodes[i];
+        for (let curNode of this.nodes.get()) {
             var nodePosition = this.network.getPositions([curNode.id]);
             var nodeXY = this.network.canvasToDOM({
                 x: nodePosition[curNode.id].x,
@@ -506,8 +504,7 @@ class Diagram {
     lock(state) {
         const key = `diagram_lock_${this.view_id}`;
         this.locked = Boolean(state).valueOf();
-        const promise = settings.put(key, { "name": this.name, "locked": this.locked });
-        return promise;
+        return settings.put(key, { "name": this.name, "locked": this.locked });
     }
 
     isLocked() {
diff --git a/source/html/js/app/ui/diagram_statemachine_factory.js b/source/html/js/app/ui/diagram_statemachine_factory.js
index 90de37d2..c098fb9d 100644
--- a/source/html/js/app/ui/diagram_statemachine_factory.js
+++ b/source/html/js/app/ui/diagram_statemachine_factory.js
@@ -205,7 +205,7 @@ export function create(diagram) {
                                 // drag-select
                                 my_diagram.drag_canvas = my_diagram.network.canvas.frame.canvas;
                                 my_diagram.drag_ctx = my_diagram.drag_canvas.getContext('2d');
-                                if (my_diagram.first_fit == false) {
+                                if (!my_diagram.first_fit) {
                                     my_diagram.first_fit = true;
                                     my_diagram.network.fit();
                                     my_diagram.statemachine.transition("ready-to-view");
diff --git a/source/html/js/app/ui/informational_overlays.js b/source/html/js/app/ui/informational_overlays.js
index a6857a3c..9daebc0c 100644
--- a/source/html/js/app/ui/informational_overlays.js
+++ b/source/html/js/app/ui/informational_overlays.js
@@ -15,7 +15,7 @@ var update_overlay = function () {
     // console.log("info overlay update");
     // get all the overlays
     for (let ov of overlays.all) {
-        if (ov.informational == true) {
+        if (ov.informational) {
             const nodes = model.nodes.get({
                 filter: (item) => { return ov.match_type == (item.generic_node_type || item.title); }
             });
diff --git a/source/html/js/app/ui/status_view.js b/source/html/js/app/ui/status_view.js
index 29ca33b4..947b8269 100644
--- a/source/html/js/app/ui/status_view.js
+++ b/source/html/js/app/ui/status_view.js
@@ -14,8 +14,7 @@ var calculate_progress = function (fsm) {
     // get our current position within the states
     var index = states.indexOf(fsm.state);
     // calculate the current state position as a percentage
-    var percent = Number.parseInt(((index + 1) / states.length) * 100);
-    return percent;
+    return Number.parseInt(((index + 1) / states.length) * 100);
 };
 
 var show = function () {
diff --git a/source/html/js/app/ui/user_defined.js b/source/html/js/app/ui/user_defined.js
index c3e32a5f..46efe582 100644
--- a/source/html/js/app/ui/user_defined.js
+++ b/source/html/js/app/ui/user_defined.js
@@ -23,7 +23,7 @@ var create_connection_record = function (options) {
         "to": `${options.to}`,
         "expires": options.expires || expires.unix()
     };
-    var record = {
+    return {
         "arn": `${options.from}:${options.to}`,
         "data": JSON.stringify(data),
         "expires": options.expires || expires.unix(),
@@ -34,7 +34,6 @@ var create_connection_record = function (options) {
         "to": `${options.to}`,
         "updated": updated.unix()
     };
-    return record;
 };
 
 var show_add_connection = (visible) => {

From 80e1f4046aa4518a9564ebb7de9b88a97dbd30f6 Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 16:58:49 -0700
Subject: [PATCH 08/10] SQ major severity issue clean up

---
 source/events/cloudwatch_alarm.py |  1 -
 source/events/media_events.py     | 15 +++-----
 source/html/js/app/alarms.js      | 62 +++++++++++--------------------
 3 files changed, 27 insertions(+), 51 deletions(-)

diff --git a/source/events/cloudwatch_alarm.py b/source/events/cloudwatch_alarm.py
index 01d7fef7..e12b57c1 100644
--- a/source/events/cloudwatch_alarm.py
+++ b/source/events/cloudwatch_alarm.py
@@ -38,7 +38,6 @@ def lambda_handler(event, _):
 
         region_alarm_name = f"{region}:{alarm_name}"
         state = alarm.state_value
-        # namespace = alarm.namespace
         state_updated = int(alarm.state_updated_timestamp.timestamp())
 
         subscribers = subscribers_to_alarm(region_alarm_name)
diff --git a/source/events/media_events.py b/source/events/media_events.py
index 7e079b0c..c882c6ad 100644
--- a/source/events/media_events.py
+++ b/source/events/media_events.py
@@ -47,17 +47,13 @@ def lambda_handler(event, _):
         # remove arn that is for userIdentity or inputSecurityGroup
         # note: can't remove an item from a list that's being iterated over so doing it this way
         for arn in original_arns:
-            if "user" in arn or "role" in arn or "inputSecurityGroup" in arn:
-                pass
-            else:
+            if not ("user" in arn or "role" in arn or "inputSecurityGroup" in arn):
                 arns.append(arn)
         if arns:
             event["resource_arn"] = unquote(arns[0])
         # for certain events, the ARN is not labeled as an ARN but instead put in the resources list
-        if not arns and event["resources"]:
-            if "vod" not in event["resources"][0]:
+        if not arns and event["resources"] and "vod" not in event["resources"][0]:
                 event["resource_arn"] = event["resources"][0]
-
         # handle alerts
         if "Alert" in event["detail-type"]:
             # medialive alerts
@@ -110,12 +106,11 @@ def lambda_handler(event, _):
                     event["resource_arn"] = response["Arn"]
                 else:
                     print("Skipping this event. Origin ID not present in the HarvestJob event." + event["type"])
-        elif event["source"] == "aws.mediastore":
+        elif event["source"] == "aws.mediastore" and "MediaStore Object State Change" in event["type"]:
             # for object state change the resource is the object, not the container
             # so the captured arn needs to be fixed
-            if "MediaStore Object State Change" in event["type"]:
-                temp_arn = event["resource_arn"].split('/')
-                event["resource_arn"] = temp_arn[0] + "/" + temp_arn[1]
+            temp_arn = event["resource_arn"].split('/')
+            event["resource_arn"] = temp_arn[0] + "/" + temp_arn[1]
 
         # if item has no resource arn, don't save in DB
         if "resource_arn" in event:
diff --git a/source/html/js/app/alarms.js b/source/html/js/app/alarms.js
index 0e35033c..8460b911 100644
--- a/source/html/js/app/alarms.js
+++ b/source/html/js/app/alarms.js
@@ -23,14 +23,9 @@ let intervalID;
 
 const settings_key = "app-alarm-update-interval";
 
-const subscribers_with_alarm_state = function (state) {
-    const current_connection = connections.get_current();
-    const url = current_connection[0];
-    const api_key = current_connection[1];
-    const current_endpoint = `${url}/cloudwatch/alarms/${state}/subscribers`;
+const server_get = (endpoint, api_key) => {
     return new Promise(function (resolve, reject) {
-        server.get(current_endpoint, api_key).then(function (response) {
-            // console.log(response);
+        server.get(endpoint, api_key).then(function (response) {
             resolve(response);
         }).catch(function (error) {
             console.error(error);
@@ -39,6 +34,14 @@ const subscribers_with_alarm_state = function (state) {
     });
 };
 
+const subscribers_with_alarm_state = function (state) {
+    const current_connection = connections.get_current();
+    const url = current_connection[0];
+    const api_key = current_connection[1];
+    const current_endpoint = `${url}/cloudwatch/alarms/${state}/subscribers`;
+    return server_get(current_endpoint, api_key);
+};
+
 
 const all_alarms_for_region = _.memoize(function (region) {
     const current_connection = connections.get_current();
@@ -46,15 +49,7 @@ const all_alarms_for_region = _.memoize(function (region) {
     const api_key = current_connection[1];
     region = encodeURIComponent(region);
     const current_endpoint = `${url}/cloudwatch/alarms/all/${region}`;
-    return new Promise(function (resolve, reject) {
-        server.get(current_endpoint, api_key).then(function (response) {
-            // console.log(response);
-            resolve(response);
-        }).catch(function (error) {
-            console.error(error);
-            reject(error);
-        });
-    });
+    return server_get(current_endpoint, api_key);
 });
 
 const alarms_for_subscriber = _.memoize(function (arn) {
@@ -63,15 +58,22 @@ const alarms_for_subscriber = _.memoize(function (arn) {
     const api_key = current_connection[1];
     arn = encodeURIComponent(arn);
     const current_endpoint = `${url}/cloudwatch/alarms/subscriber/${arn}`;
+    return server_get(current_endpoint, api_key);
+});
+
+const server_post = (endpoint, api_key, resource_arns) => {
     return new Promise(function (resolve, reject) {
-        server.get(current_endpoint, api_key).then(function (response) {
+        server.post(endpoint, api_key, resource_arns).then(function (response) {
+            for (let arn of resource_arns) {
+                clear_alarms_for_subscriber_cache(arn);
+            }
             resolve(response);
         }).catch(function (error) {
             console.error(error);
             reject(error);
         });
     });
-});
+};
 
 const subscribe_to_alarm = function (region, alarm_name, resource_arns) {
     const current_connection = connections.get_current();
@@ -79,17 +81,7 @@ const subscribe_to_alarm = function (region, alarm_name, resource_arns) {
     const api_key = current_connection[1];
     alarm_name = encodeURIComponent(alarm_name);
     const current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/subscribe`;
-    return new Promise(function (resolve, reject) {
-        server.post(current_endpoint, api_key, resource_arns).then(function (response) {
-            for (let arn of resource_arns) {
-                clear_alarms_for_subscriber_cache(arn);
-            }
-            resolve(response);
-        }).catch(function (error) {
-            console.error(error);
-            reject(error);
-        });
-    });
+    return server_post(current_endpoint, api_key, resource_arns);
 };
 
 const unsubscribe_from_alarm = function (region, alarm_name, resource_arns) {
@@ -99,17 +91,7 @@ const unsubscribe_from_alarm = function (region, alarm_name, resource_arns) {
     const api_key = current_connection[1];
     alarm_name = encodeURIComponent(alarm_name);
     const current_endpoint = `${url}/cloudwatch/alarm/${alarm_name}/region/${region}/unsubscribe`;
-    return new Promise(function (resolve, reject) {
-        server.post(current_endpoint, api_key, resource_arns).then(function (response) {
-            for (let arn of resource_arns) {
-                clear_alarms_for_subscriber_cache(arn);
-            }
-            resolve(response);
-        }).catch(function (error) {
-            console.error(error);
-            reject(error);
-        });
-    });
+    return server_post(current_endpoint, api_key, resource_arns);
 };
 
 const delete_all_subscribers = function () {

From 8a694745dcc5552d3acad6b3733db65e255f2d28 Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 17:01:57 -0700
Subject: [PATCH 09/10] SQ major severity issue clean up

---
 source/events/media_events.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/events/media_events.py b/source/events/media_events.py
index c882c6ad..1031a84c 100644
--- a/source/events/media_events.py
+++ b/source/events/media_events.py
@@ -53,7 +53,7 @@ def lambda_handler(event, _):
             event["resource_arn"] = unquote(arns[0])
         # for certain events, the ARN is not labeled as an ARN but instead put in the resources list
         if not arns and event["resources"] and "vod" not in event["resources"][0]:
-                event["resource_arn"] = event["resources"][0]
+            event["resource_arn"] = event["resources"][0]
         # handle alerts
         if "Alert" in event["detail-type"]:
             # medialive alerts

From 51675d735d49bfe30663d6161ad71e9cb85f9486 Mon Sep 17 00:00:00 2001
From: Jim Thario <jtthario@amazon.com>
Date: Mon, 21 Mar 2022 17:41:40 -0700
Subject: [PATCH 10/10] Remove unused depdendency

---
 source/html/index.html        |  1 -
 source/html/package-lock.json | 95 +----------------------------------
 source/html/package.json      |  1 -
 3 files changed, 1 insertion(+), 96 deletions(-)

diff --git a/source/html/index.html b/source/html/index.html
index 74e03f60..75a7e8c8 100644
--- a/source/html/index.html
+++ b/source/html/index.html
@@ -23,7 +23,6 @@
     <script src="/node_modules/vis/dist/vis.min.js"></script>
     <script src="/node_modules/tabulator-tables/dist/js/tabulator.min.js"></script>
     <script src="/node_modules/tabulator-tables/dist/js/jquery_wrapper.min.js"></script>
-    <script src="/node_modules/handlebars/dist/handlebars.min.js"></script>
     <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
     <script src="/node_modules/fuse.js/dist/fuse.js"></script>
diff --git a/source/html/package-lock.json b/source/html/package-lock.json
index 64740234..b3bf9d9a 100644
--- a/source/html/package-lock.json
+++ b/source/html/package-lock.json
@@ -4,12 +4,12 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "html",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.4",
         "bootstrap": "^4.6.1",
         "bootstrap-datepicker": "^1.9.0",
         "fuse.js": "^6.5.3",
-        "handlebars": "^4.7.7",
         "jquery": "^3.6.0",
         "jqueryui": "^1.11.1",
         "js-cookie": "^2.0.2",
@@ -707,26 +707,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/handlebars": {
-      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
-      "dependencies": {
-        "minimist": "^1.2.5",
-        "neo-async": "^2.6.0",
-        "source-map": "^0.6.1",
-        "wordwrap": "^1.0.0"
-      },
-      "bin": {
-        "handlebars": "bin/handlebars"
-      },
-      "engines": {
-        "node": ">=0.4.7"
-      },
-      "optionalDependencies": {
-        "uglify-js": "^3.1.4"
-      }
-    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -946,11 +926,6 @@
         "node": "*"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-    },
     "node_modules/moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
@@ -971,11 +946,6 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
-    },
     "node_modules/object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -1151,14 +1121,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "0.10.31",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
@@ -1241,18 +1203,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/uglify-js": {
-      "version": "3.14.5",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.5.tgz",
-      "integrity": "sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==",
-      "optional": true,
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -1310,11 +1260,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -1843,18 +1788,6 @@
       "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
       "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
     },
-    "handlebars": {
-      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
-      "requires": {
-        "minimist": "^1.2.5",
-        "neo-async": "^2.6.0",
-        "source-map": "^0.6.1",
-        "uglify-js": "^3.1.4",
-        "wordwrap": "^1.0.0"
-      }
-    },
     "has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2038,11 +1971,6 @@
         "brace-expansion": "^1.1.7"
       }
     },
-    "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-    },
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
@@ -2060,11 +1988,6 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
-    "neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
-    },
     "object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -2193,11 +2116,6 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-    },
     "string_decoder": {
       "version": "0.10.31",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
@@ -2259,12 +2177,6 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
-    "uglify-js": {
-      "version": "3.14.5",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.5.tgz",
-      "integrity": "sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==",
-      "optional": true
-    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -2312,11 +2224,6 @@
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
       "dev": true
     },
-    "wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
-    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/source/html/package.json b/source/html/package.json
index 41092d44..b1bad5aa 100644
--- a/source/html/package.json
+++ b/source/html/package.json
@@ -4,7 +4,6 @@
     "bootstrap": "^4.6.1",
     "bootstrap-datepicker": "^1.9.0",
     "fuse.js": "^6.5.3",
-    "handlebars": "^4.7.7",
     "jquery": "^3.6.0",
     "jqueryui": "^1.11.1",
     "js-cookie": "^2.0.2",