From 7ce9ce06686472f23a3d63e1054142713eedfdc3 Mon Sep 17 00:00:00 2001
From: Peiqi Liu <peiqil@andrew.cmu.edu>
Date: Sun, 5 Mar 2023 20:14:18 -0500
Subject: [PATCH 1/6] Added redesign UI in FTA.vue via iframe + flask, updated
 readme

---
 .gitmodules                                   |   4 +
 Apps/FrontendSoftware/README.md               |   8 +
 Apps/FrontendSoftware/package-lock.json       |  34 +--
 Apps/FrontendSoftware/package.json            |   2 +-
 Apps/FrontendSoftware/src/background.js       |  11 +
 .../src/components/FTA/FTA.vue                | 233 +-----------------
 Apps/FrontendSoftware/yarn.lock               |   8 +-
 7 files changed, 56 insertions(+), 244 deletions(-)
 create mode 100644 .gitmodules

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 000000000..6026b33bf
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,4 @@
+[submodule "Apps/FrontendSoftware/public/FLEUR"]
+	path = Apps/FrontendSoftware/public/FLEUR
+	url = git@github.com:PlanetaryRobotics/FLEUR.git
+	branch = integration-dev
\ No newline at end of file
diff --git a/Apps/FrontendSoftware/README.md b/Apps/FrontendSoftware/README.md
index 26fbbc3dc..514df76ed 100644
--- a/Apps/FrontendSoftware/README.md
+++ b/Apps/FrontendSoftware/README.md
@@ -1,6 +1,14 @@
 # Iris Terminal (2022): A Mission Operations Center Interface v.1
 
 ## **Project setup**
+First, run this to get FLEUR (you need access to the FLEUR repository)
+```
+git submodule update --init --recursive --remote
+```
+
+Make sure `python3` and [required packages](https://github.com/PlanetaryRobotics/FLEUR/blob/redesign-dev/README.md#Development) are installed. 
+A copy of FLEUR can be found in `Apps/FrontendSoftware/public/FLEUR`.
+
 Install `node@14.20.1` (it's recommended to use `nvm`), `npm`, `yarn`, and a c-compiler (`xcode` if on a mac).
 
 **NOTE:** If using MacOS and `nvm` make sure nvm setup is in `~/.zshenv` (what normally goes in `~/.bash_profile`)
diff --git a/Apps/FrontendSoftware/package-lock.json b/Apps/FrontendSoftware/package-lock.json
index 81f180592..3f964e29e 100644
--- a/Apps/FrontendSoftware/package-lock.json
+++ b/Apps/FrontendSoftware/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "iris-ground-terminal-calm-collins",
-  "version": "0.8.1",
+  "name": "iris-ground-terminal-calm-collins-2",
+  "version": "0.8.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7495,9 +7495,9 @@
       }
     },
     "engine.io": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.0.tgz",
-      "integrity": "sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
+      "integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
       "dev": true,
       "requires": {
         "@types/cookie": "^0.4.1",
@@ -10097,9 +10097,9 @@
       }
     },
     "http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "http-deceiver": {
       "version": "1.2.7",
@@ -11365,9 +11365,9 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
     "json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
     },
     "jsonfile": {
       "version": "4.0.0",
@@ -12229,9 +12229,9 @@
       "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw=="
     },
     "loader-utils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -12420,9 +12420,9 @@
       }
     },
     "luxon": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
-      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.1.tgz",
+      "integrity": "sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw=="
     },
     "make-dir": {
       "version": "3.1.0",
diff --git a/Apps/FrontendSoftware/package.json b/Apps/FrontendSoftware/package.json
index ce16dc26e..c9d293cd0 100644
--- a/Apps/FrontendSoftware/package.json
+++ b/Apps/FrontendSoftware/package.json
@@ -39,7 +39,7 @@
     "jquery": "^3.5.1",
     "js-base64": "^3.4.5",
     "js-sha256": "^0.9.0",
-    "luxon": "^1.24.1",
+    "luxon": "^1.28.1",
     "mime-types": "^2.1.27",
     "module": "^1.2.5",
     "moment": "^2.27.0",
diff --git a/Apps/FrontendSoftware/src/background.js b/Apps/FrontendSoftware/src/background.js
index 84f3d7a5b..0a1d60f81 100644
--- a/Apps/FrontendSoftware/src/background.js
+++ b/Apps/FrontendSoftware/src/background.js
@@ -29,6 +29,9 @@ import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
 const isProduction = process.env.NODE_ENV === 'production';
 const isDevelopment = !isProduction;
 
+// Launch python script
+import child_process from 'child_process';
+
 // Handle all unhandled exceptions for diagnostics (and reporting):
 const unhandled = require('electron-unhandled');
 unhandled();
@@ -45,6 +48,9 @@ const ICON =
 
 let URL_PREFIX;
 
+// flask process launched for FLEUR
+let flaskProcess;
+
 // Standard scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{
     scheme: 'app',
@@ -206,6 +212,11 @@ app.on('activate', () => {
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
     spawn();
+    flaskProcess = child_process.spawn('python3', [path.join(__static, 'FLEUR', 'fleur_server.py')]);
+});
+
+app.on('quit', async () => {
+    if (flaskProcess) flaskProcess.kill();
 });
 
 // Exit cleanly on request from parent process in development mode.
diff --git a/Apps/FrontendSoftware/src/components/FTA/FTA.vue b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
index ee87bf0e0..edcadc4e0 100644
--- a/Apps/FrontendSoftware/src/components/FTA/FTA.vue
+++ b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
@@ -1,235 +1,24 @@
-
 <template>
-  <div
-    id="ftaContainer"
-    ref="container"
-    class="fta-container"
-  />
+  <div>
+    <iframe
+      id="fta-iframe"
+      src="http://localhost:5000/display"
+    />
+  </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
-
-const d3 = require('d3');
-import d3_sankey from './sankey.js';
 
 export default {
-    name: 'FTA',
-    data(){
-        return {
-            resizeTransitionTime: 100, // [ms] Duration of resizing transitions
-            nodeWidth: 36,
-            nodePadding: 40,
-            layoutSize: 32,
-            colors: ['#00FF00', '#FFFF00', '#FF0000', '#00000000'],
-            units: 'Widgets',
-            svg: {},
-            path: {},
-            sankey: {},
-            link: {},
-            node: {}, // all nodes (each is a collection of node bodies)
-            nodeBodies: {}, // all node bodies (eg. rectangles)
-            nodeLabels: {}, // all text labels
-            width: 1000,
-            height: 700,
-            resizeObserver: {}
-        };
-    },
-    computed: {
-        ...mapGetters({
-            FTALog: 'FTALog', //                          - Getter for the FTAData entries on the Database from DBLazyList
-            currentState: 'currentFTAState', //           - Most recent SystemData entry on the Database from DBLazyList
-        }),
-        ...mapState({
-            logLazyList: state => state.FTALogList //     - DBLazyList of recent FTAData states
-        })
-    },
-    mounted(){
-        // Populate the graph now:
-        this.setup();
-        // And repopulate the graph as data updates:
-        this.logLazyList.onUpdate( () => {
-            this.setup();
-        });
-    },
-    beforeDestroy(){
-        this.resizeObserver.disconnect();
-    },
-    methods: {
-        // Setup graph:
-        setup(){
-        // Clear / Reclear Space:
-            d3.select('#ftaContainer').html('');
-
-            // append the svg object to the body of the page
-            this.svg = d3.select('#ftaContainer')
-                .append('svg')
-                .append('g')
-                .attr('transform', 'translate(0,0)');
-
-            // Set the sankey diagram properties
-            this.sankey = d3_sankey()
-                .nodeWidth(this.nodeWidth)
-                .nodePadding(this.nodePadding)
-                .size([this.width, this.height]);
-
-            this.path = this.sankey.link();
-
-            // Populate the graph now:
-            this.jsonUpdateHandler(this.currentState);
-
-            // Watch for / react to size changes:
-            this.resizeObserver = new ResizeObserver(() => this.updateSize());
-            this.resizeObserver.observe(this.$refs.container);
-        },
-
-        // Forces the Sankey plot to resize to fit the container and re-layout accordingly.
-        updateSize(){
-            this.resize(this.$refs.container.clientWidth, this.$refs.container.clientHeight-this.nodePadding);
-        },
-
-        /**
-       * Resizes the Sankey plot to the given size and smoothly transitions from current layout to newly 
-       * required layout.
-       * 
-       * As a result, this is also where all layout positioning code is handled.
-       */
-        resize(width, height){
-            this.width = width;
-            this.height = height;
-            this.sankey.size([width, height]).layout(this.layoutSize);
-            this.link.transition().duration(this.resizeTransitionTime)
-                .attr('d', this.path);
-            this.node.transition().duration(this.resizeTransitionTime)
-                .attr('transform', d => `translate(${d.x},${d.y})`);
-            this.nodeBodies.transition().duration(this.resizeTransitionTime)
-                .attr('height', d => Math.max(4, d.dy) )
-                .attr('width', this.sankey.nodeWidth());
-            this.nodeLabels.transition().duration(this.resizeTransitionTime)
-                .attr('x', -6)
-                .attr('y', d => d.dy / 2 )
-                .attr('text-anchor', 'end')
-                .filter(d => d.x < this.width / 2)
-                .attr('x', 6 + this.sankey.nodeWidth())
-                .attr('text-anchor', 'start');
-        },
-
-        format(d) {
-            const formatNumber = d3.format(',.0f'); // zero decimal places
-            return formatNumber(d) + ' ' + this.units;
-        },
-
-        dragmove(target, d) {
-            d3.select(target)
-                .attr('transform', 
-                    'translate(' 
-                  + d.x + ',' 
-                  + (d.y = Math.max(
-                      0, Math.min(this.height - d.dy, d3.event.y))
-                  )
-                + ')'
-                );
-            this.sankey.relayout();
-            this.link.attr('d', this.path);
-        },
-
-        jsonUpdateHandler(graph){
-            this.sankey
-                .nodes(graph.nodes)
-                .links(graph.links)
-                .layout(this.layoutSize);
-
-            // add in the links
-            this.link = this.svg.append('g').selectAll('.link')
-                .data(graph.links)
-                .enter().append('path')
-                .attr('class', 'link')
-                .style('stroke-width', d => Math.max(1, d.dy) )
-                .style('stroke', d => this.colors[d.colorV] )
-                .sort( (a,b) => b.dy - a.dy );
-
-            // add the link titles
-            this.link.append('title')
-                .text(d => {
-                    return `${d.source.name} → ${d.target.name}`;
-                });
-
-            // add in the nodes
-            const dragMoveRef = this.dragmove; // Have to use an external ref bc d3-sankey needs to rebind `this` in its drag call function
-            this.node = this.svg.append('g').selectAll('.node')
-                .data(graph.nodes)
-                .enter().append('g')
-                .attr('class', 'node')
-                .call(
-                    d3.drag()
-                        .subject(d => d)
-                        .on('start', function(){ this.parentNode.appendChild(this); })
-                        .on('drag', function(d){ dragMoveRef(this, d); })
-                );
-
-            // add the rectangles for the nodes
-            this.nodeBodies = this.node.append('rect');
-            this.nodeBodies
-                .style('fill', d => (d.color = this.colors[d.colorV]) ) //color(d.name.replace(/ .*/, "")); })
-                .style('stroke', d => d3.rgb(d.color).darker(2) )
-                .append('title')
-                .text( d => `${d.name}` );
-
-            // add in the title for the nodes
-            this.nodeLabels = this.node.append('text');
-            this.nodeLabels
-                .attr('dy', '0.35rem')
-                .attr('transform', null)
-                .text(d => d.name);
-
-            // Force a size update and new layout generation after JSON data changes:
-            this.updateSize();
-        }
-    }
+    name: 'FTA'
 };
 </script>
 
-<style lang="scss">
-  @import '@/styles/_colors.scss';
-  @import '@/styles/_dimensions.scss';
-  @import '@/styles/_functional.scss';
-
-  .fta-container {
+<style>
+  #fta-iframe {
+    position: absolute;
     width: 100%;
     height: 100%;
-
-    background: $color-background;
-
-    padding: 1rem;
-    user-select: none;
-
-    & > svg {
-      width: 100%;
-      height: 100%;
-    }
-
-    & .node > rect {
-      cursor: move;
-      fill-opacity: .9;
-      shape-rendering: crispEdges;
-    }
-
-    & .node > text {
-      pointer-events: none;
-      fill: #fff;
-      text-shadow: 0 1px 0 #000;
-    }
-
-    & .link {
-      fill: none;
-      stroke: #000;
-      stroke-opacity: .2;
-
-      &:hover {
-        stroke-opacity: .5;
-      }
-    }
+    border: none;
   }
-
-
 </style>
\ No newline at end of file
diff --git a/Apps/FrontendSoftware/yarn.lock b/Apps/FrontendSoftware/yarn.lock
index ab7f0bbd0..83ff1dfcc 100644
--- a/Apps/FrontendSoftware/yarn.lock
+++ b/Apps/FrontendSoftware/yarn.lock
@@ -8378,10 +8378,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-luxon@^1.24.1:
-  version "1.28.0"
-  resolved "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz"
-  integrity sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==
+luxon@^1.28.1:
+  version "1.28.1"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.28.1.tgz#528cdf3624a54506d710290a2341aa8e6e6c61b0"
+  integrity sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw==
 
 make-dir@^2.0.0:
   version "2.1.0"

From 62a4f87af78481a8d222437f16bf987647667e4c Mon Sep 17 00:00:00 2001
From: Peiqi Liu <peiqil@andrew.cmu.edu>
Date: Sun, 5 Mar 2023 21:00:08 -0500
Subject: [PATCH 2/6] using python instead of python3

---
 Apps/FrontendSoftware/README.md         | 2 +-
 Apps/FrontendSoftware/src/background.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Apps/FrontendSoftware/README.md b/Apps/FrontendSoftware/README.md
index 514df76ed..93608c36c 100644
--- a/Apps/FrontendSoftware/README.md
+++ b/Apps/FrontendSoftware/README.md
@@ -6,7 +6,7 @@ First, run this to get FLEUR (you need access to the FLEUR repository)
 git submodule update --init --recursive --remote
 ```
 
-Make sure `python3` and [required packages](https://github.com/PlanetaryRobotics/FLEUR/blob/redesign-dev/README.md#Development) are installed. 
+Make sure `python` and [required packages](https://github.com/PlanetaryRobotics/FLEUR/blob/redesign-dev/README.md#Development) are installed. 
 A copy of FLEUR can be found in `Apps/FrontendSoftware/public/FLEUR`.
 
 Install `node@14.20.1` (it's recommended to use `nvm`), `npm`, `yarn`, and a c-compiler (`xcode` if on a mac).
diff --git a/Apps/FrontendSoftware/src/background.js b/Apps/FrontendSoftware/src/background.js
index 0a1d60f81..8759e8c7e 100644
--- a/Apps/FrontendSoftware/src/background.js
+++ b/Apps/FrontendSoftware/src/background.js
@@ -212,7 +212,7 @@ app.on('activate', () => {
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
     spawn();
-    flaskProcess = child_process.spawn('python3', [path.join(__static, 'FLEUR', 'fleur_server.py')]);
+    flaskProcess = child_process.spawn('python', [path.join(__static, 'FLEUR', 'fleur_server.py')]);
 });
 
 app.on('quit', async () => {

From 1b45496ebf0db1b4f6d4de07b816eaf14ab4f7d6 Mon Sep 17 00:00:00 2001
From: Peiqi Liu <peiqil@andrew.cmu.edu>
Date: Sun, 5 Mar 2023 21:37:25 -0500
Subject: [PATCH 3/6] hopefully fixed submodule

---
 .gitmodules                        | 2 +-
 Apps/FrontendSoftware/public/FLEUR | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 160000 Apps/FrontendSoftware/public/FLEUR

diff --git a/.gitmodules b/.gitmodules
index 6026b33bf..2807771e2 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,4 +1,4 @@
 [submodule "Apps/FrontendSoftware/public/FLEUR"]
 	path = Apps/FrontendSoftware/public/FLEUR
 	url = git@github.com:PlanetaryRobotics/FLEUR.git
-	branch = integration-dev
\ No newline at end of file
+	branch = integration-dev
diff --git a/Apps/FrontendSoftware/public/FLEUR b/Apps/FrontendSoftware/public/FLEUR
new file mode 160000
index 000000000..13f84c66d
--- /dev/null
+++ b/Apps/FrontendSoftware/public/FLEUR
@@ -0,0 +1 @@
+Subproject commit 13f84c66ded4d1612cb533d234e95ce86e3b609a

From 5f499558ce7523b83eb372a4296174b6638677af Mon Sep 17 00:00:00 2001
From: Peiqi Liu <peiqil@andrew.cmu.edu>
Date: Mon, 6 Mar 2023 23:26:03 -0500
Subject: [PATCH 4/6] adapted fleur html to vue, removed flask from electron

---
 Apps/FrontendSoftware/README.md               |   3 -
 Apps/FrontendSoftware/package-lock.json       | 167 ++++++++-------
 Apps/FrontendSoftware/package.json            |   1 +
 Apps/FrontendSoftware/src/background.js       |  11 -
 .../src/components/FTA/FTA.vue                | 197 +++++++++++++++++-
 Apps/FrontendSoftware/src/main.js             |   3 +
 Apps/FrontendSoftware/src/store.js            |   7 +-
 7 files changed, 281 insertions(+), 108 deletions(-)

diff --git a/Apps/FrontendSoftware/README.md b/Apps/FrontendSoftware/README.md
index 93608c36c..96ee40b27 100644
--- a/Apps/FrontendSoftware/README.md
+++ b/Apps/FrontendSoftware/README.md
@@ -6,9 +6,6 @@ First, run this to get FLEUR (you need access to the FLEUR repository)
 git submodule update --init --recursive --remote
 ```
 
-Make sure `python` and [required packages](https://github.com/PlanetaryRobotics/FLEUR/blob/redesign-dev/README.md#Development) are installed. 
-A copy of FLEUR can be found in `Apps/FrontendSoftware/public/FLEUR`.
-
 Install `node@14.20.1` (it's recommended to use `nvm`), `npm`, `yarn`, and a c-compiler (`xcode` if on a mac).
 
 **NOTE:** If using MacOS and `nvm` make sure nvm setup is in `~/.zshenv` (what normally goes in `~/.bash_profile`)
diff --git a/Apps/FrontendSoftware/package-lock.json b/Apps/FrontendSoftware/package-lock.json
index 3f964e29e..774a6de18 100644
--- a/Apps/FrontendSoftware/package-lock.json
+++ b/Apps/FrontendSoftware/package-lock.json
@@ -4588,17 +4588,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -5575,17 +5575,17 @@
           }
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -5863,17 +5863,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -8181,9 +8181,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -8807,17 +8807,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -12673,17 +12673,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -14358,17 +14358,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -15886,17 +15886,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -16873,17 +16873,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -17366,17 +17366,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -18061,17 +18061,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -18813,17 +18813,17 @@
           "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -18894,6 +18894,11 @@
         }
       }
     },
+    "vue-plugin-load-script": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/vue-plugin-load-script/-/vue-plugin-load-script-1.3.6.tgz",
+      "integrity": "sha512-O+mpw32dXY3tMBBNKm7/qIByJV1QbHJ+0CXI4GeXx4NHU/Rg+bv7bvzugkEWnYcB/43WvR8ZD2K9KQIeVng1bA=="
+    },
     "vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
@@ -18922,17 +18927,17 @@
           "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -19154,17 +19159,17 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
diff --git a/Apps/FrontendSoftware/package.json b/Apps/FrontendSoftware/package.json
index c9d293cd0..d713ac229 100644
--- a/Apps/FrontendSoftware/package.json
+++ b/Apps/FrontendSoftware/package.json
@@ -56,6 +56,7 @@
     "vue-async-computed": "^3.8.2",
     "vue-cli-plugin-electron-builder": "~2.1.1",
     "vue-context": "^3.4.2",
+    "vue-plugin-load-script": "^1.3.6",
     "vue-router": "^3.1.5",
     "vue-simple-svg": "^1.3.2",
     "vue-template-compiler": "^2.6.11",
diff --git a/Apps/FrontendSoftware/src/background.js b/Apps/FrontendSoftware/src/background.js
index 8759e8c7e..84f3d7a5b 100644
--- a/Apps/FrontendSoftware/src/background.js
+++ b/Apps/FrontendSoftware/src/background.js
@@ -29,9 +29,6 @@ import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
 const isProduction = process.env.NODE_ENV === 'production';
 const isDevelopment = !isProduction;
 
-// Launch python script
-import child_process from 'child_process';
-
 // Handle all unhandled exceptions for diagnostics (and reporting):
 const unhandled = require('electron-unhandled');
 unhandled();
@@ -48,9 +45,6 @@ const ICON =
 
 let URL_PREFIX;
 
-// flask process launched for FLEUR
-let flaskProcess;
-
 // Standard scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{
     scheme: 'app',
@@ -212,11 +206,6 @@ app.on('activate', () => {
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
     spawn();
-    flaskProcess = child_process.spawn('python', [path.join(__static, 'FLEUR', 'fleur_server.py')]);
-});
-
-app.on('quit', async () => {
-    if (flaskProcess) flaskProcess.kill();
 });
 
 // Exit cleanly on request from parent process in development mode.
diff --git a/Apps/FrontendSoftware/src/components/FTA/FTA.vue b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
index edcadc4e0..232142ac2 100644
--- a/Apps/FrontendSoftware/src/components/FTA/FTA.vue
+++ b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
@@ -1,24 +1,199 @@
 <template>
-  <div>
-    <iframe
-      id="fta-iframe"
-      src="http://localhost:5000/display"
-    />
+  <div class="fleur-div">
+    <div id="screen">
+      <div id="component">
+        <!-- left pane contains a list of active faults -->
+        <div id="component-left">
+          <div id="component-left-spacer">
+            <!-- DYNAMIC FAULT COMPONENTS -->
+          </div>
+        </div>
+
+        <!-- center pane contains fault indication boxes -->
+        <div id="component-center">
+          <div id="component-center-box">
+            <div id="center-box-top">
+              <div
+                id="fault-zone-1"
+                class="fault-zone component-center-box-hover"
+              />
+              <div
+                id="fault-zone-2"
+                class="fault-zone component-center-box-hover"
+              />
+              <div
+                id="fault-zone-3"
+                class="fault-zone component-center-box-hover"
+              />
+            </div>
+            <div id="center-box-middle">
+              <div class="center-box-middle-sides">
+                <div
+                  id="fault-zone-4"
+                  class="fault-zone component-center-box-hover"
+                />
+                <div
+                  id="fault-zone-5"
+                  class="fault-zone component-center-box-hover"
+                />
+              </div>
+              <div id="center-box-middle-center" />
+              <div class="center-box-middle-sides">
+                <div
+                  id="fault-zone-6"
+                  class="fault-zone component-center-box-hover"
+                />
+                <div
+                  id="fault-zone-7"
+                  class="fault-zone component-center-box-hover"
+                />
+              </div>
+            </div>
+            <div id="center-box-bottom">
+              <div
+                id="fault-zone-8"
+                class="fault-zone component-center-box-hover"
+              />
+              <div
+                id="fault-zone-9"
+                class="fault-zone component-center-box-hover"
+              />
+              <div
+                id="fault-zone-10"
+                class="fault-zone component-center-box-hover"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- right pane contains the directors notebook -->
+        <div id="component-right">
+          <div id="component-right-spacer">
+            <div id="fault-hover-box">
+              <div id="fault-hover-box-header">
+                <div id="component-left-item-header-spacer">
+                  <div>
+                    <div id="fault-hover-box-header-title">
+                      Hover a fault
+                    </div>
+                    <div class="fault-hover-box-header-title-spacer " />
+                    <div id="item-header-title-flowlink">
+                      <a @click="openModal">Check&nbsp;flow</a>
+                    </div>
+                  </div>
+                  <div>
+                    <div id="item-header-title-status">
+                      Status:&nbsp;&nbsp;<span style="color: green;">OK</span>
+                    </div>
+                    <div class="item-header-title-spacer" />
+                    <div id="item-header-title-time">
+                      Time:&nbsp;--:--
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div id="fault-hover-box-body">
+                <div id="fault-hover-box-body-spacer">
+                  <div id="fault-hover-body-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor.
+                  </div>
+                  <div id="fault-hover-body-content">
+                    Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Duis ut diam quam nulla porttitor massa id.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <textarea id="notebook" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- popup modal -->
+    <div
+      v-show="modalDisplay"
+      id="nodeModal"
+      class="modal"
+    >
+      <div class="modal-content">
+        <span
+          class="close"
+          @click="closeModal"
+        >&times;</span>
+        <p id="modal-content" /><div id="chart" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import {join} from 'path';
+/* global forceRefresh */
 
 export default {
-    name: 'FTA'
+    name: 'FTA',
+    data() {
+        return {
+            modalDisplay: false
+        };
+    },
+    async mounted() {
+        if (!this.$store.state.fleurInitialized) {
+            // otherwise diagram.js can't find d3
+            if (!global.d3) {
+                global.d3 = require('d3');
+            }
+
+            const fleurRoot = join('FLEUR', 'static');
+            const scripts = [
+                join(fleurRoot, 'assets/js/diagram.js'),
+                'https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.min.js',
+                join(fleurRoot, 'assets/js/fleur_display_socket.js'),
+                join(fleurRoot, 'assets/js/fleur_display.js')
+            ];
+            for (const url of scripts) {
+                await this.$loadScript(url);
+            }
+
+            const fontlink1 = document.createElement('link');
+            fontlink1.rel = 'preconnect';
+            fontlink1.href = 'https://fonts.googleapis.com';
+            document.head.appendChild(fontlink1);
+
+            const fontlink2 = document.createElement('link');
+            fontlink2.rel = 'preconnect';
+            fontlink2.href = 'https://fonts.gstatic.com';
+            fontlink2.crossOrigin = 'true';
+            document.head.appendChild(fontlink2);
+
+            const stylesheetElem = document.createElement('link');
+            stylesheetElem.rel = 'stylesheet';
+            stylesheetElem.type = 'text/css';
+            stylesheetElem.href = join(fleurRoot, 'assets/styles/fleur_display.css');
+            document.head.appendChild(stylesheetElem);
+
+            // trigger fleur scripts
+            window.onload();
+
+            this.$store.commit('fleurInitialized');
+        } else {
+            forceRefresh();
+        }
+    },
+    methods: {
+        openModal () {
+            this.modalDisplay = true;
+        },
+        closeModal () {
+            this.modalDisplay = false;
+        }
+    }
 };
 </script>
 
 <style>
-  #fta-iframe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border: none;
+  .fleur-div {
+    width:100%;
+    height:100%;
   }
 </style>
\ No newline at end of file
diff --git a/Apps/FrontendSoftware/src/main.js b/Apps/FrontendSoftware/src/main.js
index 7605d560b..f53e378b7 100644
--- a/Apps/FrontendSoftware/src/main.js
+++ b/Apps/FrontendSoftware/src/main.js
@@ -13,6 +13,9 @@ import store from './store';
 
 import { process } from '@electron/remote';
 
+import LoadScript from 'vue-plugin-load-script';
+Vue.use(LoadScript);
+
 /* Whether the Application is Currently being Run in Development Mode. Any
 experimental features can be wrapped in v-if="$isDev" and experimental functions
 in if(this.$isDev){} to keep them from being visible in production builds: */
diff --git a/Apps/FrontendSoftware/src/store.js b/Apps/FrontendSoftware/src/store.js
index f5af70638..7d36980dd 100644
--- a/Apps/FrontendSoftware/src/store.js
+++ b/Apps/FrontendSoftware/src/store.js
@@ -56,7 +56,8 @@ export default new Vuex.Store({
             length: 1,
             staleTime: Infinity,
             autopopulate: true
-        })
+        }),
+        fleurInitialized: false
     },
 
     getters: {
@@ -75,7 +76,9 @@ export default new Vuex.Store({
     },
 
     mutations: {
-
+        fleurInitialized(state) {
+            state.fleurInitialized = true;
+        }
     },
 
     actions: {

From d9d23c297a0f3eb9973279cf48733c977476067b Mon Sep 17 00:00:00 2001
From: Peiqi Liu <peiqil@andrew.cmu.edu>
Date: Tue, 7 Mar 2023 22:52:28 -0500
Subject: [PATCH 5/6] integrated fleur css into vue

---
 Apps/FrontendSoftware/public/FLEUR            |   2 +-
 .../src/components/FTA/FTA.vue                | 551 +++++++++++++++++-
 2 files changed, 544 insertions(+), 9 deletions(-)

diff --git a/Apps/FrontendSoftware/public/FLEUR b/Apps/FrontendSoftware/public/FLEUR
index 13f84c66d..9a71741dc 160000
--- a/Apps/FrontendSoftware/public/FLEUR
+++ b/Apps/FrontendSoftware/public/FLEUR
@@ -1 +1 @@
-Subproject commit 13f84c66ded4d1612cb533d234e95ce86e3b609a
+Subproject commit 9a71741dc3314143ed15fe98115b9ba7f3fafb9a
diff --git a/Apps/FrontendSoftware/src/components/FTA/FTA.vue b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
index 232142ac2..e334ac78a 100644
--- a/Apps/FrontendSoftware/src/components/FTA/FTA.vue
+++ b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
@@ -166,17 +166,15 @@ export default {
             fontlink2.crossOrigin = 'true';
             document.head.appendChild(fontlink2);
 
-            const stylesheetElem = document.createElement('link');
-            stylesheetElem.rel = 'stylesheet';
-            stylesheetElem.type = 'text/css';
-            stylesheetElem.href = join(fleurRoot, 'assets/styles/fleur_display.css');
-            document.head.appendChild(stylesheetElem);
+            // define function for fleur script
+            global.openModal = this.openModal;
 
-            // trigger fleur scripts
+            // trigger fleur script
             window.onload();
 
             this.$store.commit('fleurInitialized');
         } else {
+            // in fleur script
             forceRefresh();
         }
     },
@@ -192,8 +190,545 @@ export default {
 </script>
 
 <style>
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  /* fleur root */
   .fleur-div {
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 1;
+    background: #121212;
+    animation: fadeIn 5s;
+  }
+
+  /* remove all styles from outside fleur */
+  .fleur-div * {
+    all: revert;
+  }
+
+  /* START POPUP MODAL */
+  .fleur-div .modal {
+    position: fixed;
+    z-index: 1;
+    padding-top: 20px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+  }
+
+  .fleur-div .modal-content {
+    width: 85%;
+    height: 80%;
+    background-color: rgb(60, 60, 60);
+    background-color: rgba(33, 33, 33, 0.9);
+    margin: auto;
+    padding: 20px;
+    border: 2px solid rgb(30, 30, 30);
+    color: white;
+  }
+
+  .fleur-div .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .fleur-div .close:hover,
+  .fleur-div .close:focus {
+    color: white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  /* END POPUP MODAL */
+
+
+  /* START SANKEY DIAGRAM */
+
+  .fleur-div #chart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div .node rect {
+    pointer-events: all;
+    cursor: move;
+    fill-opacity: .9;
+    shape-rendering: optimizeSpeed ;
+    border: 2px solid black;
+  }
+  .fleur-div .node text {
+    pointer-events: none;
+    fill: white;
+    font-family: 'Space Grotesk', sans-serif;
+    font-weight: 500;
+    text-shadow: 0 1px 0 #0000;
+  }
+  .fleur-div .link {
+    fill: none;
+    stroke: limegreen;
+    stroke-opacity: .4;
+    cursor: pointer;
+  }
+  .fleur-div .link:hover {
+    stroke-opacity: .5;
+  }
+
+  /* END SANKEY DIAGRAM */
+
+
+
+  /* START MAIN INTERFACE */
+  .fleur-div #screen {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    background-color: #121212
+  }
+
+  .fleur-div #header {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #2a2a2a;
+
+  }
+  .fleur-div #back-box {
+    margin-left: 3%;
+    display: flex;
+    justify-content: left;
+  }
+  .fleur-div #back-box > a {
+    font-size: 4vh;
+    color: lightblue;
+    text-decoration: none;
+  }
+  .fleur-div #status-box {
+    color: white;
+    font-size: 1.5vh;
+    margin-right: 3%;
+  }
+  .fleur-div #status-box-value {
+  }
+  .fleur-div #header-center{
+    flex: 1;
+    width: 100%;
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div .phase {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div .phase > button {
+    width: 70%;
+    height: 70%;
+    outline: 1px solid lightblue;
+    border-radius: 10px;
+    border-color: #121212;
+    font-size: 1.6vh;
+    color: lightblue;
+    background: #121212;
+
+    /* better font here */
+    font-family: 'Share Tech Mono', monospace;
+    font-weight: 600;
+  }
+  .fleur-div .phase > button:hover {
+    outline: 2px solid orange;
+    cursor: pointer;
+  }
+  .fleur-div #component {
+    flex: 18;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #component-left {
+    flex: 3;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Roboto', sans-serif;
+  }
+  .fleur-div #component-left-spacer {
+    width: 90%;
+    height: 90%;
+    align-items: center;
+    justify-content: flex-start;
+    border: 1px solid #2a2a2a;
+    border-right: 0px;
+    overflow-y: auto;
+    padding-left: 3%; /* adjust for scrollbar */
+
+    border-radius: 10px 0px 0px 10px;
+  }
+  .fleur-div #component-left-spacer::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  .fleur-div #component-left-spacer::-webkit-scrollbar-track {
+    background-color: rgb(21, 21, 21);
+  }
+
+  .fleur-div #component-left-spacer::-webkit-scrollbar-thumb {
+    background-color: #2a2a2a;
+    border-radius: 0px 0px 0px 0px;
+  }
+
+  .fleur-div .component-left-item {
+    width: 95%;
+    height: 25%;
+    margin-top: 3%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    outline: 1px solid rgb(193, 193, 193);
+    background-color: rgb(8, 8, 8);
+    color: rgb(193, 193, 193);
+    /*filter: contrast(95%);*/
+    border: 2px solid transparent;
+  }
+  .fleur-div .component-left-item:hover {
+    cursor: pointer;
+    /*filter: contrast(300%);*/
+    outline: 2px solid lightblue !important;
+  }
+  .fleur-div #component-left-item-header {
+    flex: 1;
+    width: 100%;
+    height: 20%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #component-left-item-header-spacer {
+    width: 95%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid lightblue;
+  }
+  .fleur-div #component-left-item-header-spacer > div {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div .item-header-title-spacer {
+    flex: 1;
+  }
+  .fleur-div #item-header-title {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    font-size: 1.8vh;
+  }
+  .fleur-div #item-header-title-status {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    font-size: 1.5vh;
+  }
+  .fleur-div #item-header-title-flowlink {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    font-size: 1.5vh;
+  }
+  .fleur-div #item-header-title-flowlink > a,
+  .fleur-div #item-header-title-flowlink > a:visited {
+    text-decoration: none;
+    color: rgb(89, 186, 218);
+  }
+  .fleur-div #item-header-title-flowlink > a:hover {
+    color: orange;
+  }
+  .fleur-div #item-header-title-time {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    font-size: 1.5vh;
+  }
+  .fleur-div #component-left-item-body {
+    flex: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #component-left-item-body-spacer {
+    width: 95%;
+    height: 85%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    /* border: 1px solid rgb(21, 21, 21); */
+  }
+  .fleur-div #item-body-description {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 1.2vh;
+  }
+  .fleur-div #item-body-content {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 1.2vh;
+  }
+
+  .fleur-div #component-center {
+    flex: 4;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #component-center-box {
+    width: 85vh;
+    height: 85vh;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    /* border: 2px solid lightblue; */
+  }
+  .fleur-div .component-center-box-hover:hover {
+    filter: drop-shadow(6px 6px 8px lightblue) invert(10%);
+    cursor: pointer;
+  }
+  .fleur-div .fault-zone {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    outline: 1px solid lightblue;
+    /*noinspection CssUnknownTarget*/
+    background: url('/FLEUR/static/assets/images/starfield.JPG');
+    background-size: cover;
+
+  }
+  .fleur-div .fault-zone>* {
+    flex: 3 3 17%; /* this needs some tuning */
+    outline: .25px solid rgba(255, 255, 255, .5);
+    transition: background 6s;
+  }
+  .fleur-div .fault-zone > div:hover {
+    outline: 2px solid orange;
+    z-index: 1;
+  }
+  .fleur-div #center-box-top {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .fleur-div #center-box-top > div:first-child {
+    background-size: cover;
+  }
+  .fleur-div #center-box-middle {
+    flex: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .fleur-div .center-box-middle-sides {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .fleur-div #center-box-middle-center {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    outline: 1px solid lightblue;
+    /*noinspection CssUnknownTarget*/
+    background: url('/FLEUR/static/assets/images/rover-placeholder-image.JPG');
+    background-size: cover;
+  }
+
+  .fleur-div #center-box-bottom {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .fleur-div #component-right {
+    flex: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #component-right-spacer {
+    width: 90%;
+    height: 90%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #fault-hover-box {
+    flex: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    outline: 2px solid #2a2a2a;
+    margin-bottom: 10%;
+
+    outline: 1px solid rgb(193, 193, 193);
+    background: rgba(0, 26, 51, .2);
+    background-size: cover;
+    color: rgb(193, 193, 193);
+
+    font-family: 'Roboto', sans-serif;
+  }
+  .fleur-div .fault-hover-box-spacer {
+    width: 80%;
+    height: 80%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: left;
+  }
+  .fleur-div #fault-hover-box-header {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.8vh;
+    margin-top: 5%;
+  }
+  .fleur-div #fault-hover-box-body {
+    flex: 8;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5vh;
+  }
+
+  .fleur-div #notebook {
+    flex: 3;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(21, 21, 21);
+    color: white;
+    resize: none;
+  }
+  .fleur-div #fault-hover-box-header {
+    flex: 1;
+    width: 90%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .fleur-div #fault-hover-box-header-title {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    font-size: 1.8vh;
+  }
+  .fleur-div #fault-hover-box-body-spacer {
+    width: 95%;
+    height: 85%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #fault-hover-box-body {
+    flex: 2;
+    width: 90%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fleur-div #fault-hover-body-description {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 1.2vh;
+  }
+  .fleur-div #fault-hover-body-content {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 1.2vh;
   }
+  /* END MAIN INTERFACE */
 </style>
\ No newline at end of file

From ef12b013da11c387e4aedab9583c45046d871ac0 Mon Sep 17 00:00:00 2001
From: Peiqi Liu <peiqil@andrew.cmu.edu>
Date: Wed, 8 Mar 2023 18:37:20 -0500
Subject: [PATCH 6/6] fixed modal display after switch back to fleur

---
 Apps/FrontendSoftware/src/components/FTA/FTA.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Apps/FrontendSoftware/src/components/FTA/FTA.vue b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
index e334ac78a..eb70ac1c0 100644
--- a/Apps/FrontendSoftware/src/components/FTA/FTA.vue
+++ b/Apps/FrontendSoftware/src/components/FTA/FTA.vue
@@ -166,9 +166,6 @@ export default {
             fontlink2.crossOrigin = 'true';
             document.head.appendChild(fontlink2);
 
-            // define function for fleur script
-            global.openModal = this.openModal;
-
             // trigger fleur script
             window.onload();
 
@@ -177,6 +174,9 @@ export default {
             // in fleur script
             forceRefresh();
         }
+
+        // define function for fleur script
+        global.openModal = this.openModal;
     },
     methods: {
         openModal () {