From 3073746047b5036732850fd761417d175df0d45c Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 00:41:26 -0700
Subject: [PATCH 01/63] Add ACE features, fixed from newAce

---
 src/components/ace/ACE.vue                  | 976 ++++++++++++++++++++
 src/components/ace/index.js                 |   1 +
 src/components/configuration/Greenhouse.vue |  20 +-
 src/components/entry/Menu.vue               |  22 +-
 src/router.js                               |   6 +-
 src/views/ConfigurationView.vue             |  23 +
 6 files changed, 1027 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ace/ACE.vue
 create mode 100644 src/components/ace/index.js

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
new file mode 100644
index 000000000..a292f07ca
--- /dev/null
+++ b/src/components/ace/ACE.vue
@@ -0,0 +1,976 @@
+<script>
+import axios from 'axios'
+
+export default {
+    props: {
+    },
+    data() {
+        return {
+            currentMode: 'agent',
+            agentDesc: '',
+            currencyDesc: '',
+            currencyList: [],
+            selectedCurrency: 'o2',
+            selectedCurrencyCategory: 'atmosphere',
+            currencyCategorySelected: 'atmosphere',
+            newCurrencyName: '',
+            categorySelected: 'plants',
+            selectedAgentName: 'rice',
+            selectedCapacity: '',
+            customClassName: '',
+            capacityTypes: {},
+            inTypes: {},
+            outTypes: {},
+            thresholdTypes: {},
+            kindTypes: {},
+            newCapacityType: '',
+            newCapacityValue: '',
+            newInType: '',
+            newInValue: '',
+            newOutType: '',
+            newOutValue: '',
+            newThresholdCurrency: 'o2',
+            newThresholdPath: '',
+            newThresholdLimit: '',
+            newThresholdValue: '',
+            newThresholdConnections: '',
+            propertyNames: {},
+            newPropertyName: '',
+            newPropVal: '',
+            newPropUnit: '',
+            newWeightedIn: '',
+            newWeightedOut: '',
+            newConnectionIn: '',
+            newConnectionOut: '',
+            newRequires: '',
+            newCriterionName: '',
+            newCriterionValue: '',
+            newCriterionLimit: '',
+            newGrowthKind: '',
+            newGrowthPattern: '',
+            newDepriveValue: '',
+            newDepriveUnit: '',
+            changedPropVal: '',
+            newAgentName: '',
+            customAgents: {},
+            customCurrencies: {},
+        }
+    },
+    computed: {
+        currencyTypes() {
+            const listOfTypes = []
+            /* Determine list of type */
+            for (const key in this.currencyDesc) {
+                const currencyType = key
+                if (!listOfTypes.includes(currencyType)) listOfTypes.push(currencyType)
+            }
+            return listOfTypes
+        },
+        agentClasses() {
+            const listOfClasses = []
+            /* Determine list of agent_class */
+            for (const key in this.agentDesc) {
+                const className = this.agentDesc[key].agent_class
+                if (!listOfClasses.includes(className)) listOfClasses.push(className)
+            }
+            return listOfClasses
+        },
+        agentsInClass() {
+            const listOfAgents = []
+            for (const item in this.agentDesc) {
+                const itemsClass = this.agentDesc[item].agent_class
+                if (itemsClass==this.categorySelected) { listOfAgents.push(item) }
+            }
+            return listOfAgents
+        },
+    },
+    watch: {
+        selectedAgentName() {
+        },
+        currencyDesc() {
+            this.generateCurrencyList()
+        },
+    },
+    async created() {
+        // this.setAgentClass()
+        this.removeSurplusAgentData()
+
+        // Get agents from simoc-abm
+        try {
+            this.agentDesc = await this.getAgentDesc()
+            // Get agents from local Storage
+            this.getLocalStorageAgents()
+        } catch (error) {
+            console.log(error)
+        }
+        // Get currencies from simoc-abm
+        try {
+            this.currencyDesc = await this.getCurrencyDesc()
+            this.generateCurrencyList()
+            // Get currencies from local storage.
+            this.getLocalStorageCurrencies()
+        } catch (error) {
+            console.log(error)
+        }
+    },
+    methods: {
+        getLocalStorageAgents() {
+            let localStorageAgents = localStorage.getItem('customAgents')
+            localStorageAgents = JSON.parse(localStorageAgents)
+            if (typeof (localStorageAgents)=='object' && (localStorageAgents!=null)) {
+                console.log('Agents found in local storage:')
+                for (const agent in (localStorageAgents)) {
+                    console.log(agent)
+                    this.agentDesc[agent] = localStorageAgents[agent]
+                }
+            } else {
+                console.log(' * No agents loaded from local storage *')
+            }
+        },
+        getLocalStorageCurrencies() {
+            let localStorageCurrencies = localStorage.getItem('customCurrencies')
+            localStorageCurrencies = JSON.parse(localStorageCurrencies)
+            if (typeof (localStorageCurrencies)=='object' && (localStorageCurrencies!=null)) {
+                // for(let category in localStorageCurrencies)
+                // console.log("Currencies found in local storage:")
+                // for (let currency in category) {
+                //  console.log(currency)
+                //  this.currencyDesc[category][currency] = localStorageCurrencies[currency]
+                // }
+                if (typeof (this.currencyDesc.custom)=='object' && (localStorageCurrencies!=null)) {
+                    // Object exists
+                } else {
+                    this.currencyDesc.custom = {}
+                }
+                for (const currency in localStorageCurrencies) {
+                    console.log(currency)
+                    this.currencyDesc.custom[currency] = localStorageCurrencies[currency]
+                }
+            } else {
+                console.log(' * No agents loaded from local storage *')
+            }
+        },
+        async getCurrencyDesc() {
+            try {
+                // Retrieve agent desc  from the backend
+                console.log(`* Loading Currency Desc from backend *`)
+                const response = await axios.get('/get_currency_desc')
+                const currencyDesc = response.data.currency_desc
+                console.log(currencyDesc)
+                return currencyDesc  // get the actual data out of the response object
+            } catch (error) {
+                console.log('* Loading agent desc failed! *')
+                console.error(error)
+                return null
+            }
+        },
+        generateCurrencyList() {
+            const currancies = []
+            this.currencyList = []
+            for (const type in (this.currencyDesc)) {
+                for (const subkey in (this.currencyDesc[type])) {
+                    currancies.push(subkey)
+                }
+            }
+
+            for (let i=0; i<currancies.length; ++i) {
+                this.currencyList.push(currancies[i])
+            }
+        },
+        async getAgentDesc() {
+            try {
+                // Retrieve agent desc  from the backend
+                console.log(`* Loading Agent Desc from backend *`)
+                const response = await axios.get('/get_agent_desc')
+                const agentDesc = response.data.agent_desc
+                return agentDesc  // get the actual data out of the response object
+            } catch (error) {
+                console.log('* Loading agent desc failed! *')
+                console.error(error)
+                return null
+            }
+        },
+        setAgentClass() {
+            this.agentDesc[this.selectedAgentName].agent_class= 'plants'
+        },
+        removeSurplusAgentData() {
+            /* Probably we should actually duplicate the agentDesc to create one just for the display of data that is trimmed down,
+               Since copied/modified agents will want to still contain necessary fields that don't need to be shown */
+            for (const key in this.agentDesc) {
+                /* amount = 1 is for all, so it doesn't need to be there*/
+                // delete this.agentDesc[key].amount
+            }
+        },
+        submitAgent() {
+            this.agentDesc[this.categorySelected][this.selectedAgentName] = {'data': 0}
+        },
+        selectItem(item) {
+            this.selectedAgentName = item
+        },
+        selectCurrency(currency) {
+            this.selectedCurrency = currency
+            this.selectedCurrencyCategory = this.currencyCategorySelected
+        },
+        setCustomClass() {
+            this.agentDesc[this.selectedAgentName].agent_class=this.customClassName
+            this.categorySelected = this.customClassName
+        },
+        removeCapacity(key) {
+            delete this.agentDesc[this.selectedAgentName].capacity[key]
+            // Remove the capacities object if there are no capacities in it.
+            if ((Object.keys(this.agentDesc[this.selectedAgentName].capacity).length) == 0) {
+                delete this.agentDesc[this.selectedAgentName].capacity
+            }
+        },
+        removeInFlow(currency) {
+            delete this.agentDesc[this.selectedAgentName].flows.in[currency]
+        },
+        removeOutFlow(currency) {
+            delete this.agentDesc[this.selectedAgentName].flows.out[currency]
+        },
+        removeThreshold(currency) {
+            delete this.agentDesc[this.selectedAgentName].thresholds[currency]
+            // Remove thresholds object if there are no currencies listed
+            if (Object.keys(this.agentDesc[this.selectedAgentName].thresholds).length == 0) {
+                delete this.agentDesc[this.selectedAgentName].thresholds
+            }
+        },
+        removeProperty(property) {
+            delete this.agentDesc[this.selectedAgentName].properties[property]
+        },
+        removeGrowth(currency, kind) {
+            // Delete the specific kind of growth
+            delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind]
+            // Remove the growth object if there are no growths in it.
+            if (Object.keys(this.agentDesc[this.selectedAgentName].flows.out[currency].growth).length == 0) {
+                delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth
+            }
+        },
+        removeCriterion(currency, kind) {
+            // Delete the specific kind of criterion
+            delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[kind]
+            // Remove the criteria object if there are no growths in it.
+            if (Object.keys(this.agentDesc[this.selectedAgentName].flows.out[currency].criteria).length == 0) {
+                delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
+            }
+        },
+        removeFlowArrayItem(direction, type, currency, name) {
+            const index = this.agentDesc[this.selectedAgentName].flows[direction][currency][type].indexOf(name)
+            // Delete the connection by its array index number
+            if (index !== -1) {
+                this.agentDesc[this.selectedAgentName].flows[direction][currency][type].splice(index, 1)
+            }
+            // Remove the flow array array if it is empty
+            if ((this.agentDesc[this.selectedAgentName].flows[direction][currency][type]).length == 0) {
+                delete this.agentDesc[this.selectedAgentName].flows[direction][currency][type]
+            }
+        },
+        removeDeprive(currency) {
+            delete this.agentDesc[this.selectedAgentName].flows.in[currency].deprive
+        },
+        changePropertyValue(property, newPropVal) {
+            /* See if it is a number, if it is, store it as one, otherwise as a string */
+            if (!Number.isNaN(Number(newPropVal))) { 
+            /* This is to ensure the data sent to the back is not a string in the JSON */
+            /* When it is supposed to be a number e.g. { a: 1 } vs { a: '1' } */
+            /* Works with !isNaN(newPropVal), but doesn't pass lint*/
+            /* Check this again to verify with this workaround for lint */
+                newPropVal = +newPropVal
+            }
+            if (newPropVal=='true') { newPropVal = true }
+            if (newPropVal=='false') { newPropVal = false }
+            this.agentDesc[this.selectedAgentName].properties[property].value=newPropVal
+        },
+        renameAgent(newName) {
+            // Make Sure Agent Doesn't Already Exist
+            for (name in this.agentDesc) {
+                if (name == newName) {
+                    const alertString = `${newName} already exists, try another name!`
+                    console.log(alertString) // This really needs to be a notification like an alert
+                    // alert(alertString) // Alert does not pass lint
+                    return
+                }
+            }
+            // Rename Object
+            const thisAgent = this.agentDesc[this.selectedAgentName]
+            this.agentDesc[newName] = thisAgent
+            delete this.agentDesc[this.selectedAgentName]
+            this.selectedAgentName = newName
+            // Make sure that if it is a plant, the corresponding currency is renamed also
+            if (this.categorySelected=='plants') {
+                // This really needs to be a notification like an alert, but alert does not pass lint
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED, (i.e. rice has rice as outflow, and has rice as a biomass connection)!')
+            }
+            // Export the plant currency
+        },
+        renameCurrency(newName) {
+            // Make Sure Currency Doesn't Already Exist
+            for (const currency in this.currencyDesc[this.currencyCategorySelected]) {
+                if (currency == newName) {
+                    const alertString = `${newName} already exists, try another name!`
+                    // This really needs to be a notification like an alert, but alert does not pass lint
+                    console.log(alertString)
+                    return
+                }
+            }
+            // Rename Object
+            const thisCurrency = this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]
+            this.currencyDesc[this.currencyCategorySelected][newName] = thisCurrency
+            delete this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]
+            this.selectedCurrency = newName
+            this.generateCurrencyList()
+        },
+        changeType(key, value, newName) {
+            this.agentDesc[this.selectedAgentName].capacity[newName]=value
+            delete this.agentDesc[this.selectedAgentName].capacity[key]
+        },
+        changeInType(key, value, newName) {
+            this.agentDesc[this.selectedAgentName].flows.in[newName]=value
+            delete this.agentDesc[this.selectedAgentName].flows.in[key]
+        },
+        changeOutType(key, value, newName) {
+            this.agentDesc[this.selectedAgentName].flows.out[newName]=value
+            delete this.agentDesc[this.selectedAgentName].flows.out[key]
+        },
+        changeThresholdType(key, value, newName) {
+            this.agentDesc[this.selectedAgentName].thresholds[newName]=value
+            delete this.agentDesc[this.selectedAgentName].thresholds[key]
+        },
+        changePropertyName(key, value, newName) {
+            this.agentDesc[this.selectedAgentName].properties[newName]=value
+            delete this.agentDesc[this.selectedAgentName].properties[key]
+        },
+        changeGrowthType(kind, value, newName, key) {
+            this.agentDesc[this.selectedAgentName].flows.out[key].growth[newName]=value
+            delete this.agentDesc[this.selectedAgentName].flows.out[key].growth[kind]
+        },
+        changeCriterionType(kind, value, newName, key) {
+            this.agentDesc[this.selectedAgentName].flows.out[key].criteria[newName]=value
+            delete this.agentDesc[this.selectedAgentName].flows.out[key].criteria[kind]
+        },
+        addNewCapacity(key, value) {
+            // Add the capacity object if it doesn't exist
+            if (!(typeof (this.agentDesc[this.selectedAgentName].capacity)=='object')) {
+                this.agentDesc[this.selectedAgentName].capacity = {}
+            }
+            this.agentDesc[this.selectedAgentName].capacity[key]=value
+        },
+        addNewFlow(direction, currency) {
+            this.agentDesc[this.selectedAgentName].flows[direction][currency]={}
+            this.agentDesc[this.selectedAgentName].flows[direction][currency].flow_rate = {}
+        },
+        addNewThreshold(currency, path, limit, value, connections) {
+            // Add the threshold object if it doesn't exist
+            if (!(typeof (this.agentDesc[this.selectedAgentName].thresholds)=='object')) {
+                this.agentDesc[this.selectedAgentName].thresholds = {}
+            }
+            this.agentDesc[this.selectedAgentName].thresholds[currency]={}
+            this.agentDesc[this.selectedAgentName].thresholds[currency].path=path
+            this.agentDesc[this.selectedAgentName].thresholds[currency].limit=limit
+            this.agentDesc[this.selectedAgentName].thresholds[currency].value=value
+            this.agentDesc[this.selectedAgentName].thresholds[currency].connections=connections
+        },
+        addNewProperty(newPropertyName, newPropVal, newPropUnit) {
+            if (!isNaN(newPropVal)) { /* If it is a number, make sure it is a number and not a string */
+                newPropVal = +newPropVal
+            }
+            if (newPropVal=='true') { newPropVal = true }
+            if (newPropVal=='false') { newPropVal = false }
+            if (newPropUnit != '') {
+                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = {'value': newPropVal, 'unit': newPropUnit}
+            } else { // Make sure not to add unit if it is not specified
+                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = {'value': newPropVal}
+            }
+        },
+        addFlowArrayItem(direction, type, currency, name) {
+            // Add the array if it doesn't exist
+            if (!(typeof (this.agentDesc[this.selectedAgentName].flows[direction][currency][type])=='object')) {
+                this.agentDesc[this.selectedAgentName].flows[direction][currency][type] = []
+            }
+            // Add the item to the array
+            (this.agentDesc[this.selectedAgentName].flows[direction][currency][type]).push(name)
+        },
+        addNewCriterion(currency, name, value, limit) {
+            // Add Criteria if it doesn't exist
+            if (!(typeof (this.agentDesc[this.selectedAgentName].flows.out[currency].criteria)=='object')) {
+                this.agentDesc[this.selectedAgentName].flows.out[currency].criteria = {}
+            }
+            if (!(typeof (this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name])=='object')) {
+                this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name] = {}
+            }
+            // Add the criterion
+            this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name].value=value
+            this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name].limit=limit
+        },
+        addNutrition() {
+            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition = {}
+            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.kcal = 0
+            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.water = 0
+            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.protein = 0
+            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.carbohydrate = 0
+            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.fat = 0
+        },
+        deleteNutrition() {
+            delete this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition
+        },
+        addGrowth(currency, kind, pattern) {
+            if (!(typeof (this.agentDesc[this.selectedAgentName].flows.out[currency].growth)=='object')) {
+                this.agentDesc[this.selectedAgentName].flows.out[currency].growth = {}
+            }
+            this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind] = {}
+            this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind].type=pattern
+        },
+        addDeprive(currency, value, unit) {
+            this.agentDesc[this.selectedAgentName].flows.in[currency].deprive = {}
+            this.agentDesc[this.selectedAgentName].flows.in[currency].deprive.value=value
+            this.agentDesc[this.selectedAgentName].flows.in[currency].deprive.unit=unit
+        },
+        createNewAgent() {
+            const agentNumber = Object.keys(this.agentDesc).length + 1
+            const newAgentName=`agent_${agentNumber}`
+            this.agentDesc[newAgentName] = {}
+            this.agentDesc[newAgentName].amount = 1
+            this.agentDesc[newAgentName].flows = {}
+            this.agentDesc[newAgentName].flows.in = {}
+            this.agentDesc[newAgentName].flows.out = {}
+            this.agentDesc[newAgentName].properties = {}
+            this.agentDesc[newAgentName].agent_class=this.categorySelected
+            // Switch to the new agent
+            this.selectedAgentName=newAgentName
+        },
+        createNewCurrency() {
+            // Generate a unique currency name
+            // Count currencies
+            let count = 0
+            this.selectedCurrencyCategory = this.currencyCategorySelected
+            for (const item in this.currencyDesc[this.selectedCurrencyCategory]) {
+                count+=1
+            }
+            const currencyNumber = count + 1
+            const currency_number_string = `_currency_${currencyNumber}`
+            const newCurrencyName=`${this.selectedCurrencyCategory}${currency_number_string}`
+            // Create the empty object
+            this.currencyDesc[this.selectedCurrencyCategory][newCurrencyName] = {}
+            // Set empty parameters
+            this.currencyDesc[this.selectedCurrencyCategory][newCurrencyName].label=''
+            // Switch to newly generated currency
+            this.generateCurrencyList()
+            this.selectedCurrency=newCurrencyName
+        },
+        duplicateAgent() {
+            const agentNumber = Object.keys(this.agentDesc).length + 1
+            const newAgentName=`${this.selectedAgentName}_${agentNumber}`
+            // Deep Copy the original object
+            const copiedObject = JSON.parse(JSON.stringify(this.agentDesc[this.selectedAgentName]))
+            this.agentDesc[newAgentName]=copiedObject
+            // Switch to the copied agent
+            this.selectedAgentName=newAgentName
+            // Make sure to duplicate correspoding plant currency
+            if (this.categorySelected=='plants') {
+                // This really needs to be a notification like an alert, but alert does not pass lint
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED, AND NEW PLANT CURRENCIES ARE MADE TO MATCH (i.e. rice has rice as outflow, and has rice as a biomass connection)!')
+            }
+        },
+        duplicateCurrency() {
+            const currencyNumber = Object.keys(this.currencyDesc).length + 1
+            const newCurrencyName=`${this.selectedCurrency}_${currencyNumber}`
+            // Deep Copy the original object
+            const copiedObject = JSON.parse(JSON.stringify(this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]))
+            this.currencyDesc[this.currencyCategorySelected][newCurrencyName]=copiedObject
+            // Switch to the copied agent
+            this.selectedCurrency=newCurrencyName
+            this.generateCurrencyList()
+        },
+        exportJSON() {
+            // Package this agent singly
+            const agentName = this.selectedAgentName
+            this.customAgents[agentName] = this.agentDesc[this.selectedAgentName]
+            let currentCustomAgents=localStorage.getItem('customAgents')
+            currentCustomAgents=JSON.parse(currentCustomAgents)
+            if (typeof (currentCustomAgents)=='object' && (currentCustomAgents!=null)) {
+                currentCustomAgents[agentName] = this.customAgents[agentName]
+            } else {
+                currentCustomAgents = {}
+                currentCustomAgents[agentName] = this.customAgents[agentName]
+            }
+            localStorage.setItem('customAgents', JSON.stringify(currentCustomAgents))
+            // If plant, export currency for it, too
+            if (this.categorySelected=='plants') {
+                // This really needs to be a notification like an alert, but alert does not pass lint
+                console.log('PLANT EXPORTED. MAKE SURE FLOW CURRENCIES ARE UPDATED, AND NEW PLANT CURRENCIES EXPORTED TOO!')
+            }
+        },
+        exportJSONCurrency() {
+            const currencyName = this.selectedCurrency
+            let currentCustomCurrencies = localStorage.getItem('customCurrencies')
+            currentCustomCurrencies = JSON.parse(currentCustomCurrencies)
+            // Check if the custom currency object exists
+            if (typeof (currentCustomCurrencies)=='object' && (currentCustomCurrencies!=null)) {
+            } else { // Create the currency object
+                currentCustomCurrencies = {}
+            }
+            // Create the currency category
+            /*
+            // In simoc abm, it expects custom currencies to have a "category" param instead of being filed by category
+            // So instead of creating custom currency category, just file them under "custom"
+            if(typeof (currentCustomCurrencies[this.currencyCategorySelected])=='object' && (currentCustomCurrencies!=null)) {
+            } else {
+                currentCustomCurrencies[this.currencyCategorySelected] = {}
+            }
+            */
+            let category = this.currencyCategorySelected
+            this.customCurrencies[currencyName] = this.currencyDesc[category][currencyName]
+            // Assign category for export
+            if (category=='custom') {
+                category = this.currencyDesc.custom[currencyName].category
+            } else {
+                this.customCurrencies[currencyName].category = category // this.currencyCategorySelected
+            }
+            currentCustomCurrencies[currencyName]=this.customCurrencies[currencyName]
+            localStorage.setItem('customCurrencies', JSON.stringify(currentCustomCurrencies))
+        },
+        returnToMenu() { // Function to return to main menu
+            this.$router.push('menu')
+        },
+        switchMode() { // Function to swap between agent mode and currency mode
+            if (this.currentMode=='agent') {
+                this.currentMode='currency'
+            } else {
+                this.currentMode='agent'
+            }
+        },
+    },
+}
+</script>
+<template>
+    <div class="navMenu">
+        <button @click="returnToMenu()">Return to Menu</button><button v-if="currentMode!='agent'" @click="switchMode()">Agent Editor</button><button v-else @click="switchMode()">Currency Editor</button>
+    </div>
+    <div v-if="typeof(currencyDesc[currencyCategorySelected])=='object' && currentMode=='currency'">
+        <h2>Currency Editor</h2>
+        <label> Currency Category
+            <select id="currencyCategorySelector" v-model="currencyCategorySelected">
+                <option v-for="category in currencyTypes" :key="category" :value="category"> {{category}} </option>
+            </select>
+        </label>
+        <button @click="createNewCurrency()">Create New Blank Currency</button>
+        <br>
+        <br>
+        <div class="gridBox">
+            <div class="scrollie agentBox">
+                <div id="buttonList">
+                    <ul>
+                        <li v-for="currency in Object.keys(currencyDesc[currencyCategorySelected])">
+                            <button @click="selectCurrency(currency)">{{currency}}</button>
+                        </li>
+                    </ul>
+                </div> <!-- Button List -->
+            </div> <!-- scrollie -->
+            <div class="agentData">
+                Currency: {{selectedCurrency}}
+                <input v-model="newCurrencyName" type="text" name="newCurrencyName"> <button @click="renameCurrency(newCurrencyName)">Rename Currency</button> <button @click="duplicateCurrency()">Duplicate Currency</button> <button @click="exportJSONCurrency()">Export Currency</button>
+                <br>
+                Label : <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].label" name="currencyLabel" type="text">
+                <br>
+                Description: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].description" name="currencyDescription" type="text">
+                <br>
+                Source: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].source" name="currencySource" type="text">
+                <br>
+                Unit: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].unit" name="currencyUnit" type="text">
+                <br>
+                Short: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].short" name="currencyShort" type="text">
+                <br>
+                <span v-if="typeof(currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition)=='object'">
+                    Nutrition- <button @click="deleteNutrition()">Delete Nutrition</button> {{currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition}}
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; kcal: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.kcal" name="nutkcal" type="number">
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; water: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.water" name="nutwater" type="number">
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; protein: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.protein" name="nutprotein" type="number">
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; carbohydrates: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.carbohydrate" name="nutcarb" type="number">
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; fat: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.fat" name="nutfat" type="number">
+                </span>
+                <button v-else @click="addNutrition()">Add Nutrition </button>
+                <br>
+                <hr>
+                {{currencyDesc[selectedCurrencyCategory][selectedCurrency]}}
+            </div> <!-- CurrencyBox -->
+        </div> <!-- gridBox -->
+    </div> <!-- vif currency object exists -->
+    <div v-if="currentMode=='agent'">
+        <h2> Agent Editor.  Known Issues: Consistency. Shared Change Memory. Select needs Title Attributes, ul has invalid elements  </h2>
+        <label for="categorySelector">Choose Agent Class:  </label>
+        <select id="categorySelector" v-model="categorySelected">
+            <option v-for="category in agentClasses" :key="category" :value="category"> {{category}} </option>
+        </select>
+        <button @click="createNewAgent()">Create New Blank Agent</button>
+        <br><br>
+        <div id="gridbox" class="gridBox">
+            <div id="agentSelector" class="scrollie agentBox">
+                <h2> Agents ({{categorySelected}}): </h2>
+                <ul>
+                    <li v-for="item in agentsInClass"> <button @click="selectItem(item)">{{item}}</button> </li>
+                </ul>
+            </div> <!-- Agent Selector -->
+            <div v-if="typeof(agentDesc)=='object'" id="agentPresenter" class="agentData scrollie">
+                <h2> {{selectedAgentName}}  <input v-model="newAgentName" name="newAgentName" type="text">  <button @click="renameAgent(newAgentName)">Rename Agent</button> <button @click="duplicateAgent()">Duplicate Agent</button> <button @click="exportJSON()">Export Agent</button></h2>
+                <ul>
+                    <li>Agent Class:
+                        <select id="categoryChanger" v-model="agentDesc[selectedAgentName].agent_class">
+                            <option v-for="category in agentClasses" :key="category" :value="category"> {{category}} </option>
+                        </select>
+                        <label>
+                            Change to custom class:
+                            <input v-model="customClassName" name="customClass" type="text">
+                        </label>
+                        <button @click="setCustomClass">Set Custom Class</button>
+                    </li>
+                    <li>Description: <br>  <textarea v-model="agentDesc[selectedAgentName].description" name="descriptionField" rows="4" cols="100" />
+                    </li>
+                </ul>
+                <h3>Capacity</h3>
+                <ul>
+                    <li v-for="(value, key) in agentDesc[selectedAgentName].capacity">
+                        {{key}}
+                        (Change to:
+                        <input v-model="capacityTypes[key]" name="capType" type="text"> <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
+                        :::::
+                        Quantity:
+                        <input v-model="agentDesc[selectedAgentName].capacity[key]" name="capVal" type="number"> <button @click="removeCapacity(key)">Remove Capacity</button>
+                    </li>
+                    <li>
+                        New Capacity:
+                        <input v-model="newCapacityType" name="newCapType" type="text">
+                        :::::
+                        Quantity:
+                        <input v-model="newCapacityValue" name="newCapVal" type="number"> <button @click="addNewCapacity(newCapacityType, newCapacityValue)">Add Capacity</button>
+                    </li>
+                </ul>
+                <h3>Flows</h3>
+                <h4>In Currencies</h4>
+                <ul> <!-- In currency ul -->
+                    <li v-for="(value, currency) in agentDesc[selectedAgentName].flows.in">{{currency}}
+                        <label>(Change to:
+                            <select v-model="inTypes[currency]" name="changeInFlowCurrency">
+                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                            </select>
+                        </label>
+                        <button @click="changeInType(currency, value, inTypes[currency])">Change</button>)
+                        <button @click="removeInFlow(currency)">Remove</button>
+                        <ul>
+                            <li> Value: <input v-model="agentDesc[selectedAgentName].flows.in[currency].value" name="flowValueFieldIn" type="number">
+                            </li>
+                            <li> flow_rate:
+                                <ul>
+                                    <li>Unit: <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.unit" name="flowInUnit" type="text"></li>
+                                    <li>Time: <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.time" name="flowInTime" type="text"></li>
+                                </ul>
+                            </li>
+                            <li> connections :
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)=='object'">
+                                    (Click to remove)
+                                    <button v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections" @click="removeFlowArrayItem('in', 'connections', currency, connection)">{{connection}}</button>
+                                    <br>
+                                </span>
+                                <input v-model="newConnectionIn" name="connectionNewName" type="text"> <button @click="addFlowArrayItem('in', 'connections', currency, newConnectionIn)">Add new Connection</button>
+                            </li>
+                            <li> weighted:
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)=='object'">
+                                    (Click to remove)
+                                    <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.in[currency].weighted" @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">{{weighted}}</button>
+                                    <br>
+                                </span>
+                                <input v-model="newWeightedIn" name="newWeighted" type="text"> <button @click="addFlowArrayItem('in', 'weighted', currency, newWeightedIn)">Add new Weighted</button>
+                            </li>
+                            <li> deprive:
+                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].deprive)=='object'">
+                                    <button @click="removeDeprive(currency)">Remove Deprive</button>
+                                    <li>Value:  <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.value" name="depriveValue" type="number"></li>
+                                    <li>Unit: <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.unit" name="depriveUnit" type="text"></li>
+                                </ul>
+                                <ul v-else>
+                                    <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">Add Deprive</button>
+                                    <li>Value:  <input v-model="newDepriveValue" name="newDepriveName" type="number"></li>
+                                    <li>Unit: <input v-model="newDepriveUnit" name="newDepriveUnit" type="text"></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li> <!-- NEW FLOW -->
+                        <label>New In Flow:
+                            <select v-model="newInType" name="newInFlowCurrencySelector">
+                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                            </select>
+                        </label>
+                        <button @click="addNewFlow('in', newInType)">Add In Flow Currency</button>
+                    </li>
+                </ul> <!-- In currency ul -->
+                <h4>Out Currencies</h4>
+                <ul> <!-- Out Currency ul -->
+                    <li v-for="(value, currency) in agentDesc[selectedAgentName].flows.out"> {{currency}}
+                        (Change to:
+                        <label>
+                            <select v-model="outTypes[currency]" name="changeOutCurrencySelector">
+                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                            </select>
+                        </label>
+                        <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>)
+                        <button @click="removeOutFlow(currency)">Remove</button>
+                        <ul> <!-- Out currency -->
+                            <li> Value: <input v-model="agentDesc[selectedAgentName].flows.out[currency].value" name="flowValueOut" type="number">
+                            </li>
+                            <li> flow_rate:
+                                <ul>
+                                    <li>Unit: <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.unit" name="flowUnitOut" type="text"></li>
+                                    <li>Time: <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.time" name="flowTimeOut" type="text"></li>
+                                </ul>
+                            </li>
+                            <li> connections:
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)=='object'">
+                                    (Click to remove)
+                                    <button v-for="(connection, index) in agentDesc[selectedAgentName].flows.out[currency].connections" @click="removeFlowArrayItem('out', 'connections', currency, connection)">{{connection}}</button>
+                                    <br>
+                                </span>
+                                <input v-model="newConnectionOut" name="addNewConnectName" type="text"> <button @click="addFlowArrayItem('out', 'connections', currency, newConnectionOut)">Add new Connection</button>
+                            </li>
+                            <li> weighted:
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)=='object'">
+                                    (Click to remove)
+                                    <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted" @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">{{weighted}}</button>
+                                    <br>
+                                </span>
+                                <input v-model="newWeightedOut" name="addNewWeightedNameOut" type="text"> <button @click="addFlowArrayItem('out', 'weighted', currency, newWeightedOut)">Add new Weighted</button>
+                            </li>
+                            <li> requires :
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)=='object'">
+                                    (Click to remove)
+                                    <button v-for="(requires, index) in agentDesc[selectedAgentName].flows.out[currency].requires" @click="removeFlowArrayItem('out', 'requires', currency, requires)">{{requires}}</button>
+                                    <br>
+                                </span>
+                                <label> (Currency)
+                                    <select v-model="newRequires" name="requiresCurrencySelector">
+                                        <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                    </select>
+                                </label>
+                                <button @click="addFlowArrayItem('out', 'requires', currency, newRequires)">Add new Requires</button>
+                            </li>
+                            <li> growth:
+                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].growth)=='object'">
+                                    <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].growth">
+                                        {{kind}}
+                                        (Change to:
+                                        <input v-model="kindTypes[kind]" name="kindTypeName" type="text"> <button @click="changeGrowthType(kind, pattern, kindTypes[kind], currency)">Change</button>)
+                                        <button @click="removeGrowth(currency, kind)">Remove Growth</button>
+                                        :::::
+                                        <ul>
+                                            <li> Type: <input v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type" name="growthTypeField" type="text">
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                                <label>
+                                    New Growth Kind:
+                                    <input v-model="newGrowthKind" name="newGrowthKind" type="text">
+                                </label>
+                                <ul>
+                                    <li> Type: <input v-model="newGrowthPattern" name="newGrowthPatternTypeField" type="text">
+                                    </li>
+                                </ul>
+                                <button @click="addGrowth(currency, newGrowthKind, newGrowthPattern)">Add Growth</button>
+                            </li>
+                            <li> criteria:
+                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].criteria)=='object'">
+                                    <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].criteria">
+                                        {{kind}}
+                                        (
+                                        <label>Change to:
+                                            <input v-model="kindTypes[kind]" name="kindTypeCriteria" type="text">
+                                        </label>
+                                        <button @click="changeCriterionType(kind, pattern, kindTypes[kind], currency)">Change</button>)
+                                        <button @click="removeCriterion(currency, kind)">Remove Criterion</button>
+                                        :::::
+                                        <ul>
+                                            <li> Limit:
+                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].limit" name="criteriaLimitField">
+                                                    <option value="&lt;"> &lt; </option>
+                                                    <option value="&equals;"> =   </option>
+                                                    <option value="&gt;"> &gt; </option>
+                                                </select>
+                                            </li>
+                                            <li> Value:
+                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].value" name="criteriaValueField">
+                                                    <option :value="true">True</option>
+                                                    <option :value="false">False</option>
+                                                </select>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                                <ul>
+                                    <li>
+                                        <input v-model="newCriterionName" name="newCriterionNameField" type="text">
+                                        <button @click="addNewCriterion(currency, newCriterionName, newCriterionValue, newCriterionLimit)">Add new Criterion</button>
+                                        <ul>
+                                            <li> Limit:
+                                                <select v-model="newCriterionLimit" name="criterionLimitFieldNew">
+                                                    <option value="&lt;"> &lt; </option>
+                                                    <option value="&equals;"> =   </option>
+                                                    <option value="&gt;"> &gt; </option>
+                                                </select>
+                                            </li>
+                                            <li> Value:
+                                                <select v-model="newCriterionValue" name="criterionValueFieldNew">
+                                                    <option :value="true">True</option>
+                                                    <option :value="false">False</option>
+                                                </select>
+                                            </li>
+                                        </ul>
+                                    </li> <!-- Criterion Item -->
+                                </ul>
+                            </li> <!-- Criteria -->
+                        </ul> <!-- Out currency -->
+                    </li>
+                    <li> <!-- NEW FLOW -->
+                        <label>
+                            New Out Flow: (Change to:
+                            <select v-model="newOutType" name="outFlowCurrencySelector">
+                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                            </select>
+                        </label>
+                        <button @click="addNewFlow('out',newOutType)">Add Out Flow Currency</button>
+                    </li>
+                </ul> <!-- Out Currency ul -->
+                <h3>Thresholds</h3>
+                <h4> Currencies </h4>
+                <ul>
+                    <li v-for="(value, currency) in agentDesc[selectedAgentName].thresholds">
+                        {{currency}}
+                        (
+                        <label>Change to:
+                            <select v-model="thresholdTypes[currency]" name="changeThresholdCurrency">
+                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                            </select>
+                        </label>
+                        <button @click="changeThresholdType(currency, value, thresholdTypes[currency])">Change</button>)
+                        <button @click="removeThreshold(currency)">Remove Currency</button>
+                        <ul>
+                            <li> Path:  <input v-model="agentDesc[selectedAgentName].thresholds[currency].path" name="thesholdPathField" type="text">
+                            </li>
+                            <li> Limit:
+                                <select v-model="agentDesc[selectedAgentName].thresholds[currency].limit" name="thresholdLimitField">
+                                    <option value="&lt;"> &lt; </option>
+                                    <option value="&equals;"> =   </option>
+                                    <option value="&gt;"> &gt; </option>
+                                </select>
+                            </li>
+                            <li> Value: <input v-model="agentDesc[selectedAgentName].thresholds[currency].value" name="thesholdValueField" type="number">
+                            </li>
+                            <li> Connnections: <input v-model="agentDesc[selectedAgentName].thresholds[currency].connections" name="connectionsThresholdsField" type="text">
+                            </li>
+                        </ul>
+                    </li>
+                    <li> <!-- NEW FLOW -->
+                        <label>New Currency:
+                            <select v-model="newThresholdCurrency" name="newThresholdCurrency" selected="o2">
+                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                            </select>
+                        </label>
+                        <ul>
+                            <li> Path:  <input v-model="newThresholdPath" name="newThresholdPathField" type="text">
+                            </li>
+                            <li> Limit:
+                                <select v-model="newThresholdLimit" name="thresholdLimitFieldNew">
+                                    <option value="&lt;"> &lt; </option>
+                                    <option value="&equals;"> =   </option>
+                                    <option value="&gt;"> &gt; </option>
+                                </select>
+                            </li>
+                            <li> Value: <input v-model="newThresholdValue" type="number" name="newThresholdsValueField">
+                            </li>
+                            <li> Connnections: <input v-model="newThresholdConnections" type="text" name="newThresholdConnectionsField">
+                            </li>
+                        </ul>
+                        <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath, newThresholdLimit, newThresholdValue, newThresholdConnections)">Add Threshold Currency</button>
+                    </li> <!-- NEW FLOW -->
+                </ul>
+                <h3>Properties</h3>
+                <ul>
+                    <li v-for="(attributes, property) in agentDesc[selectedAgentName].properties">
+                        {{property}} (Change to:
+                        <input v-model="propertyNames[property]" name="propertyName" type="text">
+                        <button @click="changePropertyName(property, attributes, propertyNames[property])">Change</button>)
+                        <button @click="removeProperty(property)">Remove</button>
+                        <ul> <!-- Property Attributes -->
+                            <li>
+                                value: {{attributes.value}}
+                                <input v-model="changedPropVal" name="propVal" type="text">
+                                <button @click="changePropertyValue(property, changedPropVal)">Change Value</button>
+                            </li>
+                            <li>unit: <input v-model="agentDesc[selectedAgentName].properties[property].unit" name="propUnit" type="text" col="15"> </li>
+                        </ul>
+                    </li>
+                    <li>
+                        New Property:
+                        <input v-model="newPropertyName" name="newPropertyName" type="text">
+                        <ul> <!-- Property Attributes -->
+                            <li>value: <input v-model="newPropVal" name="propValField" type="text"> </li>
+                            <li>unit: <input v-model="newPropUnit" name="propUnitField" type="text"> </li>
+                            <button @click="addNewProperty(newPropertyName, newPropVal, newPropUnit)"> Add New Property </button>
+                        </ul>
+                    </li>
+                </ul>
+                <h2> Agent Details </h2>
+                <hr>
+                <ul>
+                    <li v-for="(value, key) in agentDesc[selectedAgentName]"> <b>{{key}}</b> :
+                        <i v-if="typeof(value)!='object'">{{value}}</i>
+                        <ul v-else>
+                            <li v-for="(subvalue, subkey) in agentDesc[selectedAgentName][key]">
+                                <b>{{subkey}}</b> :
+                                <i v-if="typeof(subvalue)!='object'">{{subvalue}}</i>
+                                <ul v-else>
+                                    <li v-for="(subsubvalue, subsubkey) in agentDesc[selectedAgentName][key][subkey]">
+                                        <b>{{subsubkey}}</b> :
+                                        <i v-if="typeof(subsubvalue)!='object'">{{subsubvalue}}</i>
+                                        <ul v-else>
+                                            <li v-for="(subsubsubvalue, subsubsubkey) in agentDesc[selectedAgentName][key][subkey][subsubkey]">
+                                                <b>{{subsubsubkey}}</b> :  {{subsubsubvalue}}
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </div> <!-- gridBox -->
+    </div> <!-- agentMode div -->
+</template>
+<style scoped>
+.navMenu{
+    display: flex;
+    justify-content: center;
+}
+.gridBox{
+            display: grid;
+            grid-template-columns: 1fr 5fr; /* Three columns each 100px wide */
+            grid-gap: 10px; /* Gap between grid items */
+}
+.scrollie {
+    overflow-y: scroll !important;
+    /* FireFox */
+    scrollbar-width: auto;
+    scrollbar-color: grey black;
+    height: 400px;
+    width: 100%;
+}
+.agentBox {
+    padding: 3px;
+    border: solid grey 2px;
+}
+.agentData {
+    padding: 5px;
+    border: solid red 5px;
+    color: black;
+    background-color: grey;
+}
+</style>
diff --git a/src/components/ace/index.js b/src/components/ace/index.js
new file mode 100644
index 000000000..4998abbcb
--- /dev/null
+++ b/src/components/ace/index.js
@@ -0,0 +1 @@
+export {default as ACE} from './ACE.vue'
diff --git a/src/components/configuration/Greenhouse.vue b/src/components/configuration/Greenhouse.vue
index c2c30fb5a..1fc5add29 100644
--- a/src/components/configuration/Greenhouse.vue
+++ b/src/components/configuration/Greenhouse.vue
@@ -181,7 +181,7 @@ export default {
             //const indexType = plantSpecies[index].type
 
             let selectedValues = plantSpecies.splice(index,1)
-            return false;
+            return false
         },
 
         // This method should have returned a list of all plant values
@@ -231,16 +231,12 @@ export default {
         // of similar route calls. Simply to reduce the callback hell look.
         retrievePlantSpecies() {
             axios.defaults.withCredentials = true
-
             const params = {agent_class: 'plants'}
-
             axios.get('/get_agent_types', {params}).then(response => {
                 if (response.status === 200) {
                     response.data.forEach(item => {
                         const {name} = item
-                        this.plantValue.push(name)
-                        // console.log(this.formatPlantName(name))
-                        this.formatPlantName(name)
+                        this.listPlant(name)
                     })
                 }
             }).catch(error => {
@@ -249,6 +245,18 @@ export default {
                     console.log('Plant retrieval error')
                 }
             })
+            // Get plants from local data
+            let customAgents = localStorage.getItem('customAgents')
+            if (customAgents == null) return
+            customAgents = JSON.parse(customAgents)
+            for (const name in customAgents) {
+                if (customAgents[name].agent_class == 'plants') this.listPlant(name)
+            }
+        },
+        listPlant(name) {
+            // Add the plant to the menu list
+            this.plantValue.push(name)
+            this.formatPlantName(name)
         },
         updateAndValidate() {
             // validate and update greenhouse type
diff --git a/src/components/entry/Menu.vue b/src/components/entry/Menu.vue
index 357da8d42..e6c947aec 100644
--- a/src/components/entry/Menu.vue
+++ b/src/components/entry/Menu.vue
@@ -12,8 +12,8 @@
                 <button form="login-form" class="btn-normal btn-biosphere2" @click="toConfiguration('b2')">BIOSPHERE 2</button>
                 <button form="login-form" class="btn-normal" @click="uploadSimData">LOAD SIMULATION DATA</button>
                 <button class="btn-normal" @click="showSurvey">LEAVE FEEDBACK</button>
-                <!-- <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
-                        @click="toAce">AGENT EDITOR</button> -->
+                <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
+                        @click="toAce">AGENT EDITOR</button>
                 <button :class="{'hidden': !showLiveMode}" form="login-form" class="btn-normal"
                         @click="toLiveDashboard">LIVE MODE</button>
                 <input id="simDataInputFile" ref="simDataInputFile" type="file"
@@ -61,7 +61,7 @@ export default {
     },
     data() {
         return {
-            // showAgentEditor: false,
+            showAgentEditor: false,
             showLiveMode: false,
         }
     },
@@ -81,10 +81,10 @@ export default {
             this.$router.push('configuration')
         },
         // Send the user to the ACE Configuration Editor
-        // toAce() {
-        //     this.activeConfigType = 'Custom'
-        //     this.$router.push('ace')
-        // },
+        toAce() {
+            this.activeConfigType = 'Custom'
+            this.$router.push('ace')
+        },
         /** Routes the user to the live Dashboard. The minimum configuration required for any
          *  Dashboard instance to open without error is the min_step_num and a duration object
          *  composed of an 'amount' key-value pairing. Both of these values can be 0, but the
@@ -142,10 +142,10 @@ export default {
         },
         // Adapted from '../views/DashboardView.vue'
         keyListener(e) {
-            // if (e.ctrlKey && e.key === 'a') {
-            //     e.preventDefault()  // prevent event from propagating to browser
-            //     this.showAgentEditor = true
-            // }
+            if (e.ctrlKey && e.key === 'a') {
+                e.preventDefault()  // prevent event from propagating to browser
+                this.showAgentEditor = true
+            }
             if (e.ctrlKey && e.key === 'k') {
                 e.preventDefault()  // prevent event from propagating to browser
                 this.surveyWasPrompted = true  // do not prompt with survey in kiosk mode
diff --git a/src/router.js b/src/router.js
index 0a8f04631..24c26a096 100644
--- a/src/router.js
+++ b/src/router.js
@@ -36,13 +36,11 @@ export default createRouter({
             name: 'menuconfig',
             component: () => import('@/components/entry/MenuConfig.vue'),
         },
-        /*
         {
             path: '/ace',
-            name: 'ace',
-            conponent: () => import('@/views/AceView.vue'),
+            name: 'ACE',
+            component: () => import('@/components/ace/ACE.vue'),
         },
-        */
         {
             path: '/configuration',
             name: 'configuration',
diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
index a78f46453..c82810c8a 100644
--- a/src/views/ConfigurationView.vue
+++ b/src/views/ConfigurationView.vue
@@ -257,7 +257,9 @@ export default {
             // load cached simdata if the user selects a preset
             const presets = this.getPresets(this.simLocation)
             const preset_name = this.$refs.presets.$refs.preset_dropdown.value
+            let preset_in_use = false
             if (preset_name in presets) {
+                preset_in_use = true
                 let data
                 try {
                     if (this.simLocation === 'b2') {
@@ -296,6 +298,27 @@ export default {
                 // the store will also validate it and throw errors if it's invalid
                 configParams = {step_num: this.getTotalMissionHours,
                                 game_config: this.getFormattedConfiguration}
+                // Inject custom agents
+                if (!preset_in_use) {
+                    let customAgents = localStorage.getItem('customAgents')
+                    let customCurrencies = localStorage.getItem('customCurrencies')
+                    if ((customAgents != null) && (Object.keys(customAgents).length>0)) {
+                        customAgents = JSON.parse(customAgents)
+                        // Add custom agents to config
+                        for (const name in customAgents) {
+                            configParams.game_config[name]=customAgents[name]
+                        }
+                    }
+                    if ((customCurrencies != null) && (Object.keys(customCurrencies).length>0)) {
+                        customCurrencies = JSON.parse(customCurrencies)
+                        configParams.game_config.currencies = {}
+                        // Add custom currencies to config
+                        for (const name in customCurrencies) {
+                            configParams.game_config.currencies[name]=customCurrencies[name]
+                        }
+                    }
+                    console.log(configParams)
+                }
             } catch (err_msg) {
                 this.alert(err_msg)
                 return  // abort if there are any errors

From 6d4aac8f65c7f52cbae7b55c69acf520178dbb92 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 02:14:52 -0700
Subject: [PATCH 02/63] Reduced line length for ACE script for linter

---
 src/components/ace/ACE.vue | 109 +++++++++++++++++++++----------------
 1 file changed, 61 insertions(+), 48 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index a292f07ca..fe19812d6 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -92,9 +92,6 @@ export default {
         },
     },
     async created() {
-        // this.setAgentClass()
-        this.removeSurplusAgentData()
-
         // Get agents from simoc-abm
         try {
             this.agentDesc = await this.getAgentDesc()
@@ -137,7 +134,10 @@ export default {
                 //  console.log(currency)
                 //  this.currencyDesc[category][currency] = localStorageCurrencies[currency]
                 // }
-                if (typeof (this.currencyDesc.custom)=='object' && (localStorageCurrencies!=null)) {
+                if (
+                    typeof (this.currencyDesc.custom)=='object' 
+                    && (localStorageCurrencies!=null)
+                ) {
                     // Object exists
                 } else {
                     this.currencyDesc.custom = {}
@@ -190,17 +190,6 @@ export default {
                 return null
             }
         },
-        setAgentClass() {
-            this.agentDesc[this.selectedAgentName].agent_class= 'plants'
-        },
-        removeSurplusAgentData() {
-            /* Probably we should actually duplicate the agentDesc to create one just for the display of data that is trimmed down,
-               Since copied/modified agents will want to still contain necessary fields that don't need to be shown */
-            for (const key in this.agentDesc) {
-                /* amount = 1 is for all, so it doesn't need to be there*/
-                // delete this.agentDesc[key].amount
-            }
-        },
         submitAgent() {
             this.agentDesc[this.categorySelected][this.selectedAgentName] = {'data': 0}
         },
@@ -242,7 +231,8 @@ export default {
             // Delete the specific kind of growth
             delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind]
             // Remove the growth object if there are no growths in it.
-            if (Object.keys(this.agentDesc[this.selectedAgentName].flows.out[currency].growth).length == 0) {
+            const growth = this.agentDesc[this.selectedAgentName].flows.out[currency].growth
+            if (Object.keys(growth).length == 0) {
                 delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth
             }
         },
@@ -250,19 +240,25 @@ export default {
             // Delete the specific kind of criterion
             delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[kind]
             // Remove the criteria object if there are no growths in it.
-            if (Object.keys(this.agentDesc[this.selectedAgentName].flows.out[currency].criteria).length == 0) {
+            const criteria = this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
+            if (Object.keys(criteria).length == 0) {
                 delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
             }
         },
         removeFlowArrayItem(direction, type, currency, name) {
-            const index = this.agentDesc[this.selectedAgentName].flows[direction][currency][type].indexOf(name)
+            const agent = this.agentDesc[this.selectedAgentName]
+            const index = ( 
+                agent.flows[direction][currency][type].indexOf(name)
+            )
             // Delete the connection by its array index number
             if (index !== -1) {
-                this.agentDesc[this.selectedAgentName].flows[direction][currency][type].splice(index, 1)
+                const currencyArray = agent.flows[direction][currency][type]
+                currencyArray.splice(index, 1)
             }
             // Remove the flow array array if it is empty
-            if ((this.agentDesc[this.selectedAgentName].flows[direction][currency][type]).length == 0) {
-                delete this.agentDesc[this.selectedAgentName].flows[direction][currency][type]
+            const flowarray = agent.flows[direction][currency][type]
+            if ((flowarray).length == 0) {
+                delete agent.flows[direction][currency][type]
             }
         },
         removeDeprive(currency) {
@@ -299,7 +295,9 @@ export default {
             // Make sure that if it is a plant, the corresponding currency is renamed also
             if (this.categorySelected=='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED, (i.e. rice has rice as outflow, and has rice as a biomass connection)!')
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED, \
+                            (i.e. rice has rice as outflow, \
+                            and has rice as a biomass connection)!')
             }
             // Export the plant currency
         },
@@ -314,7 +312,8 @@ export default {
                 }
             }
             // Rename Object
-            const thisCurrency = this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]
+            const thisCurrency = (
+                this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency] )
             this.currencyDesc[this.currencyCategorySelected][newName] = thisCurrency
             delete this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]
             this.selectedCurrency = newName
@@ -377,48 +376,56 @@ export default {
             if (newPropVal=='true') { newPropVal = true }
             if (newPropVal=='false') { newPropVal = false }
             if (newPropUnit != '') {
-                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = {'value': newPropVal, 'unit': newPropUnit}
+                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = ( 
+                    {'value': newPropVal, 'unit': newPropUnit}
+                )
             } else { // Make sure not to add unit if it is not specified
-                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = {'value': newPropVal}
+                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
+                    {'value': newPropVal} 
+                )
             }
         },
         addFlowArrayItem(direction, type, currency, name) {
+            const agent = this.agentDesc[this.selectedAgentName]
             // Add the array if it doesn't exist
-            if (!(typeof (this.agentDesc[this.selectedAgentName].flows[direction][currency][type])=='object')) {
-                this.agentDesc[this.selectedAgentName].flows[direction][currency][type] = []
+            if (!(typeof (agent.flows[direction][currency][type])=='object')) {
+                agent.flows[direction][currency][type] = []
             }
             // Add the item to the array
-            (this.agentDesc[this.selectedAgentName].flows[direction][currency][type]).push(name)
+            (agent.flows[direction][currency][type]).push(name)
         },
         addNewCriterion(currency, name, value, limit) {
+            const agent = this.agentDesc[this.selectedAgentName]
             // Add Criteria if it doesn't exist
-            if (!(typeof (this.agentDesc[this.selectedAgentName].flows.out[currency].criteria)=='object')) {
-                this.agentDesc[this.selectedAgentName].flows.out[currency].criteria = {}
+            if (!(typeof (agent.flows.out[currency].criteria)=='object')) {
+                agent.flows.out[currency].criteria = {}
             }
-            if (!(typeof (this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name])=='object')) {
-                this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name] = {}
+            if (!(typeof (agent.flows.out[currency].criteria[name])=='object')) {
+                agent.flows.out[currency].criteria[name] = {}
             }
             // Add the criterion
-            this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name].value=value
-            this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[name].limit=limit
+           agent.flows.out[currency].criteria[name].value=value
+           agent.flows.out[currency].criteria[name].limit=limit
         },
         addNutrition() {
-            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition = {}
-            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.kcal = 0
-            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.water = 0
-            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.protein = 0
-            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.carbohydrate = 0
-            this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition.fat = 0
+            const currency = this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency]
+            currency.nutrition = {}
+            currency.nutrition.kcal = 0
+            currency.nutrition.water = 0
+            currency.nutrition.protein = 0
+            currency.nutrition.carbohydrate = 0
+            currency.nutrition.fat = 0
         },
         deleteNutrition() {
             delete this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition
         },
         addGrowth(currency, kind, pattern) {
-            if (!(typeof (this.agentDesc[this.selectedAgentName].flows.out[currency].growth)=='object')) {
-                this.agentDesc[this.selectedAgentName].flows.out[currency].growth = {}
+            const agent = this.agentDesc[this.selectedAgentName]
+            if (!(typeof (agent.flows.out[currency].growth)=='object')) {
+                agent.flows.out[currency].growth = {}
             }
-            this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind] = {}
-            this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind].type=pattern
+            agent.flows.out[currency].growth[kind] = {}
+            agent.flows.out[currency].growth[kind].type=pattern
         },
         addDeprive(currency, value, unit) {
             this.agentDesc[this.selectedAgentName].flows.in[currency].deprive = {}
@@ -468,14 +475,18 @@ export default {
             // Make sure to duplicate correspoding plant currency
             if (this.categorySelected=='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED, AND NEW PLANT CURRENCIES ARE MADE TO MATCH (i.e. rice has rice as outflow, and has rice as a biomass connection)!')
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED, \
+                    AND NEW PLANT CURRENCIES ARE MADE TO MATCH (i.e. rice has rice as outflow, \
+                    and has rice as a biomass connection)!')
             }
         },
         duplicateCurrency() {
             const currencyNumber = Object.keys(this.currencyDesc).length + 1
             const newCurrencyName=`${this.selectedCurrency}_${currencyNumber}`
             // Deep Copy the original object
-            const copiedObject = JSON.parse(JSON.stringify(this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]))
+            const currencyCatSelected = this.currencyDesc[this.currencyCategorySelected]
+            const originalObject = currencyCatSelected[this.selectedCurrency]
+            const copiedObject = JSON.parse(JSON.stringify(originalObject))
             this.currencyDesc[this.currencyCategorySelected][newCurrencyName]=copiedObject
             // Switch to the copied agent
             this.selectedCurrency=newCurrencyName
@@ -497,7 +508,8 @@ export default {
             // If plant, export currency for it, too
             if (this.categorySelected=='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT EXPORTED. MAKE SURE FLOW CURRENCIES ARE UPDATED, AND NEW PLANT CURRENCIES EXPORTED TOO!')
+                console.log('PLANT EXPORTED. MAKE SURE FLOW CURRENCIES ARE UPDATED, AND NEW PLANT \
+                    CURRENCIES EXPORTED TOO!')
             }
         },
         exportJSONCurrency() {
@@ -513,7 +525,8 @@ export default {
             /*
             // In simoc abm, it expects custom currencies to have a "category" param instead of being filed by category
             // So instead of creating custom currency category, just file them under "custom"
-            if(typeof (currentCustomCurrencies[this.currencyCategorySelected])=='object' && (currentCustomCurrencies!=null)) {
+            if(typeof (currentCustomCurrencies[this.currencyCategorySelected])=='object' &&
+                (currentCustomCurrencies!=null)) {
             } else {
                 currentCustomCurrencies[this.currencyCategorySelected] = {}
             }

From 41844d96b5ead6cb8f0cf12af861fd6c4ded83f2 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 02:37:42 -0700
Subject: [PATCH 03/63] Shorten Vue Template line length for Linter

---
 src/components/ace/ACE.vue | 266 ++++++++++++++++++++++++++++---------
 1 file changed, 205 insertions(+), 61 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index fe19812d6..971721b4d 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -557,7 +557,9 @@ export default {
 </script>
 <template>
     <div class="navMenu">
-        <button @click="returnToMenu()">Return to Menu</button><button v-if="currentMode!='agent'" @click="switchMode()">Agent Editor</button><button v-else @click="switchMode()">Currency Editor</button>
+        <button @click="returnToMenu()">Return to Menu</button>
+        <button v-if="currentMode!='agent'" @click="switchMode()">Agent Editor</button>
+        <button v-else @click="switchMode()">Currency Editor</button>
     </div>
     <div v-if="typeof(currencyDesc[currencyCategorySelected])=='object' && currentMode=='currency'">
         <h2>Currency Editor</h2>
@@ -581,25 +583,60 @@ export default {
             </div> <!-- scrollie -->
             <div class="agentData">
                 Currency: {{selectedCurrency}}
-                <input v-model="newCurrencyName" type="text" name="newCurrencyName"> <button @click="renameCurrency(newCurrencyName)">Rename Currency</button> <button @click="duplicateCurrency()">Duplicate Currency</button> <button @click="exportJSONCurrency()">Export Currency</button>
+                <input v-model="newCurrencyName" type="text" name="newCurrencyName"> 
+                <button @click="renameCurrency(newCurrencyName)">Rename Currency</button> 
+                <button @click="duplicateCurrency()">Duplicate Currency</button> 
+                <button @click="exportJSONCurrency()">Export Currency</button>
                 <br>
-                Label : <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].label" name="currencyLabel" type="text">
+                Label : 
+                <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].label" name="currencyLabel"
+                    type="text"
+                >
                 <br>
-                Description: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].description" name="currencyDescription" type="text">
+                Description: 
+                <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].description"
+                    name="currencyDescription" type="text"
+                >
                 <br>
-                Source: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].source" name="currencySource" type="text">
+                Source: 
+                <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].source"
+                    name="currencySource" type="text"
+                >
                 <br>
-                Unit: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].unit" name="currencyUnit" type="text">
+                Unit: 
+                <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].unit"
+                    name="currencyUnit" type="text"
+                >
                 <br>
-                Short: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].short" name="currencyShort" type="text">
+                Short: 
+                <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].short"
+                    name="currencyShort" type="text"
+                >
                 <br>
                 <span v-if="typeof(currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition)=='object'">
-                    Nutrition- <button @click="deleteNutrition()">Delete Nutrition</button> {{currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition}}
-                    <br> &nbsp; &nbsp; &nbsp; &nbsp; kcal: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.kcal" name="nutkcal" type="number">
-                    <br> &nbsp; &nbsp; &nbsp; &nbsp; water: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.water" name="nutwater" type="number">
-                    <br> &nbsp; &nbsp; &nbsp; &nbsp; protein: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.protein" name="nutprotein" type="number">
-                    <br> &nbsp; &nbsp; &nbsp; &nbsp; carbohydrates: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.carbohydrate" name="nutcarb" type="number">
-                    <br> &nbsp; &nbsp; &nbsp; &nbsp; fat: <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.fat" name="nutfat" type="number">
+                    Nutrition- 
+                    <button @click="deleteNutrition()">Delete Nutrition</button>
+                    {{currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition}}
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; kcal:
+                    <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.kcal"
+                        name="nutkcal" type="number"
+                    >
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; water:
+                    <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.water"
+                        name="nutwater" type="number"
+                    >
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; protein:
+                    <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.protein"
+                        name="nutprotein" type="number"
+                    >
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; carbohydrates:
+                    <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.carbohydrate"
+                        name="nutcarb" type="number"
+                    >
+                    <br> &nbsp; &nbsp; &nbsp; &nbsp; fat:
+                    <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.fat"
+                        name="nutfat" type="number"
+                    >
                 </span>
                 <button v-else @click="addNutrition()">Add Nutrition </button>
                 <br>
@@ -609,10 +646,13 @@ export default {
         </div> <!-- gridBox -->
     </div> <!-- vif currency object exists -->
     <div v-if="currentMode=='agent'">
-        <h2> Agent Editor.  Known Issues: Consistency. Shared Change Memory. Select needs Title Attributes, ul has invalid elements  </h2>
+        <h2> Agent Editor.  Known Issues: Consistency. 
+        Shared Change Memory. Select needs Title Attributes, ul has invalid elements </h2>
         <label for="categorySelector">Choose Agent Class:  </label>
         <select id="categorySelector" v-model="categorySelected">
-            <option v-for="category in agentClasses" :key="category" :value="category"> {{category}} </option>
+            <option v-for="category in agentClasses" :key="category" :value="category"> 
+                {{category}}
+            </option>
         </select>
         <button @click="createNewAgent()">Create New Blank Agent</button>
         <br><br>
@@ -620,15 +660,23 @@ export default {
             <div id="agentSelector" class="scrollie agentBox">
                 <h2> Agents ({{categorySelected}}): </h2>
                 <ul>
-                    <li v-for="item in agentsInClass"> <button @click="selectItem(item)">{{item}}</button> </li>
+                    <li v-for="item in agentsInClass"> 
+                        <button @click="selectItem(item)">{{item}}</button>
+                    </li>
                 </ul>
             </div> <!-- Agent Selector -->
             <div v-if="typeof(agentDesc)=='object'" id="agentPresenter" class="agentData scrollie">
-                <h2> {{selectedAgentName}}  <input v-model="newAgentName" name="newAgentName" type="text">  <button @click="renameAgent(newAgentName)">Rename Agent</button> <button @click="duplicateAgent()">Duplicate Agent</button> <button @click="exportJSON()">Export Agent</button></h2>
+                <h2> {{selectedAgentName}}  <input v-model="newAgentName" name="newAgentName" type="text">
+                    <button @click="renameAgent(newAgentName)">Rename Agent</button>
+                    <button @click="duplicateAgent()">Duplicate Agent</button>
+                    <button @click="exportJSON()">Export Agent</button>
+                </h2>
                 <ul>
                     <li>Agent Class:
                         <select id="categoryChanger" v-model="agentDesc[selectedAgentName].agent_class">
-                            <option v-for="category in agentClasses" :key="category" :value="category"> {{category}} </option>
+                            <option v-for="category in agentClasses" :key="category" :value="category">
+                                {{category}}
+                            </option>
                         </select>
                         <label>
                             Change to custom class:
@@ -636,7 +684,9 @@ export default {
                         </label>
                         <button @click="setCustomClass">Set Custom Class</button>
                     </li>
-                    <li>Description: <br>  <textarea v-model="agentDesc[selectedAgentName].description" name="descriptionField" rows="4" cols="100" />
+                    <li>Description: <br> 
+                        <textarea v-model="agentDesc[selectedAgentName].description" 
+                            name="descriptionField" rows="4" cols="100" />
                     </li>
                 </ul>
                 <h3>Capacity</h3>
@@ -644,17 +694,20 @@ export default {
                     <li v-for="(value, key) in agentDesc[selectedAgentName].capacity">
                         {{key}}
                         (Change to:
-                        <input v-model="capacityTypes[key]" name="capType" type="text"> <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
+                        <input v-model="capacityTypes[key]" name="capType" type="text">
+                        <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
                         :::::
                         Quantity:
-                        <input v-model="agentDesc[selectedAgentName].capacity[key]" name="capVal" type="number"> <button @click="removeCapacity(key)">Remove Capacity</button>
+                        <input v-model="agentDesc[selectedAgentName].capacity[key]" name="capVal" type="number">
+                        <button @click="removeCapacity(key)">Remove Capacity</button>
                     </li>
                     <li>
                         New Capacity:
                         <input v-model="newCapacityType" name="newCapType" type="text">
                         :::::
                         Quantity:
-                        <input v-model="newCapacityValue" name="newCapVal" type="number"> <button @click="addNewCapacity(newCapacityType, newCapacityValue)">Add Capacity</button>
+                        <input v-model="newCapacityValue" name="newCapVal" type="number">
+                        <button @click="addNewCapacity(newCapacityType, newCapacityValue)">Add Capacity</button>
                     </li>
                 </ul>
                 <h3>Flows</h3>
@@ -669,40 +722,75 @@ export default {
                         <button @click="changeInType(currency, value, inTypes[currency])">Change</button>)
                         <button @click="removeInFlow(currency)">Remove</button>
                         <ul>
-                            <li> Value: <input v-model="agentDesc[selectedAgentName].flows.in[currency].value" name="flowValueFieldIn" type="number">
+                            <li> Value: 
+                                <input v-model="agentDesc[selectedAgentName].flows.in[currency].value"
+                                    name="flowValueFieldIn" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
-                                    <li>Unit: <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.unit" name="flowInUnit" type="text"></li>
-                                    <li>Time: <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.time" name="flowInTime" type="text"></li>
+                                    <li>Unit: 
+                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.unit"
+                                            name="flowInUnit" type="text">
+                                    </li>
+                                    <li>Time: 
+                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.time"
+                                            name="flowInTime" type="text">
+                                    </li>
                                 </ul>
                             </li>
                             <li> connections :
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)=='object'">
+                                <span 
+                                    v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)=='object'">
                                     (Click to remove)
-                                    <button v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections" @click="removeFlowArrayItem('in', 'connections', currency, connection)">{{connection}}</button>
+                                    <button 
+                                        v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections"
+                                        @click="removeFlowArrayItem('in', 'connections', currency, connection)">
+                                            {{connection}}
+                                    </button>
                                     <br>
                                 </span>
-                                <input v-model="newConnectionIn" name="connectionNewName" type="text"> <button @click="addFlowArrayItem('in', 'connections', currency, newConnectionIn)">Add new Connection</button>
+                                <input v-model="newConnectionIn" name="connectionNewName" type="text">
+                                <button @click="addFlowArrayItem('in', 'connections', currency, newConnectionIn)">
+                                    Add new Connection
+                                </button>
                             </li>
                             <li> weighted:
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)=='object'">
                                     (Click to remove)
-                                    <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.in[currency].weighted" @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">{{weighted}}</button>
+                                    <button
+                                        v-for="(weighted, index) in agentDesc[selectedAgentName].flows.in[currency].weighted"
+                                        @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
+                                            {{weighted}}
+                                    </button>
                                     <br>
                                 </span>
-                                <input v-model="newWeightedIn" name="newWeighted" type="text"> <button @click="addFlowArrayItem('in', 'weighted', currency, newWeightedIn)">Add new Weighted</button>
+                                <input v-model="newWeightedIn" name="newWeighted" type="text">
+                                <button @click="addFlowArrayItem('in', 'weighted', currency, newWeightedIn)">
+                                    Add new Weighted
+                                </button>
                             </li>
                             <li> deprive:
                                 <ul v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].deprive)=='object'">
                                     <button @click="removeDeprive(currency)">Remove Deprive</button>
-                                    <li>Value:  <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.value" name="depriveValue" type="number"></li>
-                                    <li>Unit: <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.unit" name="depriveUnit" type="text"></li>
+                                    <li>Value:
+                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.value"
+                                            name="depriveValue" type="number">
+                                    </li>
+                                    <li>Unit:
+                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.unit"
+                                            name="depriveUnit" type="text">
+                                    </li>
                                 </ul>
                                 <ul v-else>
-                                    <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">Add Deprive</button>
-                                    <li>Value:  <input v-model="newDepriveValue" name="newDepriveName" type="number"></li>
-                                    <li>Unit: <input v-model="newDepriveUnit" name="newDepriveUnit" type="text"></li>
+                                    <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">
+                                        Add Deprive
+                                    </button>
+                                    <li>Value:  
+                                        <input v-model="newDepriveValue" name="newDepriveName" type="number">
+                                    </li>
+                                    <li>Unit: 
+                                        <input v-model="newDepriveUnit" name="newDepriveUnit" type="text">
+                                    </li>
                                 </ul>
                             </li>
                         </ul>
@@ -728,34 +816,55 @@ export default {
                         <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>)
                         <button @click="removeOutFlow(currency)">Remove</button>
                         <ul> <!-- Out currency -->
-                            <li> Value: <input v-model="agentDesc[selectedAgentName].flows.out[currency].value" name="flowValueOut" type="number">
+                            <li> Value: <input v-model="agentDesc[selectedAgentName].flows.out[currency].value"
+                                name="flowValueOut" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
-                                    <li>Unit: <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.unit" name="flowUnitOut" type="text"></li>
-                                    <li>Time: <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.time" name="flowTimeOut" type="text"></li>
+                                    <li>Unit: 
+                                        <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.unit"
+                                            name="flowUnitOut" type="text">
+                                    </li>
+                                    <li>Time: 
+                                        <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.time"
+                                            name="flowTimeOut" type="text">
+                                    </li>
                                 </ul>
                             </li>
                             <li> connections:
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)=='object'">
                                     (Click to remove)
-                                    <button v-for="(connection, index) in agentDesc[selectedAgentName].flows.out[currency].connections" @click="removeFlowArrayItem('out', 'connections', currency, connection)">{{connection}}</button>
+                                    <button 
+                                        v-for="(connection, index) in agentDesc[selectedAgentName].flows.out[currency].connections"
+                                        @click="removeFlowArrayItem('out', 'connections', currency, connection)">
+                                            {{connection}}
+                                    </button>
                                     <br>
                                 </span>
-                                <input v-model="newConnectionOut" name="addNewConnectName" type="text"> <button @click="addFlowArrayItem('out', 'connections', currency, newConnectionOut)">Add new Connection</button>
+                                <input v-model="newConnectionOut" name="addNewConnectName" type="text">
+                                <button @click="addFlowArrayItem('out', 'connections', currency, newConnectionOut)">
+                                    Add new Connection
+                                </button>
                             </li>
                             <li> weighted:
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)=='object'">
                                     (Click to remove)
-                                    <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted" @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">{{weighted}}</button>
+                                    <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted"
+                                        @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">{{weighted}}</button>
                                     <br>
                                 </span>
-                                <input v-model="newWeightedOut" name="addNewWeightedNameOut" type="text"> <button @click="addFlowArrayItem('out', 'weighted', currency, newWeightedOut)">Add new Weighted</button>
+                                <input v-model="newWeightedOut" name="addNewWeightedNameOut" type="text">
+                                <button @click="addFlowArrayItem('out', 'weighted', currency, newWeightedOut)">
+                                    Add new Weighted
+                                </button>
                             </li>
                             <li> requires :
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)=='object'">
                                     (Click to remove)
-                                    <button v-for="(requires, index) in agentDesc[selectedAgentName].flows.out[currency].requires" @click="removeFlowArrayItem('out', 'requires', currency, requires)">{{requires}}</button>
+                                    <button v-for="(requires, index) in agentDesc[selectedAgentName].flows.out[currency].requires"
+                                        @click="removeFlowArrayItem('out', 'requires', currency, requires)">
+                                        {{requires}}
+                                    </button>
                                     <br>
                                 </span>
                                 <label> (Currency)
@@ -763,18 +872,26 @@ export default {
                                         <option v-for="item in currencyList" :value="item"> {{item}} </option>
                                     </select>
                                 </label>
-                                <button @click="addFlowArrayItem('out', 'requires', currency, newRequires)">Add new Requires</button>
+                                <button @click="addFlowArrayItem('out', 'requires', currency, newRequires)">
+                                    Add new Requires
+                                </button>
                             </li>
                             <li> growth:
                                 <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].growth)=='object'">
                                     <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].growth">
                                         {{kind}}
                                         (Change to:
-                                        <input v-model="kindTypes[kind]" name="kindTypeName" type="text"> <button @click="changeGrowthType(kind, pattern, kindTypes[kind], currency)">Change</button>)
+                                        <input v-model="kindTypes[kind]" name="kindTypeName" type="text">
+                                        <button @click="changeGrowthType(kind, pattern, kindTypes[kind], currency)">
+                                            Change
+                                        </button>)
                                         <button @click="removeGrowth(currency, kind)">Remove Growth</button>
                                         :::::
                                         <ul>
-                                            <li> Type: <input v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type" name="growthTypeField" type="text">
+                                            <li> Type:
+                                            <input 
+                                                v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type"
+                                                name="growthTypeField" type="text">
                                             </li>
                                         </ul>
                                     </li>
@@ -784,10 +901,13 @@ export default {
                                     <input v-model="newGrowthKind" name="newGrowthKind" type="text">
                                 </label>
                                 <ul>
-                                    <li> Type: <input v-model="newGrowthPattern" name="newGrowthPatternTypeField" type="text">
+                                    <li> Type:
+                                    <input v-model="newGrowthPattern" name="newGrowthPatternTypeField" type="text">
                                     </li>
                                 </ul>
-                                <button @click="addGrowth(currency, newGrowthKind, newGrowthPattern)">Add Growth</button>
+                                <button @click="addGrowth(currency, newGrowthKind, newGrowthPattern)">
+                                    Add Growth
+                                </button>
                             </li>
                             <li> criteria:
                                 <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].criteria)=='object'">
@@ -797,19 +917,23 @@ export default {
                                         <label>Change to:
                                             <input v-model="kindTypes[kind]" name="kindTypeCriteria" type="text">
                                         </label>
-                                        <button @click="changeCriterionType(kind, pattern, kindTypes[kind], currency)">Change</button>)
+                                        <button @click="changeCriterionType(kind, pattern, kindTypes[kind], currency)">
+                                            Change
+                                        </button>)
                                         <button @click="removeCriterion(currency, kind)">Remove Criterion</button>
                                         :::::
                                         <ul>
                                             <li> Limit:
-                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].limit" name="criteriaLimitField">
+                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].limit"
+                                                    name="criteriaLimitField">
                                                     <option value="&lt;"> &lt; </option>
                                                     <option value="&equals;"> =   </option>
                                                     <option value="&gt;"> &gt; </option>
                                                 </select>
                                             </li>
                                             <li> Value:
-                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].value" name="criteriaValueField">
+                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].value"
+                                                    name="criteriaValueField">
                                                     <option :value="true">True</option>
                                                     <option :value="false">False</option>
                                                 </select>
@@ -820,7 +944,9 @@ export default {
                                 <ul>
                                     <li>
                                         <input v-model="newCriterionName" name="newCriterionNameField" type="text">
-                                        <button @click="addNewCriterion(currency, newCriterionName, newCriterionValue, newCriterionLimit)">Add new Criterion</button>
+                                        <button @click="addNewCriterion(currency, newCriterionName, newCriterionValue, newCriterionLimit)">
+                                            Add new Criterion
+                                        </button>
                                         <ul>
                                             <li> Limit:
                                                 <select v-model="newCriterionLimit" name="criterionLimitFieldNew">
@@ -865,18 +991,25 @@ export default {
                         <button @click="changeThresholdType(currency, value, thresholdTypes[currency])">Change</button>)
                         <button @click="removeThreshold(currency)">Remove Currency</button>
                         <ul>
-                            <li> Path:  <input v-model="agentDesc[selectedAgentName].thresholds[currency].path" name="thesholdPathField" type="text">
+                            <li> Path:  
+                                <input v-model="agentDesc[selectedAgentName].thresholds[currency].path"
+                                    name="thesholdPathField" type="text">
                             </li>
                             <li> Limit:
-                                <select v-model="agentDesc[selectedAgentName].thresholds[currency].limit" name="thresholdLimitField">
+                                <select v-model="agentDesc[selectedAgentName].thresholds[currency].limit"
+                                    name="thresholdLimitField">
                                     <option value="&lt;"> &lt; </option>
                                     <option value="&equals;"> =   </option>
                                     <option value="&gt;"> &gt; </option>
                                 </select>
                             </li>
-                            <li> Value: <input v-model="agentDesc[selectedAgentName].thresholds[currency].value" name="thesholdValueField" type="number">
+                            <li> Value: 
+                                <input v-model="agentDesc[selectedAgentName].thresholds[currency].value"
+                                    name="thesholdValueField" type="number">
                             </li>
-                            <li> Connnections: <input v-model="agentDesc[selectedAgentName].thresholds[currency].connections" name="connectionsThresholdsField" type="text">
+                            <li> Connnections:
+                                <input v-model="agentDesc[selectedAgentName].thresholds[currency].connections"
+                                    name="connectionsThresholdsField" type="text">
                             </li>
                         </ul>
                     </li>
@@ -898,10 +1031,14 @@ export default {
                             </li>
                             <li> Value: <input v-model="newThresholdValue" type="number" name="newThresholdsValueField">
                             </li>
-                            <li> Connnections: <input v-model="newThresholdConnections" type="text" name="newThresholdConnectionsField">
+                            <li> Connnections:
+                                <input v-model="newThresholdConnections" type="text"
+                                    name="newThresholdConnectionsField">
                             </li>
                         </ul>
-                        <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath, newThresholdLimit, newThresholdValue, newThresholdConnections)">Add Threshold Currency</button>
+                        <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath, newThresholdLimit, newThresholdValue, newThresholdConnections)">
+                            Add Threshold Currency
+                        </button>
                     </li> <!-- NEW FLOW -->
                 </ul>
                 <h3>Properties</h3>
@@ -909,7 +1046,9 @@ export default {
                     <li v-for="(attributes, property) in agentDesc[selectedAgentName].properties">
                         {{property}} (Change to:
                         <input v-model="propertyNames[property]" name="propertyName" type="text">
-                        <button @click="changePropertyName(property, attributes, propertyNames[property])">Change</button>)
+                        <button @click="changePropertyName(property, attributes, propertyNames[property])">
+                            Change
+                        </button>)
                         <button @click="removeProperty(property)">Remove</button>
                         <ul> <!-- Property Attributes -->
                             <li>
@@ -917,7 +1056,10 @@ export default {
                                 <input v-model="changedPropVal" name="propVal" type="text">
                                 <button @click="changePropertyValue(property, changedPropVal)">Change Value</button>
                             </li>
-                            <li>unit: <input v-model="agentDesc[selectedAgentName].properties[property].unit" name="propUnit" type="text" col="15"> </li>
+                            <li>unit:
+                                <input v-model="agentDesc[selectedAgentName].properties[property].unit"
+                                    name="propUnit" type="text" col="15">
+                            </li>
                         </ul>
                     </li>
                     <li>
@@ -926,7 +1068,9 @@ export default {
                         <ul> <!-- Property Attributes -->
                             <li>value: <input v-model="newPropVal" name="propValField" type="text"> </li>
                             <li>unit: <input v-model="newPropUnit" name="propUnitField" type="text"> </li>
-                            <button @click="addNewProperty(newPropertyName, newPropVal, newPropUnit)"> Add New Property </button>
+                            <button @click="addNewProperty(newPropertyName, newPropVal, newPropUnit)">
+                                Add New Property 
+                            </button>
                         </ul>
                     </li>
                 </ul>

From 8bfdc443cd71ac8d23a2b93541d801c27efd21ce Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 02:47:51 -0700
Subject: [PATCH 04/63] Vue Template Linter Fixes

---
 src/components/ace/ACE.vue | 74 +++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 42 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 971721b4d..629939c2c 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -135,7 +135,7 @@ export default {
                 //  this.currencyDesc[category][currency] = localStorageCurrencies[currency]
                 // }
                 if (
-                    typeof (this.currencyDesc.custom)=='object' 
+                    typeof (this.currencyDesc.custom)=='object'
                     && (localStorageCurrencies!=null)
                 ) {
                     // Object exists
@@ -247,7 +247,7 @@ export default {
         },
         removeFlowArrayItem(direction, type, currency, name) {
             const agent = this.agentDesc[this.selectedAgentName]
-            const index = ( 
+            const index = (
                 agent.flows[direction][currency][type].indexOf(name)
             )
             // Delete the connection by its array index number
@@ -266,7 +266,7 @@ export default {
         },
         changePropertyValue(property, newPropVal) {
             /* See if it is a number, if it is, store it as one, otherwise as a string */
-            if (!Number.isNaN(Number(newPropVal))) { 
+            if (!Number.isNaN(Number(newPropVal))) {
             /* This is to ensure the data sent to the back is not a string in the JSON */
             /* When it is supposed to be a number e.g. { a: 1 } vs { a: '1' } */
             /* Works with !isNaN(newPropVal), but doesn't pass lint*/
@@ -404,8 +404,8 @@ export default {
                 agent.flows.out[currency].criteria[name] = {}
             }
             // Add the criterion
-           agent.flows.out[currency].criteria[name].value=value
-           agent.flows.out[currency].criteria[name].limit=limit
+            agent.flows.out[currency].criteria[name].value=value
+            agent.flows.out[currency].criteria[name].limit=limit
         },
         addNutrition() {
             const currency = this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency]
@@ -583,35 +583,30 @@ export default {
             </div> <!-- scrollie -->
             <div class="agentData">
                 Currency: {{selectedCurrency}}
-                <input v-model="newCurrencyName" type="text" name="newCurrencyName"> 
-                <button @click="renameCurrency(newCurrencyName)">Rename Currency</button> 
-                <button @click="duplicateCurrency()">Duplicate Currency</button> 
+                <input v-model="newCurrencyName" type="text" name="newCurrencyName">
+                <button @click="renameCurrency(newCurrencyName)">Rename Currency</button>
+                <button @click="duplicateCurrency()">Duplicate Currency</button>
                 <button @click="exportJSONCurrency()">Export Currency</button>
                 <br>
-                Label : 
+                Label :
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].label" name="currencyLabel"
-                    type="text"
-                >
+                       type="text">
                 <br>
-                Description: 
+                Description:
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].description"
-                    name="currencyDescription" type="text"
-                >
+                       name="currencyDescription" type="text">
                 <br>
-                Source: 
+                Source:
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].source"
-                    name="currencySource" type="text"
-                >
+                       name="currencySource" type="text">
                 <br>
-                Unit: 
+                Unit:
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].unit"
-                    name="currencyUnit" type="text"
-                >
+                       name="currencyUnit" type="text">
                 <br>
                 Short: 
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].short"
-                    name="currencyShort" type="text"
-                >
+                       name="currencyShort" type="text">
                 <br>
                 <span v-if="typeof(currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition)=='object'">
                     Nutrition- 
@@ -619,24 +614,19 @@ export default {
                     {{currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition}}
                     <br> &nbsp; &nbsp; &nbsp; &nbsp; kcal:
                     <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.kcal"
-                        name="nutkcal" type="number"
-                    >
+                           name="nutkcal" type="number">
                     <br> &nbsp; &nbsp; &nbsp; &nbsp; water:
                     <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.water"
-                        name="nutwater" type="number"
-                    >
+                           name="nutwater" type="number">
                     <br> &nbsp; &nbsp; &nbsp; &nbsp; protein:
                     <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.protein"
-                        name="nutprotein" type="number"
-                    >
+                           name="nutprotein" type="number">
                     <br> &nbsp; &nbsp; &nbsp; &nbsp; carbohydrates:
                     <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.carbohydrate"
-                        name="nutcarb" type="number"
-                    >
+                           name="nutcarb" type="number">
                     <br> &nbsp; &nbsp; &nbsp; &nbsp; fat:
                     <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition.fat"
-                        name="nutfat" type="number"
-                    >
+                           name="nutfat" type="number">
                 </span>
                 <button v-else @click="addNutrition()">Add Nutrition </button>
                 <br>
@@ -724,17 +714,17 @@ export default {
                         <ul>
                             <li> Value: 
                                 <input v-model="agentDesc[selectedAgentName].flows.in[currency].value"
-                                    name="flowValueFieldIn" type="number">
+                                       name="flowValueFieldIn" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
                                     <li>Unit: 
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.unit"
-                                            name="flowInUnit" type="text">
+                                               name="flowInUnit" type="text">
                                     </li>
                                     <li>Time: 
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.time"
-                                            name="flowInTime" type="text">
+                                               name="flowInTime" type="text">
                                     </li>
                                 </ul>
                             </li>
@@ -774,7 +764,7 @@ export default {
                                     <button @click="removeDeprive(currency)">Remove Deprive</button>
                                     <li>Value:
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.value"
-                                            name="depriveValue" type="number">
+                                               name="depriveValue" type="number">
                                     </li>
                                     <li>Unit:
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.unit"
@@ -925,7 +915,7 @@ export default {
                                         <ul>
                                             <li> Limit:
                                                 <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].limit"
-                                                    name="criteriaLimitField">
+                                                        name="criteriaLimitField">
                                                     <option value="&lt;"> &lt; </option>
                                                     <option value="&equals;"> =   </option>
                                                     <option value="&gt;"> &gt; </option>
@@ -933,7 +923,7 @@ export default {
                                             </li>
                                             <li> Value:
                                                 <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].value"
-                                                    name="criteriaValueField">
+                                                        name="criteriaValueField">
                                                     <option :value="true">True</option>
                                                     <option :value="false">False</option>
                                                 </select>
@@ -993,11 +983,11 @@ export default {
                         <ul>
                             <li> Path:  
                                 <input v-model="agentDesc[selectedAgentName].thresholds[currency].path"
-                                    name="thesholdPathField" type="text">
+                                       name="thesholdPathField" type="text">
                             </li>
                             <li> Limit:
                                 <select v-model="agentDesc[selectedAgentName].thresholds[currency].limit"
-                                    name="thresholdLimitField">
+                                        name="thresholdLimitField">
                                     <option value="&lt;"> &lt; </option>
                                     <option value="&equals;"> =   </option>
                                     <option value="&gt;"> &gt; </option>
@@ -1005,11 +995,11 @@ export default {
                             </li>
                             <li> Value: 
                                 <input v-model="agentDesc[selectedAgentName].thresholds[currency].value"
-                                    name="thesholdValueField" type="number">
+                                       name="thesholdValueField" type="number">
                             </li>
                             <li> Connnections:
                                 <input v-model="agentDesc[selectedAgentName].thresholds[currency].connections"
-                                    name="connectionsThresholdsField" type="text">
+                                       name="connectionsThresholdsField" type="text">
                             </li>
                         </ul>
                     </li>

From 8c9be401607e287361024fd0ebd10994e66401d7 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 02:52:40 -0700
Subject: [PATCH 05/63] Vue Template Linter Indent and Trailing Space Remove

---
 src/components/ace/ACE.vue | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 629939c2c..be7843e5a 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -376,12 +376,12 @@ export default {
             if (newPropVal=='true') { newPropVal = true }
             if (newPropVal=='false') { newPropVal = false }
             if (newPropUnit != '') {
-                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = ( 
+                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
                     {'value': newPropVal, 'unit': newPropUnit}
                 )
             } else { // Make sure not to add unit if it is not specified
                 this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
-                    {'value': newPropVal} 
+                    {'value': newPropVal}
                 )
             }
         },
@@ -604,12 +604,12 @@ export default {
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].unit"
                        name="currencyUnit" type="text">
                 <br>
-                Short: 
+                Short:
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].short"
                        name="currencyShort" type="text">
                 <br>
                 <span v-if="typeof(currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition)=='object'">
-                    Nutrition- 
+                    Nutrition-
                     <button @click="deleteNutrition()">Delete Nutrition</button>
                     {{currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition}}
                     <br> &nbsp; &nbsp; &nbsp; &nbsp; kcal:
@@ -636,8 +636,8 @@ export default {
         </div> <!-- gridBox -->
     </div> <!-- vif currency object exists -->
     <div v-if="currentMode=='agent'">
-        <h2> Agent Editor.  Known Issues: Consistency. 
-        Shared Change Memory. Select needs Title Attributes, ul has invalid elements </h2>
+        <h2> Agent Editor.  Known Issues: Consistency.
+            Shared Change Memory. Select needs Title Attributes, ul has invalid elements </h2>
         <label for="categorySelector">Choose Agent Class:  </label>
         <select id="categorySelector" v-model="categorySelected">
             <option v-for="category in agentClasses" :key="category" :value="category"> 
@@ -650,7 +650,7 @@ export default {
             <div id="agentSelector" class="scrollie agentBox">
                 <h2> Agents ({{categorySelected}}): </h2>
                 <ul>
-                    <li v-for="item in agentsInClass"> 
+                    <li v-for="item in agentsInClass">
                         <button @click="selectItem(item)">{{item}}</button>
                     </li>
                 </ul>
@@ -674,9 +674,9 @@ export default {
                         </label>
                         <button @click="setCustomClass">Set Custom Class</button>
                     </li>
-                    <li>Description: <br> 
-                        <textarea v-model="agentDesc[selectedAgentName].description" 
-                            name="descriptionField" rows="4" cols="100" />
+                    <li>Description: <br>
+                        <textarea v-model="agentDesc[selectedAgentName].description"
+                                  name="descriptionField" rows="4" cols="100" />
                     </li>
                 </ul>
                 <h3>Capacity</h3>
@@ -712,24 +712,24 @@ export default {
                         <button @click="changeInType(currency, value, inTypes[currency])">Change</button>)
                         <button @click="removeInFlow(currency)">Remove</button>
                         <ul>
-                            <li> Value: 
+                            <li> Value:
                                 <input v-model="agentDesc[selectedAgentName].flows.in[currency].value"
                                        name="flowValueFieldIn" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
-                                    <li>Unit: 
+                                    <li>Unit:
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.unit"
                                                name="flowInUnit" type="text">
                                     </li>
-                                    <li>Time: 
+                                    <li>Time:
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.time"
                                                name="flowInTime" type="text">
                                     </li>
                                 </ul>
                             </li>
                             <li> connections :
-                                <span 
+                                <span
                                     v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)=='object'">
                                     (Click to remove)
                                     <button 
@@ -1023,7 +1023,7 @@ export default {
                             </li>
                             <li> Connnections:
                                 <input v-model="newThresholdConnections" type="text"
-                                    name="newThresholdConnectionsField">
+                                       name="newThresholdConnectionsField">
                             </li>
                         </ul>
                         <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath, newThresholdLimit, newThresholdValue, newThresholdConnections)">
@@ -1048,7 +1048,7 @@ export default {
                             </li>
                             <li>unit:
                                 <input v-model="agentDesc[selectedAgentName].properties[property].unit"
-                                    name="propUnit" type="text" col="15">
+                                       name="propUnit" type="text" col="15">
                             </li>
                         </ul>
                     </li>

From a09dd5e7930cc3f18d1890db4f1f87bbac9bb480 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 02:59:21 -0700
Subject: [PATCH 06/63] Vue Template Linter Indent and Trailing Space Remove

---
 src/components/ace/ACE.vue | 45 ++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index be7843e5a..8d05366cd 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -735,7 +735,7 @@ export default {
                                     <button 
                                         v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections"
                                         @click="removeFlowArrayItem('in', 'connections', currency, connection)">
-                                            {{connection}}
+                                        {{connection}}
                                     </button>
                                     <br>
                                 </span>
@@ -750,7 +750,7 @@ export default {
                                     <button
                                         v-for="(weighted, index) in agentDesc[selectedAgentName].flows.in[currency].weighted"
                                         @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
-                                            {{weighted}}
+                                        {{weighted}}
                                     </button>
                                     <br>
                                 </span>
@@ -768,7 +768,7 @@ export default {
                                     </li>
                                     <li>Unit:
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.unit"
-                                            name="depriveUnit" type="text">
+                                               name="depriveUnit" type="text">
                                     </li>
                                 </ul>
                                 <ul v-else>
@@ -778,7 +778,7 @@ export default {
                                     <li>Value:  
                                         <input v-model="newDepriveValue" name="newDepriveName" type="number">
                                     </li>
-                                    <li>Unit: 
+                                    <li>Unit:
                                         <input v-model="newDepriveUnit" name="newDepriveUnit" type="text">
                                     </li>
                                 </ul>
@@ -806,28 +806,29 @@ export default {
                         <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>)
                         <button @click="removeOutFlow(currency)">Remove</button>
                         <ul> <!-- Out currency -->
-                            <li> Value: <input v-model="agentDesc[selectedAgentName].flows.out[currency].value"
-                                name="flowValueOut" type="number">
+                            <li> Value: 
+                                <input v-model="agentDesc[selectedAgentName].flows.out[currency].value"
+                                       name="flowValueOut" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
-                                    <li>Unit: 
+                                    <li>Unit:
                                         <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.unit"
-                                            name="flowUnitOut" type="text">
+                                               name="flowUnitOut" type="text">
                                     </li>
-                                    <li>Time: 
+                                    <li>Time:
                                         <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.time"
-                                            name="flowTimeOut" type="text">
+                                               name="flowTimeOut" type="text">
                                     </li>
                                 </ul>
                             </li>
                             <li> connections:
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)=='object'">
                                     (Click to remove)
-                                    <button 
+                                    <button
                                         v-for="(connection, index) in agentDesc[selectedAgentName].flows.out[currency].connections"
                                         @click="removeFlowArrayItem('out', 'connections', currency, connection)">
-                                            {{connection}}
+                                        {{connection}}
                                     </button>
                                     <br>
                                 </span>
@@ -840,7 +841,9 @@ export default {
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)=='object'">
                                     (Click to remove)
                                     <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted"
-                                        @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">{{weighted}}</button>
+                                        @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
+                                        {{weighted}}
+                                    </button>
                                     <br>
                                 </span>
                                 <input v-model="newWeightedOut" name="addNewWeightedNameOut" type="text">
@@ -879,7 +882,7 @@ export default {
                                         :::::
                                         <ul>
                                             <li> Type:
-                                            <input 
+                                            <input
                                                 v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type"
                                                 name="growthTypeField" type="text">
                                             </li>
@@ -917,7 +920,7 @@ export default {
                                                 <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].limit"
                                                         name="criteriaLimitField">
                                                     <option value="&lt;"> &lt; </option>
-                                                    <option value="&equals;"> =   </option>
+                                                    <option value="&equals;"> = </option>
                                                     <option value="&gt;"> &gt; </option>
                                                 </select>
                                             </li>
@@ -941,7 +944,7 @@ export default {
                                             <li> Limit:
                                                 <select v-model="newCriterionLimit" name="criterionLimitFieldNew">
                                                     <option value="&lt;"> &lt; </option>
-                                                    <option value="&equals;"> =   </option>
+                                                    <option value="&equals;"> = </option>
                                                     <option value="&gt;"> &gt; </option>
                                                 </select>
                                             </li>
@@ -981,7 +984,7 @@ export default {
                         <button @click="changeThresholdType(currency, value, thresholdTypes[currency])">Change</button>)
                         <button @click="removeThreshold(currency)">Remove Currency</button>
                         <ul>
-                            <li> Path:  
+                            <li> Path:
                                 <input v-model="agentDesc[selectedAgentName].thresholds[currency].path"
                                        name="thesholdPathField" type="text">
                             </li>
@@ -989,11 +992,11 @@ export default {
                                 <select v-model="agentDesc[selectedAgentName].thresholds[currency].limit"
                                         name="thresholdLimitField">
                                     <option value="&lt;"> &lt; </option>
-                                    <option value="&equals;"> =   </option>
+                                    <option value="&equals;"> = </option>
                                     <option value="&gt;"> &gt; </option>
                                 </select>
                             </li>
-                            <li> Value: 
+                            <li> Value:
                                 <input v-model="agentDesc[selectedAgentName].thresholds[currency].value"
                                        name="thesholdValueField" type="number">
                             </li>
@@ -1015,7 +1018,7 @@ export default {
                             <li> Limit:
                                 <select v-model="newThresholdLimit" name="thresholdLimitFieldNew">
                                     <option value="&lt;"> &lt; </option>
-                                    <option value="&equals;"> =   </option>
+                                    <option value="&equals;"> = </option>
                                     <option value="&gt;"> &gt; </option>
                                 </select>
                             </li>
@@ -1059,7 +1062,7 @@ export default {
                             <li>value: <input v-model="newPropVal" name="propValField" type="text"> </li>
                             <li>unit: <input v-model="newPropUnit" name="propUnitField" type="text"> </li>
                             <button @click="addNewProperty(newPropertyName, newPropVal, newPropUnit)">
-                                Add New Property 
+                                Add New Property
                             </button>
                         </ul>
                     </li>

From 9c2f152d1f40ed0a62f436d15aa40ade60cd07a1 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 03:03:16 -0700
Subject: [PATCH 07/63] Vue Template Linter Indent and Trailing Space Remove

---
 src/components/ace/ACE.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 8d05366cd..b25ce178b 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -640,7 +640,7 @@ export default {
             Shared Change Memory. Select needs Title Attributes, ul has invalid elements </h2>
         <label for="categorySelector">Choose Agent Class:  </label>
         <select id="categorySelector" v-model="categorySelected">
-            <option v-for="category in agentClasses" :key="category" :value="category"> 
+            <option v-for="category in agentClasses" :key="category" :value="category">
                 {{category}}
             </option>
         </select>
@@ -732,7 +732,7 @@ export default {
                                 <span
                                     v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)=='object'">
                                     (Click to remove)
-                                    <button 
+                                    <button
                                         v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections"
                                         @click="removeFlowArrayItem('in', 'connections', currency, connection)">
                                         {{connection}}
@@ -775,7 +775,7 @@ export default {
                                     <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">
                                         Add Deprive
                                     </button>
-                                    <li>Value:  
+                                    <li>Value:
                                         <input v-model="newDepriveValue" name="newDepriveName" type="number">
                                     </li>
                                     <li>Unit:
@@ -806,7 +806,7 @@ export default {
                         <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>)
                         <button @click="removeOutFlow(currency)">Remove</button>
                         <ul> <!-- Out currency -->
-                            <li> Value: 
+                            <li> Value:
                                 <input v-model="agentDesc[selectedAgentName].flows.out[currency].value"
                                        name="flowValueOut" type="number">
                             </li>
@@ -841,8 +841,8 @@ export default {
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)=='object'">
                                     (Click to remove)
                                     <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted"
-                                        @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
-                                        {{weighted}}
+                                            @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
+                                            {{weighted}}
                                     </button>
                                     <br>
                                 </span>
@@ -882,9 +882,9 @@ export default {
                                         :::::
                                         <ul>
                                             <li> Type:
-                                            <input
-                                                v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type"
-                                                name="growthTypeField" type="text">
+                                                <input
+                                                    v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type"
+                                                    name="growthTypeField" type="text">
                                             </li>
                                         </ul>
                                     </li>
@@ -895,7 +895,7 @@ export default {
                                 </label>
                                 <ul>
                                     <li> Type:
-                                    <input v-model="newGrowthPattern" name="newGrowthPatternTypeField" type="text">
+                                        <input v-model="newGrowthPattern" name="newGrowthPatternTypeField" type="text">
                                     </li>
                                 </ul>
                                 <button @click="addGrowth(currency, newGrowthKind, newGrowthPattern)">

From 276ba0fe18a7312d0a86d3f7d9a56cf7c079d357 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 03:07:04 -0700
Subject: [PATCH 08/63] Vue Template Linter Indent and Paren Space

---
 src/components/ace/ACE.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index b25ce178b..edd0a3fad 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -842,7 +842,7 @@ export default {
                                     (Click to remove)
                                     <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted"
                                             @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
-                                            {{weighted}}
+                                        {{weighted}}
                                     </button>
                                     <br>
                                 </span>
@@ -855,7 +855,7 @@ export default {
                                 <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)=='object'">
                                     (Click to remove)
                                     <button v-for="(requires, index) in agentDesc[selectedAgentName].flows.out[currency].requires"
-                                        @click="removeFlowArrayItem('out', 'requires', currency, requires)">
+                                            @click="removeFlowArrayItem('out', 'requires', currency, requires)">
                                         {{requires}}
                                     </button>
                                     <br>

From 36c01a28a34728d688612afd861352665763da06 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 03:22:56 -0700
Subject: [PATCH 09/63] Linter: Remove multiline strings, fix foreach iterator

---
 src/components/ace/ACE.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index edd0a3fad..7c35eb1b3 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -279,7 +279,7 @@ export default {
         },
         renameAgent(newName) {
             // Make Sure Agent Doesn't Already Exist
-            for (name in this.agentDesc) {
+            for (const name in this.agentDesc) {
                 if (name == newName) {
                     const alertString = `${newName} already exists, try another name!`
                     console.log(alertString) // This really needs to be a notification like an alert
@@ -295,9 +295,9 @@ export default {
             // Make sure that if it is a plant, the corresponding currency is renamed also
             if (this.categorySelected=='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED, \
-                            (i.e. rice has rice as outflow, \
-                            and has rice as a biomass connection)!')
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED,' )
+                console.log('(i.e. rice has rice as outflow, ')
+                console.log('and has rice as a biomass connection)!')
             }
             // Export the plant currency
         },
@@ -313,7 +313,7 @@ export default {
             }
             // Rename Object
             const thisCurrency = (
-                this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency] )
+                this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency])
             this.currencyDesc[this.currencyCategorySelected][newName] = thisCurrency
             delete this.currencyDesc[this.currencyCategorySelected][this.selectedCurrency]
             this.selectedCurrency = newName
@@ -475,9 +475,9 @@ export default {
             // Make sure to duplicate correspoding plant currency
             if (this.categorySelected=='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED, \
-                    AND NEW PLANT CURRENCIES ARE MADE TO MATCH (i.e. rice has rice as outflow, \
-                    and has rice as a biomass connection)!')
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED')
+                console.log('AND NEW PLANT CURRENCIES ARE MADE TO MATCH (i.e. rice has rice)')
+                console.log('as outflow, and has rice as a biomass connection)!')
             }
         },
         duplicateCurrency() {
@@ -508,8 +508,8 @@ export default {
             // If plant, export currency for it, too
             if (this.categorySelected=='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT EXPORTED. MAKE SURE FLOW CURRENCIES ARE UPDATED, AND NEW PLANT \
-                    CURRENCIES EXPORTED TOO!')
+                console.log('PLANT EXPORTED. MAKE SURE FLOW CURRENCIES ARE UPDATED, AND NEW PLANT')
+                console.log('CURRENCIES EXPORTED TOO!')
             }
         },
         exportJSONCurrency() {

From 553a78746f09f51178b1a41f71b5fcc4a0395dc3 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 15:48:25 -0700
Subject: [PATCH 10/63] Fix Linter issues Greenhouse.vue

---
 src/components/configuration/Greenhouse.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/configuration/Greenhouse.vue b/src/components/configuration/Greenhouse.vue
index 1fc5add29..0e26aa34a 100644
--- a/src/components/configuration/Greenhouse.vue
+++ b/src/components/configuration/Greenhouse.vue
@@ -249,8 +249,10 @@ export default {
             let customAgents = localStorage.getItem('customAgents')
             if (customAgents == null) return
             customAgents = JSON.parse(customAgents)
-            for (const name in customAgents) {
-                if (customAgents[name].agent_class == 'plants') this.listPlant(name)
+            const agentNames = Object.keys(customAgents)
+            for (let index=0;index<agentNames.length;++index) {
+                const name = (agentNames[index])
+                if (customAgents[name].agent_class === 'plants') this.listPlant(name)
             }
         },
         listPlant(name) {

From 135b8b7cef5f5e1d3f22247a7e8ce2a43efe7ff9 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 15:50:14 -0700
Subject: [PATCH 11/63] Fix Linter space after ; missing, Greenhouse.vue

---
 src/components/configuration/Greenhouse.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/configuration/Greenhouse.vue b/src/components/configuration/Greenhouse.vue
index 0e26aa34a..75c50c587 100644
--- a/src/components/configuration/Greenhouse.vue
+++ b/src/components/configuration/Greenhouse.vue
@@ -250,7 +250,7 @@ export default {
             if (customAgents == null) return
             customAgents = JSON.parse(customAgents)
             const agentNames = Object.keys(customAgents)
-            for (let index=0;index<agentNames.length;++index) {
+            for (let index=0; index<agentNames.length; ++index) {
                 const name = (agentNames[index])
                 if (customAgents[name].agent_class === 'plants') this.listPlant(name)
             }

From 15c2d1839ede1e83449a032b1e5ad19785d5f075 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 15:55:45 -0700
Subject: [PATCH 12/63] Fix linter issues configurationVue (For loop fix)

---
 src/views/ConfigurationView.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
index c82810c8a..f9de0449d 100644
--- a/src/views/ConfigurationView.vue
+++ b/src/views/ConfigurationView.vue
@@ -305,7 +305,9 @@ export default {
                     if ((customAgents != null) && (Object.keys(customAgents).length>0)) {
                         customAgents = JSON.parse(customAgents)
                         // Add custom agents to config
-                        for (const name in customAgents) {
+                        const agentNames = Object.keys(customAgents)
+                        for (let index=0; index<agentNames.length; ++index) {
+                            const name = (agentNames[index])
                             configParams.game_config[name]=customAgents[name]
                         }
                     }
@@ -313,7 +315,9 @@ export default {
                         customCurrencies = JSON.parse(customCurrencies)
                         configParams.game_config.currencies = {}
                         // Add custom currencies to config
-                        for (const name in customCurrencies) {
+                        let currencyNames = Object.keys(customCurrencies)
+                        for (let index=0; index<currencyNames.length; ++index) {
+                            const name = (currencyNames[index])
                             configParams.game_config.currencies[name]=customCurrencies[name]
                         }
                     }

From 4a0e048bb83450c7b7c6534b93fc6cf8187cd86b Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 15:57:25 -0700
Subject: [PATCH 13/63] Fix linter issues configurationVue let->const

---
 src/views/ConfigurationView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
index f9de0449d..fbc07aa82 100644
--- a/src/views/ConfigurationView.vue
+++ b/src/views/ConfigurationView.vue
@@ -315,7 +315,7 @@ export default {
                         customCurrencies = JSON.parse(customCurrencies)
                         configParams.game_config.currencies = {}
                         // Add custom currencies to config
-                        let currencyNames = Object.keys(customCurrencies)
+                        const currencyNames = Object.keys(customCurrencies)
                         for (let index=0; index<currencyNames.length; ++index) {
                             const name = (currencyNames[index])
                             configParams.game_config.currencies[name]=customCurrencies[name]

From 6015b446b8937e3f4418809228f1de3fb53a805c Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:04:59 -0700
Subject: [PATCH 14/63] Linter: change == to ===

---
 src/components/ace/ACE.vue | 80 +++++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 7c35eb1b3..c6afd013b 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -79,7 +79,7 @@ export default {
             const listOfAgents = []
             for (const item in this.agentDesc) {
                 const itemsClass = this.agentDesc[item].agent_class
-                if (itemsClass==this.categorySelected) { listOfAgents.push(item) }
+                if (itemsClass===this.categorySelected) { listOfAgents.push(item) }
             }
             return listOfAgents
         },
@@ -114,7 +114,7 @@ export default {
         getLocalStorageAgents() {
             let localStorageAgents = localStorage.getItem('customAgents')
             localStorageAgents = JSON.parse(localStorageAgents)
-            if (typeof (localStorageAgents)=='object' && (localStorageAgents!=null)) {
+            if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
                 console.log('Agents found in local storage:')
                 for (const agent in (localStorageAgents)) {
                     console.log(agent)
@@ -127,7 +127,7 @@ export default {
         getLocalStorageCurrencies() {
             let localStorageCurrencies = localStorage.getItem('customCurrencies')
             localStorageCurrencies = JSON.parse(localStorageCurrencies)
-            if (typeof (localStorageCurrencies)=='object' && (localStorageCurrencies!=null)) {
+            if (typeof (localStorageCurrencies)==='object' && (localStorageCurrencies!==null)) {
                 // for(let category in localStorageCurrencies)
                 // console.log("Currencies found in local storage:")
                 // for (let currency in category) {
@@ -135,7 +135,7 @@ export default {
                 //  this.currencyDesc[category][currency] = localStorageCurrencies[currency]
                 // }
                 if (
-                    typeof (this.currencyDesc.custom)=='object'
+                    typeof (this.currencyDesc.custom)==='object'
                     && (localStorageCurrencies!=null)
                 ) {
                     // Object exists
@@ -207,7 +207,7 @@ export default {
         removeCapacity(key) {
             delete this.agentDesc[this.selectedAgentName].capacity[key]
             // Remove the capacities object if there are no capacities in it.
-            if ((Object.keys(this.agentDesc[this.selectedAgentName].capacity).length) == 0) {
+            if ((Object.keys(this.agentDesc[this.selectedAgentName].capacity).length) === 0) {
                 delete this.agentDesc[this.selectedAgentName].capacity
             }
         },
@@ -220,7 +220,7 @@ export default {
         removeThreshold(currency) {
             delete this.agentDesc[this.selectedAgentName].thresholds[currency]
             // Remove thresholds object if there are no currencies listed
-            if (Object.keys(this.agentDesc[this.selectedAgentName].thresholds).length == 0) {
+            if (Object.keys(this.agentDesc[this.selectedAgentName].thresholds).length === 0) {
                 delete this.agentDesc[this.selectedAgentName].thresholds
             }
         },
@@ -232,7 +232,7 @@ export default {
             delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind]
             // Remove the growth object if there are no growths in it.
             const growth = this.agentDesc[this.selectedAgentName].flows.out[currency].growth
-            if (Object.keys(growth).length == 0) {
+            if (Object.keys(growth).length === 0) {
                 delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth
             }
         },
@@ -241,7 +241,7 @@ export default {
             delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[kind]
             // Remove the criteria object if there are no growths in it.
             const criteria = this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
-            if (Object.keys(criteria).length == 0) {
+            if (Object.keys(criteria).length === 0) {
                 delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
             }
         },
@@ -257,7 +257,7 @@ export default {
             }
             // Remove the flow array array if it is empty
             const flowarray = agent.flows[direction][currency][type]
-            if ((flowarray).length == 0) {
+            if ((flowarray).length === 0) {
                 delete agent.flows[direction][currency][type]
             }
         },
@@ -273,14 +273,14 @@ export default {
             /* Check this again to verify with this workaround for lint */
                 newPropVal = +newPropVal
             }
-            if (newPropVal=='true') { newPropVal = true }
-            if (newPropVal=='false') { newPropVal = false }
+            if (newPropVal==='true') { newPropVal = true }
+            if (newPropVal==='false') { newPropVal = false }
             this.agentDesc[this.selectedAgentName].properties[property].value=newPropVal
         },
         renameAgent(newName) {
             // Make Sure Agent Doesn't Already Exist
             for (const name in this.agentDesc) {
-                if (name == newName) {
+                if (name === newName) {
                     const alertString = `${newName} already exists, try another name!`
                     console.log(alertString) // This really needs to be a notification like an alert
                     // alert(alertString) // Alert does not pass lint
@@ -293,7 +293,7 @@ export default {
             delete this.agentDesc[this.selectedAgentName]
             this.selectedAgentName = newName
             // Make sure that if it is a plant, the corresponding currency is renamed also
-            if (this.categorySelected=='plants') {
+            if (this.categorySelected==='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
                 console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED,' )
                 console.log('(i.e. rice has rice as outflow, ')
@@ -304,7 +304,7 @@ export default {
         renameCurrency(newName) {
             // Make Sure Currency Doesn't Already Exist
             for (const currency in this.currencyDesc[this.currencyCategorySelected]) {
-                if (currency == newName) {
+                if (currency === newName) {
                     const alertString = `${newName} already exists, try another name!`
                     // This really needs to be a notification like an alert, but alert does not pass lint
                     console.log(alertString)
@@ -349,7 +349,7 @@ export default {
         },
         addNewCapacity(key, value) {
             // Add the capacity object if it doesn't exist
-            if (!(typeof (this.agentDesc[this.selectedAgentName].capacity)=='object')) {
+            if (!(typeof (this.agentDesc[this.selectedAgentName].capacity)==='object')) {
                 this.agentDesc[this.selectedAgentName].capacity = {}
             }
             this.agentDesc[this.selectedAgentName].capacity[key]=value
@@ -360,7 +360,7 @@ export default {
         },
         addNewThreshold(currency, path, limit, value, connections) {
             // Add the threshold object if it doesn't exist
-            if (!(typeof (this.agentDesc[this.selectedAgentName].thresholds)=='object')) {
+            if (!(typeof (this.agentDesc[this.selectedAgentName].thresholds)==='object')) {
                 this.agentDesc[this.selectedAgentName].thresholds = {}
             }
             this.agentDesc[this.selectedAgentName].thresholds[currency]={}
@@ -373,8 +373,8 @@ export default {
             if (!isNaN(newPropVal)) { /* If it is a number, make sure it is a number and not a string */
                 newPropVal = +newPropVal
             }
-            if (newPropVal=='true') { newPropVal = true }
-            if (newPropVal=='false') { newPropVal = false }
+            if (newPropVal==='true') { newPropVal = true }
+            if (newPropVal==='false') { newPropVal = false }
             if (newPropUnit != '') {
                 this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
                     {'value': newPropVal, 'unit': newPropUnit}
@@ -388,7 +388,7 @@ export default {
         addFlowArrayItem(direction, type, currency, name) {
             const agent = this.agentDesc[this.selectedAgentName]
             // Add the array if it doesn't exist
-            if (!(typeof (agent.flows[direction][currency][type])=='object')) {
+            if (!(typeof (agent.flows[direction][currency][type])==='object')) {
                 agent.flows[direction][currency][type] = []
             }
             // Add the item to the array
@@ -397,10 +397,10 @@ export default {
         addNewCriterion(currency, name, value, limit) {
             const agent = this.agentDesc[this.selectedAgentName]
             // Add Criteria if it doesn't exist
-            if (!(typeof (agent.flows.out[currency].criteria)=='object')) {
+            if (!(typeof (agent.flows.out[currency].criteria)==='object')) {
                 agent.flows.out[currency].criteria = {}
             }
-            if (!(typeof (agent.flows.out[currency].criteria[name])=='object')) {
+            if (!(typeof (agent.flows.out[currency].criteria[name])==='object')) {
                 agent.flows.out[currency].criteria[name] = {}
             }
             // Add the criterion
@@ -421,7 +421,7 @@ export default {
         },
         addGrowth(currency, kind, pattern) {
             const agent = this.agentDesc[this.selectedAgentName]
-            if (!(typeof (agent.flows.out[currency].growth)=='object')) {
+            if (!(typeof (agent.flows.out[currency].growth)==='object')) {
                 agent.flows.out[currency].growth = {}
             }
             agent.flows.out[currency].growth[kind] = {}
@@ -473,7 +473,7 @@ export default {
             // Switch to the copied agent
             this.selectedAgentName=newAgentName
             // Make sure to duplicate correspoding plant currency
-            if (this.categorySelected=='plants') {
+            if (this.categorySelected==='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
                 console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED')
                 console.log('AND NEW PLANT CURRENCIES ARE MADE TO MATCH (i.e. rice has rice)')
@@ -498,7 +498,7 @@ export default {
             this.customAgents[agentName] = this.agentDesc[this.selectedAgentName]
             let currentCustomAgents=localStorage.getItem('customAgents')
             currentCustomAgents=JSON.parse(currentCustomAgents)
-            if (typeof (currentCustomAgents)=='object' && (currentCustomAgents!=null)) {
+            if (typeof (currentCustomAgents)==='object' && (currentCustomAgents!==null)) {
                 currentCustomAgents[agentName] = this.customAgents[agentName]
             } else {
                 currentCustomAgents = {}
@@ -506,7 +506,7 @@ export default {
             }
             localStorage.setItem('customAgents', JSON.stringify(currentCustomAgents))
             // If plant, export currency for it, too
-            if (this.categorySelected=='plants') {
+            if (this.categorySelected==='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
                 console.log('PLANT EXPORTED. MAKE SURE FLOW CURRENCIES ARE UPDATED, AND NEW PLANT')
                 console.log('CURRENCIES EXPORTED TOO!')
@@ -517,7 +517,7 @@ export default {
             let currentCustomCurrencies = localStorage.getItem('customCurrencies')
             currentCustomCurrencies = JSON.parse(currentCustomCurrencies)
             // Check if the custom currency object exists
-            if (typeof (currentCustomCurrencies)=='object' && (currentCustomCurrencies!=null)) {
+            if (typeof (currentCustomCurrencies)==='object' && (currentCustomCurrencies!==null)) {
             } else { // Create the currency object
                 currentCustomCurrencies = {}
             }
@@ -534,7 +534,7 @@ export default {
             let category = this.currencyCategorySelected
             this.customCurrencies[currencyName] = this.currencyDesc[category][currencyName]
             // Assign category for export
-            if (category=='custom') {
+            if (category==='custom') {
                 category = this.currencyDesc.custom[currencyName].category
             } else {
                 this.customCurrencies[currencyName].category = category // this.currencyCategorySelected
@@ -546,7 +546,7 @@ export default {
             this.$router.push('menu')
         },
         switchMode() { // Function to swap between agent mode and currency mode
-            if (this.currentMode=='agent') {
+            if (this.currentMode==='agent') {
                 this.currentMode='currency'
             } else {
                 this.currentMode='agent'
@@ -561,7 +561,7 @@ export default {
         <button v-if="currentMode!='agent'" @click="switchMode()">Agent Editor</button>
         <button v-else @click="switchMode()">Currency Editor</button>
     </div>
-    <div v-if="typeof(currencyDesc[currencyCategorySelected])=='object' && currentMode=='currency'">
+    <div v-if="typeof(currencyDesc[currencyCategorySelected])==='object' && currentMode==='currency'">
         <h2>Currency Editor</h2>
         <label> Currency Category
             <select id="currencyCategorySelector" v-model="currencyCategorySelected">
@@ -608,7 +608,7 @@ export default {
                 <input v-model="currencyDesc[selectedCurrencyCategory][selectedCurrency].short"
                        name="currencyShort" type="text">
                 <br>
-                <span v-if="typeof(currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition)=='object'">
+                <span v-if="typeof(currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition)==='object'">
                     Nutrition-
                     <button @click="deleteNutrition()">Delete Nutrition</button>
                     {{currencyDesc[selectedCurrencyCategory][selectedCurrency].nutrition}}
@@ -635,7 +635,7 @@ export default {
             </div> <!-- CurrencyBox -->
         </div> <!-- gridBox -->
     </div> <!-- vif currency object exists -->
-    <div v-if="currentMode=='agent'">
+    <div v-if="currentMode==='agent'">
         <h2> Agent Editor.  Known Issues: Consistency.
             Shared Change Memory. Select needs Title Attributes, ul has invalid elements </h2>
         <label for="categorySelector">Choose Agent Class:  </label>
@@ -655,7 +655,7 @@ export default {
                     </li>
                 </ul>
             </div> <!-- Agent Selector -->
-            <div v-if="typeof(agentDesc)=='object'" id="agentPresenter" class="agentData scrollie">
+            <div v-if="typeof(agentDesc)==='object'" id="agentPresenter" class="agentData scrollie">
                 <h2> {{selectedAgentName}}  <input v-model="newAgentName" name="newAgentName" type="text">
                     <button @click="renameAgent(newAgentName)">Rename Agent</button>
                     <button @click="duplicateAgent()">Duplicate Agent</button>
@@ -730,7 +730,7 @@ export default {
                             </li>
                             <li> connections :
                                 <span
-                                    v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)=='object'">
+                                    v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)==='object'">
                                     (Click to remove)
                                     <button
                                         v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections"
@@ -745,7 +745,7 @@ export default {
                                 </button>
                             </li>
                             <li> weighted:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)=='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)==='object'">
                                     (Click to remove)
                                     <button
                                         v-for="(weighted, index) in agentDesc[selectedAgentName].flows.in[currency].weighted"
@@ -760,7 +760,7 @@ export default {
                                 </button>
                             </li>
                             <li> deprive:
-                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].deprive)=='object'">
+                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].deprive)==='object'">
                                     <button @click="removeDeprive(currency)">Remove Deprive</button>
                                     <li>Value:
                                         <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.value"
@@ -823,7 +823,7 @@ export default {
                                 </ul>
                             </li>
                             <li> connections:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)=='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)==='object'">
                                     (Click to remove)
                                     <button
                                         v-for="(connection, index) in agentDesc[selectedAgentName].flows.out[currency].connections"
@@ -838,7 +838,7 @@ export default {
                                 </button>
                             </li>
                             <li> weighted:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)=='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)==='object'">
                                     (Click to remove)
                                     <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted"
                                             @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
@@ -852,7 +852,7 @@ export default {
                                 </button>
                             </li>
                             <li> requires :
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)=='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)==='object'">
                                     (Click to remove)
                                     <button v-for="(requires, index) in agentDesc[selectedAgentName].flows.out[currency].requires"
                                             @click="removeFlowArrayItem('out', 'requires', currency, requires)">
@@ -870,7 +870,7 @@ export default {
                                 </button>
                             </li>
                             <li> growth:
-                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].growth)=='object'">
+                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].growth)==='object'">
                                     <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].growth">
                                         {{kind}}
                                         (Change to:
@@ -903,7 +903,7 @@ export default {
                                 </button>
                             </li>
                             <li> criteria:
-                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].criteria)=='object'">
+                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].criteria)==='object'">
                                     <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].criteria">
                                         {{kind}}
                                         (

From 267dbfbb04f43780acffcb2d43b44df5926ffc67 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:08:03 -0700
Subject: [PATCH 15/63] Linter: change != to !==

---
 src/components/ace/ACE.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index c6afd013b..b664ac4d7 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -375,7 +375,7 @@ export default {
             }
             if (newPropVal==='true') { newPropVal = true }
             if (newPropVal==='false') { newPropVal = false }
-            if (newPropUnit != '') {
+            if (newPropUnit !== '') {
                 this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
                     {'value': newPropVal, 'unit': newPropUnit}
                 )

From 29f655f1e68790d53aad1e38d918aaeeb7eabd78 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:21:12 -0700
Subject: [PATCH 16/63] Linter: remove for-each loop for  currencyType,
 classType

---
 src/components/ace/ACE.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index b664ac4d7..7d023c309 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -60,8 +60,9 @@ export default {
         currencyTypes() {
             const listOfTypes = []
             /* Determine list of type */
-            for (const key in this.currencyDesc) {
-                const currencyType = key
+            const keys = Object.keys(this.currencyDesc)
+            for (let index=0; index<keys.length; ++index) {
+                const currencyType = keys[index]
                 if (!listOfTypes.includes(currencyType)) listOfTypes.push(currencyType)
             }
             return listOfTypes
@@ -69,8 +70,10 @@ export default {
         agentClasses() {
             const listOfClasses = []
             /* Determine list of agent_class */
-            for (const key in this.agentDesc) {
-                const className = this.agentDesc[key].agent_class
+            const agentNames = Object.keys(this.agentDesc)
+            for (let index=0; index<agentNames.length; ++index) {
+            //for (const key in this.agentDesc) {
+                const className = this.agentDesc[agentNames[index]].agent_class
                 if (!listOfClasses.includes(className)) listOfClasses.push(className)
             }
             return listOfClasses

From 2a0a7b9743572c23879fb3094d56f1877a26234e Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:31:38 -0700
Subject: [PATCH 17/63] Linter: Remove for-each agentsInClass()

---
 src/components/ace/ACE.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 7d023c309..7892999ff 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -72,7 +72,6 @@ export default {
             /* Determine list of agent_class */
             const agentNames = Object.keys(this.agentDesc)
             for (let index=0; index<agentNames.length; ++index) {
-            //for (const key in this.agentDesc) {
                 const className = this.agentDesc[agentNames[index]].agent_class
                 if (!listOfClasses.includes(className)) listOfClasses.push(className)
             }
@@ -80,9 +79,11 @@ export default {
         },
         agentsInClass() {
             const listOfAgents = []
-            for (const item in this.agentDesc) {
-                const itemsClass = this.agentDesc[item].agent_class
-                if (itemsClass===this.categorySelected) { listOfAgents.push(item) }
+            const agents = Object.keys(this.agentDesc)
+            for (let index=0; index<agents.length; ++index) {
+                const agent = agents[index]
+                const agentClass = this.agentDesc[agent].agent_class
+                if (agentClass===this.categorySelected) { listOfAgents.push(agent) }
             }
             return listOfAgents
         },

From b172fde50b2ba4cd2bcaa2d025b8628edfdf56b4 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:37:40 -0700
Subject: [PATCH 18/63] Linter: Remove for-each getLocalStorageAgents()

---
 src/components/ace/ACE.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 7892999ff..ba5f76c51 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -118,11 +118,12 @@ export default {
         getLocalStorageAgents() {
             let localStorageAgents = localStorage.getItem('customAgents')
             localStorageAgents = JSON.parse(localStorageAgents)
+            const localAgentNames = Object.keys(localStorageAgents)
             if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
                 console.log('Agents found in local storage:')
-                for (const agent in (localStorageAgents)) {
-                    console.log(agent)
-                    this.agentDesc[agent] = localStorageAgents[agent]
+                for (let index=0; index<localAgentNames.length; ++index) {
+                    const localAgentName = localAgentNames[index]
+                    this.agentDesc[localAgentName] = localStorageAgents[localAgentName]
                 }
             } else {
                 console.log(' * No agents loaded from local storage *')
@@ -147,7 +148,6 @@ export default {
                     this.currencyDesc.custom = {}
                 }
                 for (const currency in localStorageCurrencies) {
-                    console.log(currency)
                     this.currencyDesc.custom[currency] = localStorageCurrencies[currency]
                 }
             } else {

From 61922ae18ebcb722401be073ebec57232d6e8c5f Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:43:07 -0700
Subject: [PATCH 19/63] linter: Empty block in if statement -> Console.log

---
 src/components/ace/ACE.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index ba5f76c51..2f4cfae28 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -522,7 +522,9 @@ export default {
             currentCustomCurrencies = JSON.parse(currentCustomCurrencies)
             // Check if the custom currency object exists
             if (typeof (currentCustomCurrencies)==='object' && (currentCustomCurrencies!==null)) {
+                console.log('* Custom currencies object already exist! Appending *')
             } else { // Create the currency object
+                console.log('* No custom currencies found, creating from scratch *')
                 currentCustomCurrencies = {}
             }
             // Create the currency category

From 87204a9c63281d12ced2e76ad078161f4ad20fea Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 16:51:42 -0700
Subject: [PATCH 20/63] Linter: Remove unused variable + refactor section

---
 src/components/ace/ACE.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 2f4cfae28..7c2efbe4e 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -452,11 +452,9 @@ export default {
         createNewCurrency() {
             // Generate a unique currency name
             // Count currencies
-            let count = 0
             this.selectedCurrencyCategory = this.currencyCategorySelected
-            for (const item in this.currencyDesc[this.selectedCurrencyCategory]) {
-                count+=1
-            }
+            const currencyList = Object.keys(this.currencyDesc[this.selectedCurrencyCategory])
+            const count = currencyList.length + 1
             const currencyNumber = count + 1
             const currency_number_string = `_currency_${currencyNumber}`
             const newCurrencyName=`${this.selectedCurrencyCategory}${currency_number_string}`
@@ -485,6 +483,7 @@ export default {
             }
         },
         duplicateCurrency() {
+            // ERROR: Duplicating currency more than once does not update #, currencDesc.length not chging
             const currencyNumber = Object.keys(this.currencyDesc).length + 1
             const newCurrencyName=`${this.selectedCurrency}_${currencyNumber}`
             // Deep Copy the original object
@@ -524,7 +523,7 @@ export default {
             if (typeof (currentCustomCurrencies)==='object' && (currentCustomCurrencies!==null)) {
                 console.log('* Custom currencies object already exist! Appending *')
             } else { // Create the currency object
-                console.log('* No custom currencies found, creating from scratch *')
+                console.log('* No custom currencies object found, creating from scratch *')
                 currentCustomCurrencies = {}
             }
             // Create the currency category

From b0830684b4f92ae32eada03ced1a43db34a333b4 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:03:49 -0700
Subject: [PATCH 21/63] Improve Comment

---
 src/components/ace/ACE.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 7c2efbe4e..1a3053dae 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -528,8 +528,11 @@ export default {
             }
             // Create the currency category
             /*
-            // In simoc abm, it expects custom currencies to have a "category" param instead of being filed by category
-            // So instead of creating custom currency category, just file them under "custom"
+            // In simoc abm, it expects custom currencies to have a "category" property instead of 
+            // being filed by category within the currency object. So instead of putting it in the 
+            // category, we can just file them under "custom" category and use the parameter
+            // This commented code would be useful to create a custom category hierarchy within
+            // the object if we wanted to change back:
             if(typeof (currentCustomCurrencies[this.currencyCategorySelected])=='object' &&
                 (currentCustomCurrencies!=null)) {
             } else {

From db53c0b319d7025667acccb8a1a369899a672346 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:17:02 -0700
Subject: [PATCH 22/63] linter: Remove for-each in generateCurrencyList()

---
 src/components/ace/ACE.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 1a3053dae..0c32c4840 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -171,12 +171,18 @@ export default {
         generateCurrencyList() {
             const currancies = []
             this.currencyList = []
-            for (const type in (this.currencyDesc)) {
-                for (const subkey in (this.currencyDesc[type])) {
-                    currancies.push(subkey)
+            const currencyCats = Object.keys(this.currencyDesc)
+            for (let currencyCatIndex = 0; 
+                currencyCatIndex<currencyCats.length; currencyCatIndex+=1){
+                const currentCurrencyCatName = currencyCats[currencyCatIndex]
+                const curranciesNamesOfType = Object.keys(this.currencyDesc[currentCurrencyCatName])
+                for (let currencyIndex = 0;
+                    currencyIndex<curranciesNamesOfType.length; currencyIndex+=1) {
+                    const currencyName = curranciesNamesOfType[currencyIndex]
+                    const currencyForList=this.currencyDesc[currentCurrencyCatName][currencyName]
+                    currancies.push(currencyForList)
                 }
             }
-
             for (let i=0; i<currancies.length; ++i) {
                 this.currencyList.push(currancies[i])
             }

From b0e46157d70588344583046b28d423741abc632e Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:23:36 -0700
Subject: [PATCH 23/63] linter: Remove for-each in name change functions

---
 src/components/ace/ACE.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 0c32c4840..41f58a185 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -289,13 +289,15 @@ export default {
         },
         renameAgent(newName) {
             // Make Sure Agent Doesn't Already Exist
-            for (const name in this.agentDesc) {
-                if (name === newName) {
+            let agentNames = Object.keys(this.agentDesc)
+            for (let nameIndex=0; nameIndex<agentNames.length; nameIndex+=1) {
+                const name = agentNames[nameIndex]
+                    if (name === newName) {
                     const alertString = `${newName} already exists, try another name!`
                     console.log(alertString) // This really needs to be a notification like an alert
                     // alert(alertString) // Alert does not pass lint
                     return
-                }
+                    }
             }
             // Rename Object
             const thisAgent = this.agentDesc[this.selectedAgentName]
@@ -313,8 +315,10 @@ export default {
         },
         renameCurrency(newName) {
             // Make Sure Currency Doesn't Already Exist
-            for (const currency in this.currencyDesc[this.currencyCategorySelected]) {
-                if (currency === newName) {
+            let currencyNames = Object.keys(this.currencyDesc[this.currencyCategorySelected])
+            for (let nameIndex=0; nameIndex<currencyNames.length; nameIndex+=1) {
+                const name = currencyNames[nameIndex]
+                if (name === newName) {
                     const alertString = `${newName} already exists, try another name!`
                     // This really needs to be a notification like an alert, but alert does not pass lint
                     console.log(alertString)

From 6c9079f1002536aca1cbd0a3a2337a43d5d908ff Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:27:22 -0700
Subject: [PATCH 24/63] linter: whitespace and let->const

---
 src/components/ace/ACE.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 41f58a185..c8718885c 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -172,8 +172,8 @@ export default {
             const currancies = []
             this.currencyList = []
             const currencyCats = Object.keys(this.currencyDesc)
-            for (let currencyCatIndex = 0; 
-                currencyCatIndex<currencyCats.length; currencyCatIndex+=1){
+            for (let currencyCatIndex = 0;
+                currencyCatIndex<currencyCats.length; currencyCatIndex+=1) {
                 const currentCurrencyCatName = currencyCats[currencyCatIndex]
                 const curranciesNamesOfType = Object.keys(this.currencyDesc[currentCurrencyCatName])
                 for (let currencyIndex = 0;
@@ -289,7 +289,7 @@ export default {
         },
         renameAgent(newName) {
             // Make Sure Agent Doesn't Already Exist
-            let agentNames = Object.keys(this.agentDesc)
+            const agentNames = Object.keys(this.agentDesc)
             for (let nameIndex=0; nameIndex<agentNames.length; nameIndex+=1) {
                 const name = agentNames[nameIndex]
                     if (name === newName) {
@@ -315,7 +315,7 @@ export default {
         },
         renameCurrency(newName) {
             // Make Sure Currency Doesn't Already Exist
-            let currencyNames = Object.keys(this.currencyDesc[this.currencyCategorySelected])
+            const currencyNames = Object.keys(this.currencyDesc[this.currencyCategorySelected])
             for (let nameIndex=0; nameIndex<currencyNames.length; nameIndex+=1) {
                 const name = currencyNames[nameIndex]
                 if (name === newName) {

From 02fadbf40c895eeceef9c7e19b44b67c70ab0852 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:33:21 -0700
Subject: [PATCH 25/63] remove for-each getLocalStorageCurrencies()

---
 src/components/ace/ACE.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index c8718885c..90b3e85b9 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -147,11 +147,15 @@ export default {
                 } else {
                     this.currencyDesc.custom = {}
                 }
-                for (const currency in localStorageCurrencies) {
-                    this.currencyDesc.custom[currency] = localStorageCurrencies[currency]
+                const localCurrencyNames = Object.keys(localStorageCurrencies)
+                console.log(' * Currencies loaded from local storage:')
+                for (let nameIndex=0; nameIndex<localCurrencyNames.length;nameIndex+=1) {
+                    const currencyName = localCurrencyNames[nameIndex]
+                    console.log(currencyName);
+                    this.currencyDesc.custom[currencyName] = localStorageCurrencies[currencyName]
                 }
             } else {
-                console.log(' * No agents loaded from local storage *')
+                console.log(' * No currencies loaded from local storage *')
             }
         },
         async getCurrencyDesc() {

From f4568101c13bce3ce4720c637182481b49cd8f04 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:37:58 -0700
Subject: [PATCH 26/63] linter: removePropQuotes, spacing, ;

---
 src/components/ace/ACE.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 90b3e85b9..25e83f1f0 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -149,9 +149,9 @@ export default {
                 }
                 const localCurrencyNames = Object.keys(localStorageCurrencies)
                 console.log(' * Currencies loaded from local storage:')
-                for (let nameIndex=0; nameIndex<localCurrencyNames.length;nameIndex+=1) {
+                for (let nameIndex=0; nameIndex<localCurrencyNames.length; nameIndex+=1) {
                     const currencyName = localCurrencyNames[nameIndex]
-                    console.log(currencyName);
+                    console.log(currencyName)
                     this.currencyDesc.custom[currencyName] = localStorageCurrencies[currencyName]
                 }
             } else {
@@ -205,7 +205,7 @@ export default {
             }
         },
         submitAgent() {
-            this.agentDesc[this.categorySelected][this.selectedAgentName] = {'data': 0}
+            this.agentDesc[this.categorySelected][this.selectedAgentName] = {data: 0}
         },
         selectItem(item) {
             this.selectedAgentName = item
@@ -395,11 +395,11 @@ export default {
             if (newPropVal==='false') { newPropVal = false }
             if (newPropUnit !== '') {
                 this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
-                    {'value': newPropVal, 'unit': newPropUnit}
+                    {value: newPropVal, unit: newPropUnit}
                 )
             } else { // Make sure not to add unit if it is not specified
                 this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
-                    {'value': newPropVal}
+                    {value: newPropVal}
                 )
             }
         },

From c41b963ab8d4ebe508da5491667b67dc40dbb4a7 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:42:25 -0700
Subject: [PATCH 27/63] linter: destructuring variable name the fixed

---
 src/components/ace/ACE.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 25e83f1f0..1549d0e6e 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -245,8 +245,8 @@ export default {
             // Delete the specific kind of growth
             delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind]
             // Remove the growth object if there are no growths in it.
-            const growth = this.agentDesc[this.selectedAgentName].flows.out[currency].growth
-            if (Object.keys(growth).length === 0) {
+            const flowGrowth = this.agentDesc[this.selectedAgentName].flows.out[currency].growth
+            if (Object.keys(flowGrowth).length === 0) {
                 delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth
             }
         },
@@ -254,8 +254,8 @@ export default {
             // Delete the specific kind of criterion
             delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[kind]
             // Remove the criteria object if there are no growths in it.
-            const criteria = this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
-            if (Object.keys(criteria).length === 0) {
+            const thisCriteria = this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
+            if (Object.keys(thisCriteria).length === 0) {
                 delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
             }
         },

From 826932b7e36b6780f34fc07f10ae31c97c7e298e Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:47:36 -0700
Subject: [PATCH 28/63] linter: eliminate destructuring warning

---
 src/components/ace/ACE.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 1549d0e6e..4c66246f2 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -553,13 +553,13 @@ export default {
                 currentCustomCurrencies[this.currencyCategorySelected] = {}
             }
             */
-            let category = this.currencyCategorySelected
-            this.customCurrencies[currencyName] = this.currencyDesc[category][currencyName]
+            let exportCategory = this.currencyCategorySelected
+            this.customCurrencies[currencyName] = this.currencyDesc[exportCategory][currencyName]
             // Assign category for export
-            if (category==='custom') {
-                category = this.currencyDesc.custom[currencyName].category
+            if (exportCategory==='custom') {
+                exportCategory = this.currencyDesc.custom[currencyName].category
             } else {
-                this.customCurrencies[currencyName].category = category // this.currencyCategorySelected
+                this.customCurrencies[currencyName].category = exportCategory
             }
             currentCustomCurrencies[currencyName]=this.customCurrencies[currencyName]
             localStorage.setItem('customCurrencies', JSON.stringify(currentCustomCurrencies))

From 28d1a37431a71bc77a50b383c12892f1b074786b Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:50:50 -0700
Subject: [PATCH 29/63] linter: Stop assigning to function parameter

---
 src/components/ace/ACE.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 4c66246f2..b14fe94db 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -278,7 +278,8 @@ export default {
         removeDeprive(currency) {
             delete this.agentDesc[this.selectedAgentName].flows.in[currency].deprive
         },
-        changePropertyValue(property, newPropVal) {
+        changePropertyValue(property, newPVal) {
+            let newPropVal = newPVal
             /* See if it is a number, if it is, store it as one, otherwise as a string */
             if (!Number.isNaN(Number(newPropVal))) {
             /* This is to ensure the data sent to the back is not a string in the JSON */
@@ -387,7 +388,8 @@ export default {
             this.agentDesc[this.selectedAgentName].thresholds[currency].value=value
             this.agentDesc[this.selectedAgentName].thresholds[currency].connections=connections
         },
-        addNewProperty(newPropertyName, newPropVal, newPropUnit) {
+        addNewProperty(newPropertyName, newPVal, newPropUnit) {
+            let newPropVal = newPVal
             if (!isNaN(newPropVal)) { /* If it is a number, make sure it is a number and not a string */
                 newPropVal = +newPropVal
             }

From f097988c0b48852c3d0d19c2afa2babb8a19106f Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:54:14 -0700
Subject: [PATCH 30/63] linter: Adjust Whitespace

---
 src/components/ace/ACE.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index b14fe94db..c136693fb 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -298,10 +298,10 @@ export default {
             for (let nameIndex=0; nameIndex<agentNames.length; nameIndex+=1) {
                 const name = agentNames[nameIndex]
                     if (name === newName) {
-                    const alertString = `${newName} already exists, try another name!`
-                    console.log(alertString) // This really needs to be a notification like an alert
-                    // alert(alertString) // Alert does not pass lint
-                    return
+                        const alertString = `${newName} already exists, try another name!`
+                        console.log(alertString) // This really needs to be a notification like an alert
+                        // alert(alertString) // Alert does not pass lint
+                        return
                     }
             }
             // Rename Object
@@ -312,7 +312,7 @@ export default {
             // Make sure that if it is a plant, the corresponding currency is renamed also
             if (this.categorySelected==='plants') {
                 // This really needs to be a notification like an alert, but alert does not pass lint
-                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED,' )
+                console.log('PLANT. MAKE SURE PLANT FLOW CURRENCIES ARE UPDATED/CREATED,')
                 console.log('(i.e. rice has rice as outflow, ')
                 console.log('and has rice as a biomass connection)!')
             }
@@ -544,8 +544,8 @@ export default {
             }
             // Create the currency category
             /*
-            // In simoc abm, it expects custom currencies to have a "category" property instead of 
-            // being filed by category within the currency object. So instead of putting it in the 
+            // In simoc abm, it expects custom currencies to have a "category" property instead of
+            // being filed by category within the currency object. So instead of putting it in the
             // category, we can just file them under "custom" category and use the parameter
             // This commented code would be useful to create a custom category hierarchy within
             // the object if we wanted to change back:

From f4a7df102671c29b894cbda63b25ee74f7d68c93 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:56:19 -0700
Subject: [PATCH 31/63] linter: isNaN -> Number.isNaN

---
 src/components/ace/ACE.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index c136693fb..f63a651a5 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -390,7 +390,7 @@ export default {
         },
         addNewProperty(newPropertyName, newPVal, newPropUnit) {
             let newPropVal = newPVal
-            if (!isNaN(newPropVal)) { /* If it is a number, make sure it is a number and not a string */
+            if (!Number.isNaN(Number(newPropVal))) { /* If it is a number, make sure it is a number and not a string */
                 newPropVal = +newPropVal
             }
             if (newPropVal==='true') { newPropVal = true }

From 579893891bb9fda631367d8505344182da7483fe Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 17:58:52 -0700
Subject: [PATCH 32/63] linter: indentation

---
 src/components/ace/ACE.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index f63a651a5..3f2f37672 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -297,12 +297,12 @@ export default {
             const agentNames = Object.keys(this.agentDesc)
             for (let nameIndex=0; nameIndex<agentNames.length; nameIndex+=1) {
                 const name = agentNames[nameIndex]
-                    if (name === newName) {
-                        const alertString = `${newName} already exists, try another name!`
-                        console.log(alertString) // This really needs to be a notification like an alert
-                        // alert(alertString) // Alert does not pass lint
-                        return
-                    }
+                if (name === newName) {
+                    const alertString = `${newName} already exists, try another name!`
+                    console.log(alertString) // This really needs to be a notification like an alert
+                    // alert(alertString) // Alert does not pass lint
+                    return
+                }
             }
             // Rename Object
             const thisAgent = this.agentDesc[this.selectedAgentName]

From 6b8b1cf7aefeb1edd7b7ead747e77a3a2ae34bb4 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Apr 2024 18:27:00 -0700
Subject: [PATCH 33/63] Fixed bug caused by incorrectly replacing for-each loop
 for currencies

---
 src/components/ace/ACE.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 3f2f37672..e43b97aaa 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -183,8 +183,8 @@ export default {
                 for (let currencyIndex = 0;
                     currencyIndex<curranciesNamesOfType.length; currencyIndex+=1) {
                     const currencyName = curranciesNamesOfType[currencyIndex]
-                    const currencyForList=this.currencyDesc[currentCurrencyCatName][currencyName]
-                    currancies.push(currencyForList)
+                    // const currencyForList=this.currencyDesc[currentCurrencyCatName][currencyName]
+                    currancies.push(currencyName)
                 }
             }
             for (let i=0; i<currancies.length; ++i) {

From cbc7ee34fa38aa3e5068e05b854984c87d7dac0e Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sat, 11 May 2024 09:25:34 -0700
Subject: [PATCH 34/63] Fix line length linter errors

---
 src/components/ace/ACE.vue | 50 ++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index e43b97aaa..7cc6ce618 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -754,10 +754,12 @@ export default {
                             </li>
                             <li> connections :
                                 <span
-                                    v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)==='object'">
+                                    v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)
+                                        ==='object'">
                                     (Click to remove)
                                     <button
-                                        v-for="(connection, index) in agentDesc[selectedAgentName].flows.in[currency].connections"
+                                        v-for="(connection, index) in
+                                            agentDesc[selectedAgentName].flows.in[currency].connections"
                                         @click="removeFlowArrayItem('in', 'connections', currency, connection)">
                                         {{connection}}
                                     </button>
@@ -769,10 +771,12 @@ export default {
                                 </button>
                             </li>
                             <li> weighted:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)==='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)
+                                    ==='object'">
                                     (Click to remove)
                                     <button
-                                        v-for="(weighted, index) in agentDesc[selectedAgentName].flows.in[currency].weighted"
+                                        v-for="(weighted, index)
+                                            in agentDesc[selectedAgentName].flows.in[currency].weighted"
                                         @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
                                         {{weighted}}
                                     </button>
@@ -847,10 +851,12 @@ export default {
                                 </ul>
                             </li>
                             <li> connections:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)==='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)
+                                    ==='object'">
                                     (Click to remove)
                                     <button
-                                        v-for="(connection, index) in agentDesc[selectedAgentName].flows.out[currency].connections"
+                                        v-for="(connection, index)
+                                            in agentDesc[selectedAgentName].flows.out[currency].connections"
                                         @click="removeFlowArrayItem('out', 'connections', currency, connection)">
                                         {{connection}}
                                     </button>
@@ -862,9 +868,11 @@ export default {
                                 </button>
                             </li>
                             <li> weighted:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)==='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)
+                                    ==='object'">
                                     (Click to remove)
-                                    <button v-for="(weighted, index) in agentDesc[selectedAgentName].flows.out[currency].weighted"
+                                    <button v-for="(weighted, index) in
+                                                agentDesc[selectedAgentName].flows.out[currency].weighted"
                                             @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
                                         {{weighted}}
                                     </button>
@@ -876,10 +884,14 @@ export default {
                                 </button>
                             </li>
                             <li> requires :
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)==='object'">
+                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)
+                                    ==='object'">
                                     (Click to remove)
-                                    <button v-for="(requires, index) in agentDesc[selectedAgentName].flows.out[currency].requires"
-                                            @click="removeFlowArrayItem('out', 'requires', currency, requires)">
+                                    <button v-for="(requires, index)
+                                                in agentDesc[selectedAgentName].flows.out[currency].requires"
+                                            @click="removeFlowArrayItem('out',
+                                                                        'requires',
+                                                                        currency, requires)">
                                         {{requires}}
                                     </button>
                                     <br>
@@ -895,7 +907,8 @@ export default {
                             </li>
                             <li> growth:
                                 <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].growth)==='object'">
-                                    <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].growth">
+                                    <li v-for="(pattern, kind)
+                                        in agentDesc[selectedAgentName].flows.out[currency].growth">
                                         {{kind}}
                                         (Change to:
                                         <input v-model="kindTypes[kind]" name="kindTypeName" type="text">
@@ -928,7 +941,8 @@ export default {
                             </li>
                             <li> criteria:
                                 <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].criteria)==='object'">
-                                    <li v-for="(pattern, kind) in agentDesc[selectedAgentName].flows.out[currency].criteria">
+                                    <li v-for="(pattern, kind)
+                                        in agentDesc[selectedAgentName].flows.out[currency].criteria">
                                         {{kind}}
                                         (
                                         <label>Change to:
@@ -961,7 +975,8 @@ export default {
                                 <ul>
                                     <li>
                                         <input v-model="newCriterionName" name="newCriterionNameField" type="text">
-                                        <button @click="addNewCriterion(currency, newCriterionName, newCriterionValue, newCriterionLimit)">
+                                        <button @click="addNewCriterion(currency, newCriterionName, newCriterionValue,
+                                                                        newCriterionLimit)">
                                             Add new Criterion
                                         </button>
                                         <ul>
@@ -1053,7 +1068,9 @@ export default {
                                        name="newThresholdConnectionsField">
                             </li>
                         </ul>
-                        <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath, newThresholdLimit, newThresholdValue, newThresholdConnections)">
+                        <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath,
+                                                        newThresholdLimit, newThresholdValue,
+                                                        newThresholdConnections)">
                             Add Threshold Currency
                         </button>
                     </li> <!-- NEW FLOW -->
@@ -1105,7 +1122,8 @@ export default {
                                         <b>{{subsubkey}}</b> :
                                         <i v-if="typeof(subsubvalue)!='object'">{{subsubvalue}}</i>
                                         <ul v-else>
-                                            <li v-for="(subsubsubvalue, subsubsubkey) in agentDesc[selectedAgentName][key][subkey][subsubkey]">
+                                            <li v-for="(subsubsubvalue, subsubsubkey)
+                                                in agentDesc[selectedAgentName][key][subkey][subsubkey]">
                                                 <b>{{subsubsubkey}}</b> :  {{subsubsubvalue}}
                                             </li>
                                         </ul>

From 50894a37ceb8ef4a7c5f3b0b94d19b10f573b6d2 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sat, 11 May 2024 10:09:01 -0700
Subject: [PATCH 35/63] Add computed selectedAgent() to reduce line length

---
 src/components/ace/ACE.vue | 206 +++++++++++++++++++------------------
 1 file changed, 106 insertions(+), 100 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 7cc6ce618..5ba5f9a10 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -57,6 +57,9 @@ export default {
         }
     },
     computed: {
+        selectedAgent(){
+            return this.agentDesc[this.selectedAgentName];
+        },
         currencyTypes() {
             const listOfTypes = []
             /* Determine list of type */
@@ -215,52 +218,52 @@ export default {
             this.selectedCurrencyCategory = this.currencyCategorySelected
         },
         setCustomClass() {
-            this.agentDesc[this.selectedAgentName].agent_class=this.customClassName
+            this.selectedAgent.agent_class=this.customClassName
             this.categorySelected = this.customClassName
         },
         removeCapacity(key) {
-            delete this.agentDesc[this.selectedAgentName].capacity[key]
+            delete this.selectedAgent.capacity[key]
             // Remove the capacities object if there are no capacities in it.
-            if ((Object.keys(this.agentDesc[this.selectedAgentName].capacity).length) === 0) {
-                delete this.agentDesc[this.selectedAgentName].capacity
+            if ((Object.keys(this.selectedAgent.capacity).length) === 0) {
+                delete this.selectedAgent.capacity
             }
         },
         removeInFlow(currency) {
-            delete this.agentDesc[this.selectedAgentName].flows.in[currency]
+            delete this.selectedAgent.flows.in[currency]
         },
         removeOutFlow(currency) {
-            delete this.agentDesc[this.selectedAgentName].flows.out[currency]
+            delete this.selectedAgent.flows.out[currency]
         },
         removeThreshold(currency) {
-            delete this.agentDesc[this.selectedAgentName].thresholds[currency]
+            delete this.selectedAgent.thresholds[currency]
             // Remove thresholds object if there are no currencies listed
-            if (Object.keys(this.agentDesc[this.selectedAgentName].thresholds).length === 0) {
-                delete this.agentDesc[this.selectedAgentName].thresholds
+            if (Object.keys(this.selectedAgent.thresholds).length === 0) {
+                delete this.selectedAgent.thresholds
             }
         },
         removeProperty(property) {
-            delete this.agentDesc[this.selectedAgentName].properties[property]
+            delete this.selectedAgent.properties[property]
         },
         removeGrowth(currency, kind) {
             // Delete the specific kind of growth
-            delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth[kind]
+            delete this.selectedAgent.flows.out[currency].growth[kind]
             // Remove the growth object if there are no growths in it.
-            const flowGrowth = this.agentDesc[this.selectedAgentName].flows.out[currency].growth
+            const flowGrowth = this.selectedAgent.flows.out[currency].growth
             if (Object.keys(flowGrowth).length === 0) {
-                delete this.agentDesc[this.selectedAgentName].flows.out[currency].growth
+                delete this.selectedAgent.flows.out[currency].growth
             }
         },
         removeCriterion(currency, kind) {
             // Delete the specific kind of criterion
-            delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria[kind]
+            delete this.selectedAgent.flows.out[currency].criteria[kind]
             // Remove the criteria object if there are no growths in it.
-            const thisCriteria = this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
+            const thisCriteria = this.selectedAgent.flows.out[currency].criteria
             if (Object.keys(thisCriteria).length === 0) {
-                delete this.agentDesc[this.selectedAgentName].flows.out[currency].criteria
+                delete this.selectedAgent.flows.out[currency].criteria
             }
         },
         removeFlowArrayItem(direction, type, currency, name) {
-            const agent = this.agentDesc[this.selectedAgentName]
+            const agent = this.selectedAgent
             const index = (
                 agent.flows[direction][currency][type].indexOf(name)
             )
@@ -276,7 +279,7 @@ export default {
             }
         },
         removeDeprive(currency) {
-            delete this.agentDesc[this.selectedAgentName].flows.in[currency].deprive
+            delete this.selectedAgent.flows.in[currency].deprive
         },
         changePropertyValue(property, newPVal) {
             let newPropVal = newPVal
@@ -290,7 +293,7 @@ export default {
             }
             if (newPropVal==='true') { newPropVal = true }
             if (newPropVal==='false') { newPropVal = false }
-            this.agentDesc[this.selectedAgentName].properties[property].value=newPropVal
+            this.selectedAgent.properties[property].value=newPropVal
         },
         renameAgent(newName) {
             // Make Sure Agent Doesn't Already Exist
@@ -305,9 +308,9 @@ export default {
                 }
             }
             // Rename Object
-            const thisAgent = this.agentDesc[this.selectedAgentName]
+            const thisAgent = this.selectedAgent
             this.agentDesc[newName] = thisAgent
-            delete this.agentDesc[this.selectedAgentName]
+            delete this.selectedAgent
             this.selectedAgentName = newName
             // Make sure that if it is a plant, the corresponding currency is renamed also
             if (this.categorySelected==='plants') {
@@ -339,54 +342,54 @@ export default {
             this.generateCurrencyList()
         },
         changeType(key, value, newName) {
-            this.agentDesc[this.selectedAgentName].capacity[newName]=value
-            delete this.agentDesc[this.selectedAgentName].capacity[key]
+            this.selectedAgent.capacity[newName]=value
+            delete this.selectedAgent.capacity[key]
         },
         changeInType(key, value, newName) {
-            this.agentDesc[this.selectedAgentName].flows.in[newName]=value
-            delete this.agentDesc[this.selectedAgentName].flows.in[key]
+            this.selectedAgent.flows.in[newName]=value
+            delete this.selectedAgent.flows.in[key]
         },
         changeOutType(key, value, newName) {
-            this.agentDesc[this.selectedAgentName].flows.out[newName]=value
-            delete this.agentDesc[this.selectedAgentName].flows.out[key]
+            this.selectedAgent.flows.out[newName]=value
+            delete this.selectedAgent.flows.out[key]
         },
         changeThresholdType(key, value, newName) {
-            this.agentDesc[this.selectedAgentName].thresholds[newName]=value
-            delete this.agentDesc[this.selectedAgentName].thresholds[key]
+            this.selectedAgent.thresholds[newName]=value
+            delete this.selectedAgent.thresholds[key]
         },
         changePropertyName(key, value, newName) {
-            this.agentDesc[this.selectedAgentName].properties[newName]=value
-            delete this.agentDesc[this.selectedAgentName].properties[key]
+            this.selectedAgent.properties[newName]=value
+            delete this.selectedAgent.properties[key]
         },
         changeGrowthType(kind, value, newName, key) {
-            this.agentDesc[this.selectedAgentName].flows.out[key].growth[newName]=value
-            delete this.agentDesc[this.selectedAgentName].flows.out[key].growth[kind]
+            this.selectedAgent.flows.out[key].growth[newName]=value
+            delete this.selectedAgent.flows.out[key].growth[kind]
         },
         changeCriterionType(kind, value, newName, key) {
-            this.agentDesc[this.selectedAgentName].flows.out[key].criteria[newName]=value
-            delete this.agentDesc[this.selectedAgentName].flows.out[key].criteria[kind]
+            this.selectedAgent.flows.out[key].criteria[newName]=value
+            delete this.selectedAgent.flows.out[key].criteria[kind]
         },
         addNewCapacity(key, value) {
             // Add the capacity object if it doesn't exist
-            if (!(typeof (this.agentDesc[this.selectedAgentName].capacity)==='object')) {
-                this.agentDesc[this.selectedAgentName].capacity = {}
+            if (!(typeof (this.selectedAgent.capacity)==='object')) {
+                this.selectedAgent.capacity = {}
             }
-            this.agentDesc[this.selectedAgentName].capacity[key]=value
+            this.selectedAgent.capacity[key]=value
         },
         addNewFlow(direction, currency) {
-            this.agentDesc[this.selectedAgentName].flows[direction][currency]={}
-            this.agentDesc[this.selectedAgentName].flows[direction][currency].flow_rate = {}
+            this.selectedAgent.flows[direction][currency]={}
+            this.selectedAgent.flows[direction][currency].flow_rate = {}
         },
         addNewThreshold(currency, path, limit, value, connections) {
             // Add the threshold object if it doesn't exist
-            if (!(typeof (this.agentDesc[this.selectedAgentName].thresholds)==='object')) {
-                this.agentDesc[this.selectedAgentName].thresholds = {}
+            if (!(typeof (this.selectedAgent.thresholds)==='object')) {
+                this.selectedAgent.thresholds = {}
             }
-            this.agentDesc[this.selectedAgentName].thresholds[currency]={}
-            this.agentDesc[this.selectedAgentName].thresholds[currency].path=path
-            this.agentDesc[this.selectedAgentName].thresholds[currency].limit=limit
-            this.agentDesc[this.selectedAgentName].thresholds[currency].value=value
-            this.agentDesc[this.selectedAgentName].thresholds[currency].connections=connections
+            this.selectedAgent.thresholds[currency]={}
+            this.selectedAgent.thresholds[currency].path=path
+            this.selectedAgent.thresholds[currency].limit=limit
+            this.selectedAgent.thresholds[currency].value=value
+            this.selectedAgent.thresholds[currency].connections=connections
         },
         addNewProperty(newPropertyName, newPVal, newPropUnit) {
             let newPropVal = newPVal
@@ -396,17 +399,17 @@ export default {
             if (newPropVal==='true') { newPropVal = true }
             if (newPropVal==='false') { newPropVal = false }
             if (newPropUnit !== '') {
-                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
+                this.selectedAgent.properties[newPropertyName] = (
                     {value: newPropVal, unit: newPropUnit}
                 )
             } else { // Make sure not to add unit if it is not specified
-                this.agentDesc[this.selectedAgentName].properties[newPropertyName] = (
+                this.selectedAgent.properties[newPropertyName] = (
                     {value: newPropVal}
                 )
             }
         },
         addFlowArrayItem(direction, type, currency, name) {
-            const agent = this.agentDesc[this.selectedAgentName]
+            const agent = this.selectedAgent
             // Add the array if it doesn't exist
             if (!(typeof (agent.flows[direction][currency][type])==='object')) {
                 agent.flows[direction][currency][type] = []
@@ -415,7 +418,7 @@ export default {
             (agent.flows[direction][currency][type]).push(name)
         },
         addNewCriterion(currency, name, value, limit) {
-            const agent = this.agentDesc[this.selectedAgentName]
+            const agent = this.selectedAgent
             // Add Criteria if it doesn't exist
             if (!(typeof (agent.flows.out[currency].criteria)==='object')) {
                 agent.flows.out[currency].criteria = {}
@@ -440,7 +443,7 @@ export default {
             delete this.currencyDesc[this.selectedCurrencyCategory][this.selectedCurrency].nutrition
         },
         addGrowth(currency, kind, pattern) {
-            const agent = this.agentDesc[this.selectedAgentName]
+            const agent = this.selectedAgent
             if (!(typeof (agent.flows.out[currency].growth)==='object')) {
                 agent.flows.out[currency].growth = {}
             }
@@ -448,9 +451,9 @@ export default {
             agent.flows.out[currency].growth[kind].type=pattern
         },
         addDeprive(currency, value, unit) {
-            this.agentDesc[this.selectedAgentName].flows.in[currency].deprive = {}
-            this.agentDesc[this.selectedAgentName].flows.in[currency].deprive.value=value
-            this.agentDesc[this.selectedAgentName].flows.in[currency].deprive.unit=unit
+            this.selectedAgent.flows.in[currency].deprive = {}
+            this.selectedAgent.flows.in[currency].deprive.value=value
+            this.selectedAgent.flows.in[currency].deprive.unit=unit
         },
         createNewAgent() {
             const agentNumber = Object.keys(this.agentDesc).length + 1
@@ -486,7 +489,7 @@ export default {
             const agentNumber = Object.keys(this.agentDesc).length + 1
             const newAgentName=`${this.selectedAgentName}_${agentNumber}`
             // Deep Copy the original object
-            const copiedObject = JSON.parse(JSON.stringify(this.agentDesc[this.selectedAgentName]))
+            const copiedObject = JSON.parse(JSON.stringify(this.selectedAgent))
             this.agentDesc[newAgentName]=copiedObject
             // Switch to the copied agent
             this.selectedAgentName=newAgentName
@@ -514,7 +517,7 @@ export default {
         exportJSON() {
             // Package this agent singly
             const agentName = this.selectedAgentName
-            this.customAgents[agentName] = this.agentDesc[this.selectedAgentName]
+            this.customAgents[agentName] = this.selectedAgent
             let currentCustomAgents=localStorage.getItem('customAgents')
             currentCustomAgents=JSON.parse(currentCustomAgents)
             if (typeof (currentCustomAgents)==='object' && (currentCustomAgents!==null)) {
@@ -576,6 +579,9 @@ export default {
                 this.currentMode='agent'
             }
         },
+        getCriteriaValueModel(currency, kind) { // Function to limit line length in Vue
+            return this.selectedAgent.flows.out[currency].criteria[kind].value
+        },
     },
 }
 </script>
@@ -687,7 +693,7 @@ export default {
                 </h2>
                 <ul>
                     <li>Agent Class:
-                        <select id="categoryChanger" v-model="agentDesc[selectedAgentName].agent_class">
+                        <select id="categoryChanger" v-model="selectedAgent.agent_class">
                             <option v-for="category in agentClasses" :key="category" :value="category">
                                 {{category}}
                             </option>
@@ -699,20 +705,20 @@ export default {
                         <button @click="setCustomClass">Set Custom Class</button>
                     </li>
                     <li>Description: <br>
-                        <textarea v-model="agentDesc[selectedAgentName].description"
+                        <textarea v-model="selectedAgent.description"
                                   name="descriptionField" rows="4" cols="100" />
                     </li>
                 </ul>
                 <h3>Capacity</h3>
                 <ul>
-                    <li v-for="(value, key) in agentDesc[selectedAgentName].capacity">
+                    <li v-for="(value, key) in selectedAgent.capacity">
                         {{key}}
                         (Change to:
                         <input v-model="capacityTypes[key]" name="capType" type="text">
                         <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
                         :::::
                         Quantity:
-                        <input v-model="agentDesc[selectedAgentName].capacity[key]" name="capVal" type="number">
+                        <input v-model="selectedAgent.capacity[key]" name="capVal" type="number">
                         <button @click="removeCapacity(key)">Remove Capacity</button>
                     </li>
                     <li>
@@ -727,7 +733,7 @@ export default {
                 <h3>Flows</h3>
                 <h4>In Currencies</h4>
                 <ul> <!-- In currency ul -->
-                    <li v-for="(value, currency) in agentDesc[selectedAgentName].flows.in">{{currency}}
+                    <li v-for="(value, currency) in selectedAgent.flows.in">{{currency}}
                         <label>(Change to:
                             <select v-model="inTypes[currency]" name="changeInFlowCurrency">
                                 <option v-for="item in currencyList" :value="item"> {{item}} </option>
@@ -737,29 +743,29 @@ export default {
                         <button @click="removeInFlow(currency)">Remove</button>
                         <ul>
                             <li> Value:
-                                <input v-model="agentDesc[selectedAgentName].flows.in[currency].value"
+                                <input v-model="selectedAgent.flows.in[currency].value"
                                        name="flowValueFieldIn" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
                                     <li>Unit:
-                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.unit"
+                                        <input v-model="selectedAgent.flows.in[currency].flow_rate.unit"
                                                name="flowInUnit" type="text">
                                     </li>
                                     <li>Time:
-                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].flow_rate.time"
+                                        <input v-model="selectedAgent.flows.in[currency].flow_rate.time"
                                                name="flowInTime" type="text">
                                     </li>
                                 </ul>
                             </li>
                             <li> connections :
                                 <span
-                                    v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].connections)
+                                    v-if="typeof(selectedAgent.flows.in[currency].connections)
                                         ==='object'">
                                     (Click to remove)
                                     <button
                                         v-for="(connection, index) in
-                                            agentDesc[selectedAgentName].flows.in[currency].connections"
+                                            selectedAgent.flows.in[currency].connections"
                                         @click="removeFlowArrayItem('in', 'connections', currency, connection)">
                                         {{connection}}
                                     </button>
@@ -771,12 +777,12 @@ export default {
                                 </button>
                             </li>
                             <li> weighted:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].weighted)
+                                <span v-if="typeof(selectedAgent.flows.in[currency].weighted)
                                     ==='object'">
                                     (Click to remove)
                                     <button
                                         v-for="(weighted, index)
-                                            in agentDesc[selectedAgentName].flows.in[currency].weighted"
+                                            in selectedAgent.flows.in[currency].weighted"
                                         @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
                                         {{weighted}}
                                     </button>
@@ -788,14 +794,14 @@ export default {
                                 </button>
                             </li>
                             <li> deprive:
-                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.in[currency].deprive)==='object'">
+                                <ul v-if="typeof(selectedAgent.flows.in[currency].deprive)==='object'">
                                     <button @click="removeDeprive(currency)">Remove Deprive</button>
                                     <li>Value:
-                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.value"
+                                        <input v-model="selectedAgent.flows.in[currency].deprive.value"
                                                name="depriveValue" type="number">
                                     </li>
                                     <li>Unit:
-                                        <input v-model="agentDesc[selectedAgentName].flows.in[currency].deprive.unit"
+                                        <input v-model="selectedAgent.flows.in[currency].deprive.unit"
                                                name="depriveUnit" type="text">
                                     </li>
                                 </ul>
@@ -824,7 +830,7 @@ export default {
                 </ul> <!-- In currency ul -->
                 <h4>Out Currencies</h4>
                 <ul> <!-- Out Currency ul -->
-                    <li v-for="(value, currency) in agentDesc[selectedAgentName].flows.out"> {{currency}}
+                    <li v-for="(value, currency) in selectedAgent.flows.out"> {{currency}}
                         (Change to:
                         <label>
                             <select v-model="outTypes[currency]" name="changeOutCurrencySelector">
@@ -835,28 +841,28 @@ export default {
                         <button @click="removeOutFlow(currency)">Remove</button>
                         <ul> <!-- Out currency -->
                             <li> Value:
-                                <input v-model="agentDesc[selectedAgentName].flows.out[currency].value"
+                                <input v-model="selectedAgent.flows.out[currency].value"
                                        name="flowValueOut" type="number">
                             </li>
                             <li> flow_rate:
                                 <ul>
                                     <li>Unit:
-                                        <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.unit"
+                                        <input v-model="selectedAgent.flows.out[currency].flow_rate.unit"
                                                name="flowUnitOut" type="text">
                                     </li>
                                     <li>Time:
-                                        <input v-model="agentDesc[selectedAgentName].flows.out[currency].flow_rate.time"
+                                        <input v-model="selectedAgent.flows.out[currency].flow_rate.time"
                                                name="flowTimeOut" type="text">
                                     </li>
                                 </ul>
                             </li>
                             <li> connections:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].connections)
+                                <span v-if="typeof(selectedAgent.flows.out[currency].connections)
                                     ==='object'">
                                     (Click to remove)
                                     <button
                                         v-for="(connection, index)
-                                            in agentDesc[selectedAgentName].flows.out[currency].connections"
+                                            in selectedAgent.flows.out[currency].connections"
                                         @click="removeFlowArrayItem('out', 'connections', currency, connection)">
                                         {{connection}}
                                     </button>
@@ -868,11 +874,11 @@ export default {
                                 </button>
                             </li>
                             <li> weighted:
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].weighted)
+                                <span v-if="typeof(selectedAgent.flows.out[currency].weighted)
                                     ==='object'">
                                     (Click to remove)
                                     <button v-for="(weighted, index) in
-                                                agentDesc[selectedAgentName].flows.out[currency].weighted"
+                                                selectedAgent.flows.out[currency].weighted"
                                             @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
                                         {{weighted}}
                                     </button>
@@ -884,11 +890,11 @@ export default {
                                 </button>
                             </li>
                             <li> requires :
-                                <span v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].requires)
+                                <span v-if="typeof(selectedAgent.flows.out[currency].requires)
                                     ==='object'">
                                     (Click to remove)
                                     <button v-for="(requires, index)
-                                                in agentDesc[selectedAgentName].flows.out[currency].requires"
+                                                in selectedAgent.flows.out[currency].requires"
                                             @click="removeFlowArrayItem('out',
                                                                         'requires',
                                                                         currency, requires)">
@@ -906,9 +912,9 @@ export default {
                                 </button>
                             </li>
                             <li> growth:
-                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].growth)==='object'">
+                                <ul v-if="typeof(selectedAgent.flows.out[currency].growth)==='object'">
                                     <li v-for="(pattern, kind)
-                                        in agentDesc[selectedAgentName].flows.out[currency].growth">
+                                        in selectedAgent.flows.out[currency].growth">
                                         {{kind}}
                                         (Change to:
                                         <input v-model="kindTypes[kind]" name="kindTypeName" type="text">
@@ -920,7 +926,7 @@ export default {
                                         <ul>
                                             <li> Type:
                                                 <input
-                                                    v-model="agentDesc[selectedAgentName].flows.out[currency].growth[kind].type"
+                                                    v-model="selectedAgent.flows.out[currency].growth[kind].type"
                                                     name="growthTypeField" type="text">
                                             </li>
                                         </ul>
@@ -940,9 +946,9 @@ export default {
                                 </button>
                             </li>
                             <li> criteria:
-                                <ul v-if="typeof(agentDesc[selectedAgentName].flows.out[currency].criteria)==='object'">
+                                <ul v-if="typeof(selectedAgent.flows.out[currency].criteria)==='object'">
                                     <li v-for="(pattern, kind)
-                                        in agentDesc[selectedAgentName].flows.out[currency].criteria">
+                                        in selectedAgent.flows.out[currency].criteria">
                                         {{kind}}
                                         (
                                         <label>Change to:
@@ -955,7 +961,7 @@ export default {
                                         :::::
                                         <ul>
                                             <li> Limit:
-                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].limit"
+                                                <select v-model="selectedAgent.flows.out[currency].criteria[kind].limit"
                                                         name="criteriaLimitField">
                                                     <option value="&lt;"> &lt; </option>
                                                     <option value="&equals;"> = </option>
@@ -963,7 +969,7 @@ export default {
                                                 </select>
                                             </li>
                                             <li> Value:
-                                                <select v-model="agentDesc[selectedAgentName].flows.out[currency].criteria[kind].value"
+                                                <select v-model="selectedAgent.flows.out[currency].criteria[kind].value"
                                                         name="criteriaValueField">
                                                     <option :value="true">True</option>
                                                     <option :value="false">False</option>
@@ -1012,7 +1018,7 @@ export default {
                 <h3>Thresholds</h3>
                 <h4> Currencies </h4>
                 <ul>
-                    <li v-for="(value, currency) in agentDesc[selectedAgentName].thresholds">
+                    <li v-for="(value, currency) in selectedAgent.thresholds">
                         {{currency}}
                         (
                         <label>Change to:
@@ -1024,11 +1030,11 @@ export default {
                         <button @click="removeThreshold(currency)">Remove Currency</button>
                         <ul>
                             <li> Path:
-                                <input v-model="agentDesc[selectedAgentName].thresholds[currency].path"
+                                <input v-model="selectedAgent.thresholds[currency].path"
                                        name="thesholdPathField" type="text">
                             </li>
                             <li> Limit:
-                                <select v-model="agentDesc[selectedAgentName].thresholds[currency].limit"
+                                <select v-model="selectedAgent.thresholds[currency].limit"
                                         name="thresholdLimitField">
                                     <option value="&lt;"> &lt; </option>
                                     <option value="&equals;"> = </option>
@@ -1036,11 +1042,11 @@ export default {
                                 </select>
                             </li>
                             <li> Value:
-                                <input v-model="agentDesc[selectedAgentName].thresholds[currency].value"
+                                <input v-model="selectedAgent.thresholds[currency].value"
                                        name="thesholdValueField" type="number">
                             </li>
                             <li> Connnections:
-                                <input v-model="agentDesc[selectedAgentName].thresholds[currency].connections"
+                                <input v-model="selectedAgent.thresholds[currency].connections"
                                        name="connectionsThresholdsField" type="text">
                             </li>
                         </ul>
@@ -1077,7 +1083,7 @@ export default {
                 </ul>
                 <h3>Properties</h3>
                 <ul>
-                    <li v-for="(attributes, property) in agentDesc[selectedAgentName].properties">
+                    <li v-for="(attributes, property) in selectedAgent.properties">
                         {{property}} (Change to:
                         <input v-model="propertyNames[property]" name="propertyName" type="text">
                         <button @click="changePropertyName(property, attributes, propertyNames[property])">
@@ -1091,7 +1097,7 @@ export default {
                                 <button @click="changePropertyValue(property, changedPropVal)">Change Value</button>
                             </li>
                             <li>unit:
-                                <input v-model="agentDesc[selectedAgentName].properties[property].unit"
+                                <input v-model="selectedAgent.properties[property].unit"
                                        name="propUnit" type="text" col="15">
                             </li>
                         </ul>
@@ -1111,19 +1117,19 @@ export default {
                 <h2> Agent Details </h2>
                 <hr>
                 <ul>
-                    <li v-for="(value, key) in agentDesc[selectedAgentName]"> <b>{{key}}</b> :
+                    <li v-for="(value, key) in selectedAgent"> <b>{{key}}</b> :
                         <i v-if="typeof(value)!='object'">{{value}}</i>
                         <ul v-else>
-                            <li v-for="(subvalue, subkey) in agentDesc[selectedAgentName][key]">
+                            <li v-for="(subvalue, subkey) in selectedAgent[key]">
                                 <b>{{subkey}}</b> :
                                 <i v-if="typeof(subvalue)!='object'">{{subvalue}}</i>
                                 <ul v-else>
-                                    <li v-for="(subsubvalue, subsubkey) in agentDesc[selectedAgentName][key][subkey]">
+                                    <li v-for="(subsubvalue, subsubkey) in selectedAgent[key][subkey]">
                                         <b>{{subsubkey}}</b> :
                                         <i v-if="typeof(subsubvalue)!='object'">{{subsubvalue}}</i>
                                         <ul v-else>
                                             <li v-for="(subsubsubvalue, subsubsubkey)
-                                                in agentDesc[selectedAgentName][key][subkey][subsubkey]">
+                                                in selectedAgent[key][subkey][subsubkey]">
                                                 <b>{{subsubsubkey}}</b> :  {{subsubsubvalue}}
                                             </li>
                                         </ul>

From c5cde3a6bdfc2f74630928bbd325c020d88837c1 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sat, 11 May 2024 10:13:44 -0700
Subject: [PATCH 36/63] Fix linter errors in new selectedAgent()

---
 src/components/ace/ACE.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 5ba5f9a10..d6b7ae740 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -57,8 +57,8 @@ export default {
         }
     },
     computed: {
-        selectedAgent(){
-            return this.agentDesc[this.selectedAgentName];
+        selectedAgent() {
+            return this.agentDesc[this.selectedAgentName]
         },
         currencyTypes() {
             const listOfTypes = []

From c2f2b0e5ebcd7d6d9ecf96a366dbd0a7fc934b7b Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sat, 11 May 2024 10:17:24 -0700
Subject: [PATCH 37/63] Linter fix: Remove unused v-for index

---
 src/components/ace/ACE.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index d6b7ae740..b58dcb945 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -764,7 +764,7 @@ export default {
                                         ==='object'">
                                     (Click to remove)
                                     <button
-                                        v-for="(connection, index) in
+                                        v-for="(connection) in
                                             selectedAgent.flows.in[currency].connections"
                                         @click="removeFlowArrayItem('in', 'connections', currency, connection)">
                                         {{connection}}
@@ -781,7 +781,7 @@ export default {
                                     ==='object'">
                                     (Click to remove)
                                     <button
-                                        v-for="(weighted, index)
+                                        v-for="(weighted)
                                             in selectedAgent.flows.in[currency].weighted"
                                         @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
                                         {{weighted}}
@@ -861,7 +861,7 @@ export default {
                                     ==='object'">
                                     (Click to remove)
                                     <button
-                                        v-for="(connection, index)
+                                        v-for="(connection)
                                             in selectedAgent.flows.out[currency].connections"
                                         @click="removeFlowArrayItem('out', 'connections', currency, connection)">
                                         {{connection}}
@@ -877,7 +877,7 @@ export default {
                                 <span v-if="typeof(selectedAgent.flows.out[currency].weighted)
                                     ==='object'">
                                     (Click to remove)
-                                    <button v-for="(weighted, index) in
+                                    <button v-for="(weighted) in
                                                 selectedAgent.flows.out[currency].weighted"
                                             @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
                                         {{weighted}}
@@ -893,7 +893,7 @@ export default {
                                 <span v-if="typeof(selectedAgent.flows.out[currency].requires)
                                     ==='object'">
                                     (Click to remove)
-                                    <button v-for="(requires, index)
+                                    <button v-for="(requires)
                                                 in selectedAgent.flows.out[currency].requires"
                                             @click="removeFlowArrayItem('out',
                                                                         'requires',

From c2eaa6773d37a4494843683a4fb0d7c5642d95e6 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sat, 11 May 2024 11:56:31 -0700
Subject: [PATCH 38/63] Linter fix: add key to v-for

---
 src/components/ace/ACE.vue | 62 ++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index b58dcb945..f58d5798c 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -605,7 +605,8 @@ export default {
             <div class="scrollie agentBox">
                 <div id="buttonList">
                     <ul>
-                        <li v-for="currency in Object.keys(currencyDesc[currencyCategorySelected])">
+                        <li v-for="currency in Object.keys(currencyDesc[currencyCategorySelected])"
+                            :key="currency">
                             <button @click="selectCurrency(currency)">{{currency}}</button>
                         </li>
                     </ul>
@@ -680,7 +681,7 @@ export default {
             <div id="agentSelector" class="scrollie agentBox">
                 <h2> Agents ({{categorySelected}}): </h2>
                 <ul>
-                    <li v-for="item in agentsInClass">
+                    <li v-for="item in agentsInClass" :key="item">
                         <button @click="selectItem(item)">{{item}}</button>
                     </li>
                 </ul>
@@ -711,7 +712,7 @@ export default {
                 </ul>
                 <h3>Capacity</h3>
                 <ul>
-                    <li v-for="(value, key) in selectedAgent.capacity">
+                    <li v-for="(value, key) in selectedAgent.capacity" :key="key">
                         {{key}}
                         (Change to:
                         <input v-model="capacityTypes[key]" name="capType" type="text">
@@ -733,10 +734,10 @@ export default {
                 <h3>Flows</h3>
                 <h4>In Currencies</h4>
                 <ul> <!-- In currency ul -->
-                    <li v-for="(value, currency) in selectedAgent.flows.in">{{currency}}
+                    <li v-for="(value, currency) in selectedAgent.flows.in" :key="currency">{{currency}}
                         <label>(Change to:
                             <select v-model="inTypes[currency]" name="changeInFlowCurrency">
-                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                <option v-for="item in currencyList" :key="item" :value="item"> {{item}} </option>
                             </select>
                         </label>
                         <button @click="changeInType(currency, value, inTypes[currency])">Change</button>)
@@ -766,6 +767,7 @@ export default {
                                     <button
                                         v-for="(connection) in
                                             selectedAgent.flows.in[currency].connections"
+                                        :key="connection"
                                         @click="removeFlowArrayItem('in', 'connections', currency, connection)">
                                         {{connection}}
                                     </button>
@@ -783,6 +785,7 @@ export default {
                                     <button
                                         v-for="(weighted)
                                             in selectedAgent.flows.in[currency].weighted"
+                                        :key="weighted"
                                         @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
                                         {{weighted}}
                                     </button>
@@ -822,7 +825,10 @@ export default {
                     <li> <!-- NEW FLOW -->
                         <label>New In Flow:
                             <select v-model="newInType" name="newInFlowCurrencySelector">
-                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                <option v-for="item in currencyList"
+                                        :key="item" :value="item">
+                                    {{item}}
+                                </option>
                             </select>
                         </label>
                         <button @click="addNewFlow('in', newInType)">Add In Flow Currency</button>
@@ -830,11 +836,14 @@ export default {
                 </ul> <!-- In currency ul -->
                 <h4>Out Currencies</h4>
                 <ul> <!-- Out Currency ul -->
-                    <li v-for="(value, currency) in selectedAgent.flows.out"> {{currency}}
+                    <li v-for="(value, currency) in selectedAgent.flows.out" :key="currency">
+                        {{currency}}
                         (Change to:
                         <label>
                             <select v-model="outTypes[currency]" name="changeOutCurrencySelector">
-                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                <option v-for="item in currencyList" :key="item" :value="item">
+                                    {{item}}
+                                </option>
                             </select>
                         </label>
                         <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>)
@@ -863,6 +872,7 @@ export default {
                                     <button
                                         v-for="(connection)
                                             in selectedAgent.flows.out[currency].connections"
+                                        :key="connection"
                                         @click="removeFlowArrayItem('out', 'connections', currency, connection)">
                                         {{connection}}
                                     </button>
@@ -879,6 +889,7 @@ export default {
                                     (Click to remove)
                                     <button v-for="(weighted) in
                                                 selectedAgent.flows.out[currency].weighted"
+                                            :key="weighted"
                                             @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
                                         {{weighted}}
                                     </button>
@@ -895,6 +906,7 @@ export default {
                                     (Click to remove)
                                     <button v-for="(requires)
                                                 in selectedAgent.flows.out[currency].requires"
+                                            :key="requires"
                                             @click="removeFlowArrayItem('out',
                                                                         'requires',
                                                                         currency, requires)">
@@ -904,7 +916,9 @@ export default {
                                 </span>
                                 <label> (Currency)
                                     <select v-model="newRequires" name="requiresCurrencySelector">
-                                        <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                        <option v-for="item in currencyList" :key="item"
+                                                :value="item"> {{item}}
+                                        </option>
                                     </select>
                                 </label>
                                 <button @click="addFlowArrayItem('out', 'requires', currency, newRequires)">
@@ -914,7 +928,8 @@ export default {
                             <li> growth:
                                 <ul v-if="typeof(selectedAgent.flows.out[currency].growth)==='object'">
                                     <li v-for="(pattern, kind)
-                                        in selectedAgent.flows.out[currency].growth">
+                                            in selectedAgent.flows.out[currency].growth"
+                                        :key="kind">
                                         {{kind}}
                                         (Change to:
                                         <input v-model="kindTypes[kind]" name="kindTypeName" type="text">
@@ -948,7 +963,7 @@ export default {
                             <li> criteria:
                                 <ul v-if="typeof(selectedAgent.flows.out[currency].criteria)==='object'">
                                     <li v-for="(pattern, kind)
-                                        in selectedAgent.flows.out[currency].criteria">
+                                        in selectedAgent.flows.out[currency].criteria" :key="kind">
                                         {{kind}}
                                         (
                                         <label>Change to:
@@ -1009,7 +1024,9 @@ export default {
                         <label>
                             New Out Flow: (Change to:
                             <select v-model="newOutType" name="outFlowCurrencySelector">
-                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                <option v-for="item in currencyList" :key="item" :value="item">
+                                    {{item}}
+                                </option>
                             </select>
                         </label>
                         <button @click="addNewFlow('out',newOutType)">Add Out Flow Currency</button>
@@ -1018,12 +1035,14 @@ export default {
                 <h3>Thresholds</h3>
                 <h4> Currencies </h4>
                 <ul>
-                    <li v-for="(value, currency) in selectedAgent.thresholds">
+                    <li v-for="(value, currency) in selectedAgent.thresholds" :key="currency">
                         {{currency}}
                         (
                         <label>Change to:
                             <select v-model="thresholdTypes[currency]" name="changeThresholdCurrency">
-                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                <option v-for="item in currencyList" :key="item" :value="item">
+                                    {{item}}
+                                </option>
                             </select>
                         </label>
                         <button @click="changeThresholdType(currency, value, thresholdTypes[currency])">Change</button>)
@@ -1054,7 +1073,9 @@ export default {
                     <li> <!-- NEW FLOW -->
                         <label>New Currency:
                             <select v-model="newThresholdCurrency" name="newThresholdCurrency" selected="o2">
-                                <option v-for="item in currencyList" :value="item"> {{item}} </option>
+                                <option v-for="item in currencyList" :key="item" :value="item">
+                                    {{item}}
+                                </option>
                             </select>
                         </label>
                         <ul>
@@ -1083,7 +1104,7 @@ export default {
                 </ul>
                 <h3>Properties</h3>
                 <ul>
-                    <li v-for="(attributes, property) in selectedAgent.properties">
+                    <li v-for="(attributes, property) in selectedAgent.properties" :key="property">
                         {{property}} (Change to:
                         <input v-model="propertyNames[property]" name="propertyName" type="text">
                         <button @click="changePropertyName(property, attributes, propertyNames[property])">
@@ -1117,19 +1138,20 @@ export default {
                 <h2> Agent Details </h2>
                 <hr>
                 <ul>
-                    <li v-for="(value, key) in selectedAgent"> <b>{{key}}</b> :
+                    <li v-for="(value, key) in selectedAgent" :key="key">
+                        <b>{{key}}</b> :
                         <i v-if="typeof(value)!='object'">{{value}}</i>
                         <ul v-else>
-                            <li v-for="(subvalue, subkey) in selectedAgent[key]">
+                            <li v-for="(subvalue, subkey) in selectedAgent[key]" :key="subkey">
                                 <b>{{subkey}}</b> :
                                 <i v-if="typeof(subvalue)!='object'">{{subvalue}}</i>
                                 <ul v-else>
-                                    <li v-for="(subsubvalue, subsubkey) in selectedAgent[key][subkey]">
+                                    <li v-for="(subsubvalue, subsubkey) in selectedAgent[key][subkey]" :key="subsubkey">
                                         <b>{{subsubkey}}</b> :
                                         <i v-if="typeof(subsubvalue)!='object'">{{subsubvalue}}</i>
                                         <ul v-else>
                                             <li v-for="(subsubsubvalue, subsubsubkey)
-                                                in selectedAgent[key][subkey][subsubkey]">
+                                                in selectedAgent[key][subkey][subsubkey]" :key="subsubsubkey">
                                                 <b>{{subsubsubkey}}</b> :  {{subsubsubvalue}}
                                             </li>
                                         </ul>

From 7581d8291023d3c9d7cc40152eefae73de0495c7 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sat, 11 May 2024 12:24:29 -0700
Subject: [PATCH 39/63] Improve comments

---
 src/components/ace/ACE.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index f58d5798c..a250f2077 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -136,11 +136,12 @@ export default {
             let localStorageCurrencies = localStorage.getItem('customCurrencies')
             localStorageCurrencies = JSON.parse(localStorageCurrencies)
             if (typeof (localStorageCurrencies)==='object' && (localStorageCurrencies!==null)) {
+                /* Uncomment to print to the console the list of local storage currencies: */
                 // for(let category in localStorageCurrencies)
                 // console.log("Currencies found in local storage:")
                 // for (let currency in category) {
-                //  console.log(currency)
-                //  this.currencyDesc[category][currency] = localStorageCurrencies[currency]
+                //    console.log(currency)
+                //    this.currencyDesc[category][currency] = localStorageCurrencies[currency]
                 // }
                 if (
                     typeof (this.currencyDesc.custom)==='object'
@@ -166,9 +167,9 @@ export default {
                 // Retrieve agent desc  from the backend
                 console.log(`* Loading Currency Desc from backend *`)
                 const response = await axios.get('/get_currency_desc')
-                const currencyDesc = response.data.currency_desc
+                const currencyDesc = response.data.currency_desc // get the actual data out of the response object
                 console.log(currencyDesc)
-                return currencyDesc  // get the actual data out of the response object
+                return currencyDesc
             } catch (error) {
                 console.log('* Loading agent desc failed! *')
                 console.error(error)
@@ -186,7 +187,7 @@ export default {
                 for (let currencyIndex = 0;
                     currencyIndex<curranciesNamesOfType.length; currencyIndex+=1) {
                     const currencyName = curranciesNamesOfType[currencyIndex]
-                    // const currencyForList=this.currencyDesc[currentCurrencyCatName][currencyName]
+                    // The actual currency is at this.currencyDesc[currentCurrencyCatName][currencyName]
                     currancies.push(currencyName)
                 }
             }
@@ -291,6 +292,7 @@ export default {
             /* Check this again to verify with this workaround for lint */
                 newPropVal = +newPropVal
             }
+            // Convert true/false string to boolean
             if (newPropVal==='true') { newPropVal = true }
             if (newPropVal==='false') { newPropVal = false }
             this.selectedAgent.properties[property].value=newPropVal
@@ -1172,8 +1174,8 @@ export default {
 }
 .gridBox{
             display: grid;
-            grid-template-columns: 1fr 5fr; /* Three columns each 100px wide */
-            grid-gap: 10px; /* Gap between grid items */
+            grid-template-columns: 1fr 5fr;
+            grid-gap: 10px;
 }
 .scrollie {
     overflow-y: scroll !important;

From 735c9b9fae98caf0fa6dc6cce143b2a42276739b Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 6 Jun 2024 17:26:58 -0700
Subject: [PATCH 40/63] Improve comments

---
 src/components/configuration/Greenhouse.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/configuration/Greenhouse.vue b/src/components/configuration/Greenhouse.vue
index 75c50c587..51fbc527c 100644
--- a/src/components/configuration/Greenhouse.vue
+++ b/src/components/configuration/Greenhouse.vue
@@ -83,8 +83,8 @@ export default {
             // Initialize the localized variables used for v-model
             greenhouse: undefined,
             plantSpecies: undefined,
-            plantValue: [],
-            plantFormatted: [],
+            plantValue: [], // This list corresponds to the values for the list of config plants
+            plantFormatted: [], // The formatted list of plants to display in the user drop down
             plantMax: [],  // the max m2 for each plant species to fit in the greenhouse
             plant_selects: {},  // map index -> <select> for the plant type dropdown
             plant_inputs: {},  // map index -> <input> for the plant amount

From 4399d6b590e4c00898bced8de536bc21b2f0a8e1 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 6 Jun 2024 18:06:24 -0700
Subject: [PATCH 41/63] Add comments

---
 src/components/ace/ACE.vue                  | 4 ++++
 src/components/configuration/Greenhouse.vue | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index a250f2077..f4da06930 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -1,3 +1,7 @@
+/* This vue file creates a user interface allowing the creation of custom agents. It loads
+existing agents from the back end and makes it possible to duplicate or edit these agents. The
+custom agents are then stored in local storage in the browser, where they will be sent to the back
+when the user hits the 'Launch Simulation' button. */
 <script>
 import axios from 'axios'
 
diff --git a/src/components/configuration/Greenhouse.vue b/src/components/configuration/Greenhouse.vue
index 51fbc527c..8e78415c3 100644
--- a/src/components/configuration/Greenhouse.vue
+++ b/src/components/configuration/Greenhouse.vue
@@ -1,3 +1,6 @@
+/* This component establishes the user interface for configuring the greenhouse, including
+the list of plants, when the user is in the 'Simulation Configuration' area prior to pressing
+'Launch Simulation' button */
 <template>
     <div>
         <label v-if="simLocation === 'mars'" class="input-wrapper">
@@ -81,8 +84,8 @@ export default {
     data() {
         return {
             // Initialize the localized variables used for v-model
-            greenhouse: undefined,
-            plantSpecies: undefined,
+            greenhouse: undefined, // Used in the v-model for selection of greenhouse.type
+            plantSpecies: undefined, // Used in the v-model to specify sent plant data, including amount
             plantValue: [], // This list corresponds to the values for the list of config plants
             plantFormatted: [], // The formatted list of plants to display in the user drop down
             plantMax: [],  // the max m2 for each plant species to fit in the greenhouse

From d66764c6a7c851edfe5915e726bc8f2fb91520a6 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sun, 9 Jun 2024 18:12:33 -0700
Subject: [PATCH 42/63] Add instructions for Agent Editor

---
 src/components/ace/ACE.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index f4da06930..515bb5cbf 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -673,8 +673,14 @@ export default {
         </div> <!-- gridBox -->
     </div> <!-- vif currency object exists -->
     <div v-if="currentMode==='agent'">
-        <h2> Agent Editor.  Known Issues: Consistency.
-            Shared Change Memory. Select needs Title Attributes, ul has invalid elements </h2>
+        <h2> Agent Editor </h2>
+        <p> 
+        Supports custom plant agents. 
+        Make sure to add the corresponding 'out' flow currencies and biomass connection.
+        </p>
+        <p>
+        For other agent types, the agent editor is experimental or not fully implemented.
+        </p>
         <label for="categorySelector">Choose Agent Class:  </label>
         <select id="categorySelector" v-model="categorySelected">
             <option v-for="category in agentClasses" :key="category" :value="category">

From 96bf858e5a23e2a546c43c6304b560d5102e4a2b Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sun, 9 Jun 2024 18:15:47 -0700
Subject: [PATCH 43/63] Fixed Spacing for Linter

---
 src/components/ace/ACE.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 515bb5cbf..1b4850f70 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -674,12 +674,12 @@ export default {
     </div> <!-- vif currency object exists -->
     <div v-if="currentMode==='agent'">
         <h2> Agent Editor </h2>
-        <p> 
-        Supports custom plant agents. 
-        Make sure to add the corresponding 'out' flow currencies and biomass connection.
+        <p>
+            Supports custom plant agents. Make sure to add the corresponding 'out' flow currencies 
+            and biomass connection.
         </p>
         <p>
-        For other agent types, the agent editor is experimental or not fully implemented.
+            For other agent types, the agent editor is experimental or not fully implemented.
         </p>
         <label for="categorySelector">Choose Agent Class:  </label>
         <select id="categorySelector" v-model="categorySelected">

From 30a0dad15478e620f8cc42f7e978c9005d83d6cc Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sun, 9 Jun 2024 18:17:07 -0700
Subject: [PATCH 44/63] Fixed Spacing for Linter

---
 src/components/ace/ACE.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 1b4850f70..2c3a949c6 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -675,7 +675,7 @@ export default {
     <div v-if="currentMode==='agent'">
         <h2> Agent Editor </h2>
         <p>
-            Supports custom plant agents. Make sure to add the corresponding 'out' flow currencies 
+            Supports custom plant agents. Make sure to add the corresponding 'out' flow currencies
             and biomass connection.
         </p>
         <p>

From d5b0c8bdd49eb02f3bede09ab8a00850e8133fb9 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 24 Jun 2024 13:25:10 -0700
Subject: [PATCH 45/63] Refactor exportJSON() to remove repeated code

---
 src/components/ace/ACE.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 2c3a949c6..9937486de 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -526,12 +526,13 @@ export default {
             this.customAgents[agentName] = this.selectedAgent
             let currentCustomAgents=localStorage.getItem('customAgents')
             currentCustomAgents=JSON.parse(currentCustomAgents)
-            if (typeof (currentCustomAgents)==='object' && (currentCustomAgents!==null)) {
-                currentCustomAgents[agentName] = this.customAgents[agentName]
-            } else {
+            // If there isn't a custom agent object, create it.
+            if (!(typeof (currentCustomAgents)==='object' && (currentCustomAgents!==null))) {
                 currentCustomAgents = {}
-                currentCustomAgents[agentName] = this.customAgents[agentName]
             }
+            // Add this agent to the custom agents object.
+            currentCustomAgents[agentName] = this.customAgents[agentName]
+            // Save to the local browser storage
             localStorage.setItem('customAgents', JSON.stringify(currentCustomAgents))
             // If plant, export currency for it, too
             if (this.categorySelected==='plants') {

From ed39f1cb098c993dfbfebe917093e0c7ae26efd6 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 1 Jul 2024 00:58:35 -0700
Subject: [PATCH 46/63] Improve ACE UI with Nesting / Blank Entry Fix

---
 src/components/ace/ACE.vue | 970 ++++++++++++++++++++-----------------
 1 file changed, 531 insertions(+), 439 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 9937486de..00b5fcb30 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -64,6 +64,9 @@ export default {
         selectedAgent() {
             return this.agentDesc[this.selectedAgentName]
         },
+        agentOutFlow() {
+            return this.selectedAgent.flows.out
+        },
         currencyTypes() {
             const listOfTypes = []
             /* Determine list of type */
@@ -237,7 +240,7 @@ export default {
             delete this.selectedAgent.flows.in[currency]
         },
         removeOutFlow(currency) {
-            delete this.selectedAgent.flows.out[currency]
+            delete this.agentOutFlow[currency]
         },
         removeThreshold(currency) {
             delete this.selectedAgent.thresholds[currency]
@@ -251,20 +254,20 @@ export default {
         },
         removeGrowth(currency, kind) {
             // Delete the specific kind of growth
-            delete this.selectedAgent.flows.out[currency].growth[kind]
+            delete this.agentOutFlow[currency].growth[kind]
             // Remove the growth object if there are no growths in it.
-            const flowGrowth = this.selectedAgent.flows.out[currency].growth
+            const flowGrowth = this.agentOutFlow[currency].growth
             if (Object.keys(flowGrowth).length === 0) {
-                delete this.selectedAgent.flows.out[currency].growth
+                delete this.agentOutFlow[currency].growth
             }
         },
         removeCriterion(currency, kind) {
             // Delete the specific kind of criterion
-            delete this.selectedAgent.flows.out[currency].criteria[kind]
+            delete this.agentOutFlow[currency].criteria[kind]
             // Remove the criteria object if there are no growths in it.
-            const thisCriteria = this.selectedAgent.flows.out[currency].criteria
+            const thisCriteria = this.agentOutFlow[currency].criteria
             if (Object.keys(thisCriteria).length === 0) {
-                delete this.selectedAgent.flows.out[currency].criteria
+                delete this.agentOutFlow[currency].criteria
             }
         },
         removeFlowArrayItem(direction, type, currency, name) {
@@ -348,32 +351,60 @@ export default {
             this.generateCurrencyList()
         },
         changeType(key, value, newName) {
-            this.selectedAgent.capacity[newName]=value
-            delete this.selectedAgent.capacity[key]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.selectedAgent.capacity[newName]=value
+                delete this.selectedAgent.capacity[key]
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         changeInType(key, value, newName) {
-            this.selectedAgent.flows.in[newName]=value
-            delete this.selectedAgent.flows.in[key]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.selectedAgent.flows.in[newName]=value // Set item at new location
+                delete this.selectedAgent.flows.in[key] // Remove item from old location
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         changeOutType(key, value, newName) {
-            this.selectedAgent.flows.out[newName]=value
-            delete this.selectedAgent.flows.out[key]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.agentOutFlow[newName]=value
+                delete this.agentOutFlow[key]
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         changeThresholdType(key, value, newName) {
-            this.selectedAgent.thresholds[newName]=value
-            delete this.selectedAgent.thresholds[key]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.selectedAgent.thresholds[newName]=value
+                delete this.selectedAgent.thresholds[key]
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         changePropertyName(key, value, newName) {
-            this.selectedAgent.properties[newName]=value
-            delete this.selectedAgent.properties[key]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.selectedAgent.properties[newName]=value
+                delete this.selectedAgent.properties[key]
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         changeGrowthType(kind, value, newName, key) {
-            this.selectedAgent.flows.out[key].growth[newName]=value
-            delete this.selectedAgent.flows.out[key].growth[kind]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.agentOutFlow[key].growth[newName]=value
+                delete this.agentOutFlow[key].growth[kind]
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         changeCriterionType(kind, value, newName, key) {
-            this.selectedAgent.flows.out[key].criteria[newName]=value
-            delete this.selectedAgent.flows.out[key].criteria[kind]
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                this.agentOutFlow[key].criteria[newName]=value
+                delete this.agentOutFlow[key].criteria[kind]
+            } else {
+                console.log('Cannot change to type without label')
+            }
         },
         addNewCapacity(key, value) {
             // Add the capacity object if it doesn't exist
@@ -587,7 +618,7 @@ export default {
             }
         },
         getCriteriaValueModel(currency, kind) { // Function to limit line length in Vue
-            return this.selectedAgent.flows.out[currency].criteria[kind].value
+            return this.agentOutFlow[currency].criteria[kind].value
         },
     },
 }
@@ -723,432 +754,477 @@ export default {
                                   name="descriptionField" rows="4" cols="100" />
                     </li>
                 </ul>
-                <h3>Capacity</h3>
-                <ul>
-                    <li v-for="(value, key) in selectedAgent.capacity" :key="key">
-                        {{key}}
-                        (Change to:
-                        <input v-model="capacityTypes[key]" name="capType" type="text">
-                        <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
-                        :::::
-                        Quantity:
-                        <input v-model="selectedAgent.capacity[key]" name="capVal" type="number">
-                        <button @click="removeCapacity(key)">Remove Capacity</button>
-                    </li>
-                    <li>
-                        New Capacity:
-                        <input v-model="newCapacityType" name="newCapType" type="text">
-                        :::::
-                        Quantity:
-                        <input v-model="newCapacityValue" name="newCapVal" type="number">
-                        <button @click="addNewCapacity(newCapacityType, newCapacityValue)">Add Capacity</button>
-                    </li>
-                </ul>
-                <h3>Flows</h3>
-                <h4>In Currencies</h4>
-                <ul> <!-- In currency ul -->
-                    <li v-for="(value, currency) in selectedAgent.flows.in" :key="currency">{{currency}}
-                        <label>(Change to:
-                            <select v-model="inTypes[currency]" name="changeInFlowCurrency">
-                                <option v-for="item in currencyList" :key="item" :value="item"> {{item}} </option>
-                            </select>
-                        </label>
-                        <button @click="changeInType(currency, value, inTypes[currency])">Change</button>)
-                        <button @click="removeInFlow(currency)">Remove</button>
-                        <ul>
-                            <li> Value:
-                                <input v-model="selectedAgent.flows.in[currency].value"
-                                       name="flowValueFieldIn" type="number">
-                            </li>
-                            <li> flow_rate:
-                                <ul>
-                                    <li>Unit:
-                                        <input v-model="selectedAgent.flows.in[currency].flow_rate.unit"
-                                               name="flowInUnit" type="text">
-                                    </li>
-                                    <li>Time:
-                                        <input v-model="selectedAgent.flows.in[currency].flow_rate.time"
-                                               name="flowInTime" type="text">
-                                    </li>
-                                </ul>
-                            </li>
-                            <li> connections :
-                                <span
-                                    v-if="typeof(selectedAgent.flows.in[currency].connections)
-                                        ==='object'">
-                                    (Click to remove)
-                                    <button
-                                        v-for="(connection) in
-                                            selectedAgent.flows.in[currency].connections"
-                                        :key="connection"
-                                        @click="removeFlowArrayItem('in', 'connections', currency, connection)">
-                                        {{connection}}
-                                    </button>
-                                    <br>
-                                </span>
-                                <input v-model="newConnectionIn" name="connectionNewName" type="text">
-                                <button @click="addFlowArrayItem('in', 'connections', currency, newConnectionIn)">
-                                    Add new Connection
-                                </button>
-                            </li>
-                            <li> weighted:
-                                <span v-if="typeof(selectedAgent.flows.in[currency].weighted)
-                                    ==='object'">
-                                    (Click to remove)
-                                    <button
-                                        v-for="(weighted)
-                                            in selectedAgent.flows.in[currency].weighted"
-                                        :key="weighted"
-                                        @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
-                                        {{weighted}}
-                                    </button>
-                                    <br>
-                                </span>
-                                <input v-model="newWeightedIn" name="newWeighted" type="text">
-                                <button @click="addFlowArrayItem('in', 'weighted', currency, newWeightedIn)">
-                                    Add new Weighted
-                                </button>
-                            </li>
-                            <li> deprive:
-                                <ul v-if="typeof(selectedAgent.flows.in[currency].deprive)==='object'">
-                                    <button @click="removeDeprive(currency)">Remove Deprive</button>
-                                    <li>Value:
-                                        <input v-model="selectedAgent.flows.in[currency].deprive.value"
-                                               name="depriveValue" type="number">
-                                    </li>
-                                    <li>Unit:
-                                        <input v-model="selectedAgent.flows.in[currency].deprive.unit"
-                                               name="depriveUnit" type="text">
-                                    </li>
-                                </ul>
-                                <ul v-else>
-                                    <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">
-                                        Add Deprive
-                                    </button>
-                                    <li>Value:
-                                        <input v-model="newDepriveValue" name="newDepriveName" type="number">
-                                    </li>
-                                    <li>Unit:
-                                        <input v-model="newDepriveUnit" name="newDepriveUnit" type="text">
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </li>
-                    <li> <!-- NEW FLOW -->
-                        <label>New In Flow:
-                            <select v-model="newInType" name="newInFlowCurrencySelector">
-                                <option v-for="item in currencyList"
-                                        :key="item" :value="item">
-                                    {{item}}
-                                </option>
-                            </select>
-                        </label>
-                        <button @click="addNewFlow('in', newInType)">Add In Flow Currency</button>
-                    </li>
-                </ul> <!-- In currency ul -->
-                <h4>Out Currencies</h4>
-                <ul> <!-- Out Currency ul -->
-                    <li v-for="(value, currency) in selectedAgent.flows.out" :key="currency">
-                        {{currency}}
-                        (Change to:
-                        <label>
-                            <select v-model="outTypes[currency]" name="changeOutCurrencySelector">
-                                <option v-for="item in currencyList" :key="item" :value="item">
-                                    {{item}}
-                                </option>
-                            </select>
-                        </label>
-                        <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>)
-                        <button @click="removeOutFlow(currency)">Remove</button>
-                        <ul> <!-- Out currency -->
-                            <li> Value:
-                                <input v-model="selectedAgent.flows.out[currency].value"
-                                       name="flowValueOut" type="number">
-                            </li>
-                            <li> flow_rate:
-                                <ul>
-                                    <li>Unit:
-                                        <input v-model="selectedAgent.flows.out[currency].flow_rate.unit"
-                                               name="flowUnitOut" type="text">
-                                    </li>
-                                    <li>Time:
-                                        <input v-model="selectedAgent.flows.out[currency].flow_rate.time"
-                                               name="flowTimeOut" type="text">
-                                    </li>
-                                </ul>
-                            </li>
-                            <li> connections:
-                                <span v-if="typeof(selectedAgent.flows.out[currency].connections)
-                                    ==='object'">
-                                    (Click to remove)
-                                    <button
-                                        v-for="(connection)
-                                            in selectedAgent.flows.out[currency].connections"
-                                        :key="connection"
-                                        @click="removeFlowArrayItem('out', 'connections', currency, connection)">
-                                        {{connection}}
-                                    </button>
-                                    <br>
-                                </span>
-                                <input v-model="newConnectionOut" name="addNewConnectName" type="text">
-                                <button @click="addFlowArrayItem('out', 'connections', currency, newConnectionOut)">
-                                    Add new Connection
-                                </button>
-                            </li>
-                            <li> weighted:
-                                <span v-if="typeof(selectedAgent.flows.out[currency].weighted)
-                                    ==='object'">
-                                    (Click to remove)
-                                    <button v-for="(weighted) in
-                                                selectedAgent.flows.out[currency].weighted"
-                                            :key="weighted"
-                                            @click="removeFlowArrayItem('out', 'weighted', currency, weighted)">
-                                        {{weighted}}
-                                    </button>
-                                    <br>
-                                </span>
-                                <input v-model="newWeightedOut" name="addNewWeightedNameOut" type="text">
-                                <button @click="addFlowArrayItem('out', 'weighted', currency, newWeightedOut)">
-                                    Add new Weighted
-                                </button>
+                <details>
+                    <summary>Capacity</summary>
+                    <ul>
+                        <li v-for="(value, key) in selectedAgent.capacity" :key="key">
+                            {{key}}
+                            (Change to:
+                            <input v-model="capacityTypes[key]" name="capType" type="text">
+                            <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
+                            :::::
+                            Quantity:
+                            <input v-model="selectedAgent.capacity[key]" name="capVal" type="number">
+                            <button @click="removeCapacity(key)">Remove Capacity</button>
+                        </li>
+                        <li>
+                            New Capacity:
+                            <input v-model="newCapacityType" name="newCapType" type="text">
+                            :::::
+                            Quantity:
+                            <input v-model="newCapacityValue" name="newCapVal" type="number">
+                            <button @click="addNewCapacity(newCapacityType, newCapacityValue)">Add Capacity</button>
+                        </li>
+                    </ul>
+                </details> <!-- END OF CAPACITY -->
+                <details>
+                    <summary>Flows</summary>
+                    <details>
+                        <summary>In Currencies</summary>
+                        <ul> <!-- In currency ul -->
+                            <li v-for="(value, currency) in selectedAgent.flows.in" :key="currency">
+                                <details>
+                                    <summary>{{currency}}
+                                        <button @click="removeInFlow(currency)">Remove In Flow Currency</button>
+                                    </summary>
+                                    <label>Change currency to:
+                                        <select v-model="inTypes[currency]" name="changeInFlowCurrency">
+                                            <option v-for="item in currencyList" :key="item" :value="item">
+                                                {{item}}
+                                            </option>
+                                        </select>
+                                    </label>
+                                    <button @click="changeInType(currency, value, inTypes[currency])">Change</button>
+                                    <ul>
+                                        <li> Value:
+                                            <input v-model="selectedAgent.flows.in[currency].value"
+                                                   name="flowValueFieldIn" type="number">
+                                        </li>
+                                        <li> flow_rate:
+                                            <ul>
+                                                <li>Unit:
+                                                    <input v-model="selectedAgent.flows.in[currency].flow_rate.unit"
+                                                           name="flowInUnit" type="text">
+                                                </li>
+                                                <li>Time:
+                                                    <input v-model="selectedAgent.flows.in[currency].flow_rate.time"
+                                                           name="flowInTime" type="text">
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li> connections :
+                                            <span
+                                                v-if="typeof(selectedAgent.flows.in[currency].connections)
+                                                    ==='object'">
+                                                (Click to remove)
+                                                <button
+                                                    v-for="(connection) in
+                                                        selectedAgent.flows.in[currency].connections"
+                                                    :key="connection"
+                                                    @click="removeFlowArrayItem(
+                                                        'in', 'connections',
+                                                        currency, connection)">
+                                                    {{connection}}
+                                                </button>
+                                                <br>
+                                            </span>
+                                            <input v-model="newConnectionIn" name="connectionNewName" type="text">
+                                            <button @click="addFlowArrayItem(
+                                                'in', 'connections', currency, newConnectionIn)">
+                                                Add new Connection
+                                            </button>
+                                        </li>
+                                        <li> weighted:
+                                            <span v-if="typeof(selectedAgent.flows.in[currency].weighted)
+                                                ==='object'">
+                                                (Click to remove)
+                                                <button
+                                                    v-for="(weighted)
+                                                        in selectedAgent.flows.in[currency].weighted"
+                                                    :key="weighted"
+                                                    @click="removeFlowArrayItem('in', 'weighted', currency, weighted)">
+                                                    {{weighted}}
+                                                </button>
+                                                <br>
+                                            </span>
+                                            <input v-model="newWeightedIn" name="newWeighted" type="text">
+                                            <button @click="addFlowArrayItem(
+                                                'in', 'weighted', currency, newWeightedIn)">
+                                                Add new Weighted
+                                            </button>
+                                        </li>
+                                        <li> deprive:
+                                            <ul v-if="typeof(selectedAgent.flows.in[currency].deprive)==='object'">
+                                                <button @click="removeDeprive(currency)">
+                                                    Disable Deprive [Currently Enabled]
+                                                </button>
+                                                <li>Value:
+                                                    <input v-model="selectedAgent.flows.in[currency].deprive.value"
+                                                           name="depriveValue" type="number">
+                                                </li>
+                                                <li>Unit:
+                                                    <input v-model="selectedAgent.flows.in[currency].deprive.unit"
+                                                           name="depriveUnit" type="text">
+                                                </li>
+                                            </ul>
+                                            <ul v-else>
+                                                <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">
+                                                    Turn Deprive On [Currently Disabled]
+                                                </button>
+                                                <li>Value:
+                                                    <input v-model="newDepriveValue"
+                                                           name="newDepriveName" type="number">
+                                                </li>
+                                                <li>Unit:
+                                                    <input v-model="newDepriveUnit" name="newDepriveUnit" type="text">
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </details>
                             </li>
-                            <li> requires :
-                                <span v-if="typeof(selectedAgent.flows.out[currency].requires)
-                                    ==='object'">
-                                    (Click to remove)
-                                    <button v-for="(requires)
-                                                in selectedAgent.flows.out[currency].requires"
-                                            :key="requires"
-                                            @click="removeFlowArrayItem('out',
-                                                                        'requires',
-                                                                        currency, requires)">
-                                        {{requires}}
-                                    </button>
-                                    <br>
-                                </span>
-                                <label> (Currency)
-                                    <select v-model="newRequires" name="requiresCurrencySelector">
-                                        <option v-for="item in currencyList" :key="item"
-                                                :value="item"> {{item}}
+                            <li> <!-- NEW FLOW -->
+                                <label>New In Flow:
+                                    <select v-model="newInType" name="newInFlowCurrencySelector">
+                                        <option v-for="item in currencyList"
+                                                :key="item" :value="item">
+                                            {{item}}
                                         </option>
                                     </select>
                                 </label>
-                                <button @click="addFlowArrayItem('out', 'requires', currency, newRequires)">
-                                    Add new Requires
-                                </button>
+                                <button @click="addNewFlow('in', newInType)">Add In Flow Currency</button>
                             </li>
-                            <li> growth:
-                                <ul v-if="typeof(selectedAgent.flows.out[currency].growth)==='object'">
-                                    <li v-for="(pattern, kind)
-                                            in selectedAgent.flows.out[currency].growth"
-                                        :key="kind">
-                                        {{kind}}
-                                        (Change to:
-                                        <input v-model="kindTypes[kind]" name="kindTypeName" type="text">
-                                        <button @click="changeGrowthType(kind, pattern, kindTypes[kind], currency)">
-                                            Change
-                                        </button>)
-                                        <button @click="removeGrowth(currency, kind)">Remove Growth</button>
-                                        :::::
-                                        <ul>
-                                            <li> Type:
-                                                <input
-                                                    v-model="selectedAgent.flows.out[currency].growth[kind].type"
-                                                    name="growthTypeField" type="text">
-                                            </li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                                <label>
-                                    New Growth Kind:
-                                    <input v-model="newGrowthKind" name="newGrowthKind" type="text">
-                                </label>
-                                <ul>
-                                    <li> Type:
-                                        <input v-model="newGrowthPattern" name="newGrowthPatternTypeField" type="text">
-                                    </li>
-                                </ul>
-                                <button @click="addGrowth(currency, newGrowthKind, newGrowthPattern)">
-                                    Add Growth
-                                </button>
-                            </li>
-                            <li> criteria:
-                                <ul v-if="typeof(selectedAgent.flows.out[currency].criteria)==='object'">
-                                    <li v-for="(pattern, kind)
-                                        in selectedAgent.flows.out[currency].criteria" :key="kind">
-                                        {{kind}}
-                                        (
-                                        <label>Change to:
-                                            <input v-model="kindTypes[kind]" name="kindTypeCriteria" type="text">
-                                        </label>
-                                        <button @click="changeCriterionType(kind, pattern, kindTypes[kind], currency)">
-                                            Change
-                                        </button>)
-                                        <button @click="removeCriterion(currency, kind)">Remove Criterion</button>
-                                        :::::
-                                        <ul>
-                                            <li> Limit:
-                                                <select v-model="selectedAgent.flows.out[currency].criteria[kind].limit"
-                                                        name="criteriaLimitField">
-                                                    <option value="&lt;"> &lt; </option>
-                                                    <option value="&equals;"> = </option>
-                                                    <option value="&gt;"> &gt; </option>
-                                                </select>
-                                            </li>
-                                            <li> Value:
-                                                <select v-model="selectedAgent.flows.out[currency].criteria[kind].value"
-                                                        name="criteriaValueField">
-                                                    <option :value="true">True</option>
-                                                    <option :value="false">False</option>
-                                                </select>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                                <ul>
-                                    <li>
-                                        <input v-model="newCriterionName" name="newCriterionNameField" type="text">
-                                        <button @click="addNewCriterion(currency, newCriterionName, newCriterionValue,
-                                                                        newCriterionLimit)">
-                                            Add new Criterion
+                        </ul> <!-- In currency ul -->
+                    </details> <!-- END in currency -->
+                    <details>
+                        <summary>Out Currencies</summary>
+                        <ul> <!-- Out Currency ul -->
+                            <li v-for="(value, currency) in agentOutFlow" :key="currency">
+                                <details>
+                                    <summary>
+                                        {{currency}}
+                                        <button @click="removeOutFlow(currency)">
+                                            Remove Out Flow Currency
                                         </button>
-                                        <ul>
-                                            <li> Limit:
-                                                <select v-model="newCriterionLimit" name="criterionLimitFieldNew">
-                                                    <option value="&lt;"> &lt; </option>
-                                                    <option value="&equals;"> = </option>
-                                                    <option value="&gt;"> &gt; </option>
-                                                </select>
-                                            </li>
-                                            <li> Value:
-                                                <select v-model="newCriterionValue" name="criterionValueFieldNew">
-                                                    <option :value="true">True</option>
-                                                    <option :value="false">False</option>
+                                    </summary>
+                                    Change currency to:
+                                    <label>
+                                        <select v-model="outTypes[currency]" name="changeOutCurrencySelector">
+                                            <option v-for="item in currencyList" :key="item" :value="item">
+                                                {{item}}
+                                            </option>
+                                        </select>
+                                    </label>
+                                    <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>
+
+                                    <ul> <!-- Out currency -->
+                                        <li> Value:
+                                            <input v-model="agentOutFlow[currency].value"
+                                                   name="flowValueOut" type="number">
+                                        </li>
+                                        <li> flow_rate:
+                                            <ul>
+                                                <li>Unit:
+                                                    <input v-model="agentOutFlow[currency].flow_rate.unit"
+                                                           name="flowUnitOut" type="text">
+                                                </li>
+                                                <li>Time:
+                                                    <input v-model="agentOutFlow[currency].flow_rate.time"
+                                                           name="flowTimeOut" type="text">
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li> connections:
+                                            <span v-if="typeof(agentOutFlow[currency].connections)
+                                                ==='object'">
+                                                (Click to remove)
+                                                <button
+                                                    v-for="(connection)
+                                                        in agentOutFlow[currency].connections"
+                                                    :key="connection"
+                                                    @click="removeFlowArrayItem(
+                                                        'out', 'connections', currency, connection)">
+                                                    {{connection}}
+                                                </button>
+                                                <br>
+                                            </span>
+                                            <input v-model="newConnectionOut" name="addNewConnectName" type="text">
+                                            <button @click="addFlowArrayItem(
+                                                'out', 'connections', currency, newConnectionOut)">
+                                                Add new Connection
+                                            </button>
+                                        </li>
+                                        <li> weighted:
+                                            <span v-if="typeof(agentOutFlow[currency].weighted)
+                                                ==='object'">
+                                                (Click to remove)
+                                                <button v-for="(weighted) in
+                                                            agentOutFlow[currency].weighted"
+                                                        :key="weighted"
+                                                        @click="removeFlowArrayItem(
+                                                            'out', 'weighted', currency, weighted)">
+                                                    {{weighted}}
+                                                </button>
+                                                <br>
+                                            </span>
+                                            <input v-model="newWeightedOut" name="addNewWeightedNameOut" type="text">
+                                            <button @click="addFlowArrayItem(
+                                                'out', 'weighted', currency, newWeightedOut)">
+                                                Add new Weighted
+                                            </button>
+                                        </li>
+                                        <li> requires :
+                                            <span v-if="typeof(agentOutFlow[currency].requires)
+                                                ==='object'">
+                                                (Click to remove)
+                                                <button v-for="(requires)
+                                                            in agentOutFlow[currency].requires"
+                                                        :key="requires"
+                                                        @click="removeFlowArrayItem('out',
+                                                                                    'requires',
+                                                                                    currency, requires)">
+                                                    {{requires}}
+                                                </button>
+                                                <br>
+                                            </span>
+                                            <label> (Currency)
+                                                <select v-model="newRequires" name="requiresCurrencySelector">
+                                                    <option v-for="item in currencyList" :key="item"
+                                                            :value="item"> {{item}}
+                                                    </option>
                                                 </select>
-                                            </li>
-                                        </ul>
-                                    </li> <!-- Criterion Item -->
-                                </ul>
-                            </li> <!-- Criteria -->
-                        </ul> <!-- Out currency -->
-                    </li>
-                    <li> <!-- NEW FLOW -->
-                        <label>
-                            New Out Flow: (Change to:
-                            <select v-model="newOutType" name="outFlowCurrencySelector">
-                                <option v-for="item in currencyList" :key="item" :value="item">
-                                    {{item}}
-                                </option>
-                            </select>
-                        </label>
-                        <button @click="addNewFlow('out',newOutType)">Add Out Flow Currency</button>
-                    </li>
-                </ul> <!-- Out Currency ul -->
-                <h3>Thresholds</h3>
-                <h4> Currencies </h4>
-                <ul>
-                    <li v-for="(value, currency) in selectedAgent.thresholds" :key="currency">
-                        {{currency}}
-                        (
-                        <label>Change to:
-                            <select v-model="thresholdTypes[currency]" name="changeThresholdCurrency">
-                                <option v-for="item in currencyList" :key="item" :value="item">
-                                    {{item}}
-                                </option>
-                            </select>
-                        </label>
-                        <button @click="changeThresholdType(currency, value, thresholdTypes[currency])">Change</button>)
-                        <button @click="removeThreshold(currency)">Remove Currency</button>
-                        <ul>
-                            <li> Path:
-                                <input v-model="selectedAgent.thresholds[currency].path"
-                                       name="thesholdPathField" type="text">
-                            </li>
-                            <li> Limit:
-                                <select v-model="selectedAgent.thresholds[currency].limit"
-                                        name="thresholdLimitField">
-                                    <option value="&lt;"> &lt; </option>
-                                    <option value="&equals;"> = </option>
-                                    <option value="&gt;"> &gt; </option>
-                                </select>
-                            </li>
-                            <li> Value:
-                                <input v-model="selectedAgent.thresholds[currency].value"
-                                       name="thesholdValueField" type="number">
+                                            </label>
+                                            <button @click="addFlowArrayItem('out', 'requires', currency, newRequires)">
+                                                Add new Requires
+                                            </button>
+                                        </li>
+                                        <li> growth:
+                                            <ul v-if="typeof(agentOutFlow[currency].growth)==='object'">
+                                                <li v-for="(pattern, kind)
+                                                        in agentOutFlow[currency].growth"
+                                                    :key="kind">
+                                                    {{kind}}
+                                                    (Change to:
+                                                    <input v-model="kindTypes[kind]" name="kindTypeName" type="text">
+                                                    <button @click="changeGrowthType(
+                                                        kind, pattern, kindTypes[kind], currency)">
+                                                        Change
+                                                    </button>)
+                                                    <button @click="removeGrowth(currency, kind)">Remove Growth</button>
+                                                    :::::
+                                                    <ul>
+                                                        <li> Type:
+                                                            <input
+                                                                v-model="agentOutFlow[currency].growth[kind].type"
+                                                                name="growthTypeField" type="text">
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                            <label>
+                                                New Growth Kind:
+                                                <input v-model="newGrowthKind" name="newGrowthKind" type="text">
+                                            </label>
+                                            <ul>
+                                                <li> Type:
+                                                    <input v-model="newGrowthPattern" name="newGrowthPatternTypeField"
+                                                           type="text">
+                                                </li>
+                                            </ul>
+                                            <button @click="addGrowth(currency, newGrowthKind, newGrowthPattern)">
+                                                Add Growth
+                                            </button>
+                                        </li>
+                                        <li> criteria:
+                                            <ul v-if="typeof(agentOutFlow[currency].criteria)==='object'">
+                                                <li v-for="(pattern, kind)
+                                                    in agentOutFlow[currency].criteria" :key="kind">
+                                                    {{kind}}
+                                                    (
+                                                    <label>Change to:
+                                                        <input v-model="kindTypes[kind]" name="kindTypeCriteria"
+                                                               type="text">
+                                                    </label>
+                                                    <button @click="changeCriterionType(
+                                                        kind, pattern, kindTypes[kind], currency)">
+                                                        Change
+                                                    </button>)
+                                                    <button @click="removeCriterion(currency, kind)">
+                                                        Remove Criterion
+                                                    </button>
+                                                    :::::
+                                                    <ul>
+                                                        <li> Limit:
+                                                            <select
+                                                                v-model="agentOutFlow[currency].criteria[kind].limit"
+                                                                name="criteriaLimitField">
+                                                                <option value="&lt;"> &lt; </option>
+                                                                <option value="&equals;"> = </option>
+                                                                <option value="&gt;"> &gt; </option>
+                                                            </select>
+                                                        </li>
+                                                        <li> Value:
+                                                            <select
+                                                                v-model="agentOutFlow[currency].criteria[kind].value"
+                                                                name="criteriaValueField">
+                                                                <option :value="true">True</option>
+                                                                <option :value="false">False</option>
+                                                            </select>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                            <ul>
+                                                <li>
+                                                    <input v-model="newCriterionName" name="newCriterionNameField"
+                                                           type="text">
+                                                    <button @click="addNewCriterion(currency, newCriterionName,
+                                                                                    newCriterionValue,
+                                                                                    newCriterionLimit)">
+                                                        Add new Criterion
+                                                    </button>
+                                                    <ul>
+                                                        <li> Limit:
+                                                            <select v-model="newCriterionLimit"
+                                                                    name="criterionLimitFieldNew">
+                                                                <option value="&lt;"> &lt; </option>
+                                                                <option value="&equals;"> = </option>
+                                                                <option value="&gt;"> &gt; </option>
+                                                            </select>
+                                                        </li>
+                                                        <li> Value:
+                                                            <select v-model="newCriterionValue"
+                                                                    name="criterionValueFieldNew">
+                                                                <option :value="true">True</option>
+                                                                <option :value="false">False</option>
+                                                            </select>
+                                                        </li>
+                                                    </ul>
+                                                </li> <!-- Criterion Item -->
+                                            </ul>
+                                        </li> <!-- Criteria -->
+                                    </ul> <!-- Out currency -->
+                                </details>
                             </li>
-                            <li> Connnections:
-                                <input v-model="selectedAgent.thresholds[currency].connections"
-                                       name="connectionsThresholdsField" type="text">
-                            </li>
-                        </ul>
-                    </li>
-                    <li> <!-- NEW FLOW -->
-                        <label>New Currency:
-                            <select v-model="newThresholdCurrency" name="newThresholdCurrency" selected="o2">
-                                <option v-for="item in currencyList" :key="item" :value="item">
-                                    {{item}}
-                                </option>
-                            </select>
-                        </label>
-                        <ul>
-                            <li> Path:  <input v-model="newThresholdPath" name="newThresholdPathField" type="text">
+                            <li> <!-- NEW FLOW -->
+                                <label>
+                                    New Out Flow: (Change to:
+                                    <select v-model="newOutType" name="outFlowCurrencySelector">
+                                        <option v-for="item in currencyList" :key="item" :value="item">
+                                            {{item}}
+                                        </option>
+                                    </select>
+                                </label>
+                                <button @click="addNewFlow('out',newOutType)">Add Out Flow Currency</button>
                             </li>
-                            <li> Limit:
-                                <select v-model="newThresholdLimit" name="thresholdLimitFieldNew">
-                                    <option value="&lt;"> &lt; </option>
-                                    <option value="&equals;"> = </option>
-                                    <option value="&gt;"> &gt; </option>
+                        </ul> <!-- Out Currency ul -->
+                    </details><!-- End Out Currency -->
+                </details><details><summary>Thresholds</summary>
+                    <h4> Currencies </h4>
+                    <ul>
+                        <li v-for="(value, currency) in selectedAgent.thresholds" :key="currency">
+                            {{currency}}
+                            (
+                            <label>Change to:
+                                <select v-model="thresholdTypes[currency]" name="changeThresholdCurrency">
+                                    <option v-for="item in currencyList" :key="item" :value="item">
+                                        {{item}}
+                                    </option>
                                 </select>
-                            </li>
-                            <li> Value: <input v-model="newThresholdValue" type="number" name="newThresholdsValueField">
-                            </li>
-                            <li> Connnections:
-                                <input v-model="newThresholdConnections" type="text"
-                                       name="newThresholdConnectionsField">
-                            </li>
-                        </ul>
-                        <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath,
-                                                        newThresholdLimit, newThresholdValue,
-                                                        newThresholdConnections)">
-                            Add Threshold Currency
-                        </button>
-                    </li> <!-- NEW FLOW -->
-                </ul>
-                <h3>Properties</h3>
-                <ul>
-                    <li v-for="(attributes, property) in selectedAgent.properties" :key="property">
-                        {{property}} (Change to:
-                        <input v-model="propertyNames[property]" name="propertyName" type="text">
-                        <button @click="changePropertyName(property, attributes, propertyNames[property])">
-                            Change
-                        </button>)
-                        <button @click="removeProperty(property)">Remove</button>
-                        <ul> <!-- Property Attributes -->
-                            <li>
-                                value: {{attributes.value}}
-                                <input v-model="changedPropVal" name="propVal" type="text">
-                                <button @click="changePropertyValue(property, changedPropVal)">Change Value</button>
-                            </li>
-                            <li>unit:
-                                <input v-model="selectedAgent.properties[property].unit"
-                                       name="propUnit" type="text" col="15">
-                            </li>
-                        </ul>
-                    </li>
-                    <li>
-                        New Property:
-                        <input v-model="newPropertyName" name="newPropertyName" type="text">
-                        <ul> <!-- Property Attributes -->
-                            <li>value: <input v-model="newPropVal" name="propValField" type="text"> </li>
-                            <li>unit: <input v-model="newPropUnit" name="propUnitField" type="text"> </li>
-                            <button @click="addNewProperty(newPropertyName, newPropVal, newPropUnit)">
-                                Add New Property
+                            </label>
+                            <button @click="changeThresholdType(currency, value, thresholdTypes[currency])">Change</button>)
+                            <button @click="removeThreshold(currency)">Remove Currency</button>
+                            <ul>
+                                <li> Path:
+                                    <input v-model="selectedAgent.thresholds[currency].path"
+                                           name="thesholdPathField" type="text">
+                                </li>
+                                <li> Limit:
+                                    <select v-model="selectedAgent.thresholds[currency].limit"
+                                            name="thresholdLimitField">
+                                        <option value="&lt;"> &lt; </option>
+                                        <option value="&equals;"> = </option>
+                                        <option value="&gt;"> &gt; </option>
+                                    </select>
+                                </li>
+                                <li> Value:
+                                    <input v-model="selectedAgent.thresholds[currency].value"
+                                           name="thesholdValueField" type="number">
+                                </li>
+                                <li> Connnections:
+                                    <input v-model="selectedAgent.thresholds[currency].connections"
+                                           name="connectionsThresholdsField" type="text">
+                                </li>
+                            </ul>
+                        </li>
+                        <li> <!-- NEW FLOW -->
+                            <label>New Currency:
+                                <select v-model="newThresholdCurrency" name="newThresholdCurrency" selected="o2">
+                                    <option v-for="item in currencyList" :key="item" :value="item">
+                                        {{item}}
+                                    </option>
+                                </select>
+                            </label>
+                            <ul>
+                                <li> Path:  <input v-model="newThresholdPath" name="newThresholdPathField" type="text">
+                                </li>
+                                <li> Limit:
+                                    <select v-model="newThresholdLimit" name="thresholdLimitFieldNew">
+                                        <option value="&lt;"> &lt; </option>
+                                        <option value="&equals;"> = </option>
+                                        <option value="&gt;"> &gt; </option>
+                                    </select>
+                                </li>
+                                <li> Value: <input v-model="newThresholdValue" type="number" name="newThresholdsValueField">
+                                </li>
+                                <li> Connnections:
+                                    <input v-model="newThresholdConnections" type="text"
+                                           name="newThresholdConnectionsField">
+                                </li>
+                            </ul>
+                            <button @click="addNewThreshold(newThresholdCurrency, newThresholdPath,
+                                                            newThresholdLimit, newThresholdValue,
+                                                            newThresholdConnections)">
+                                Add Threshold Currency
                             </button>
-                        </ul>
-                    </li>
-                </ul>
-                <h2> Agent Details </h2>
+                        </li> <!-- NEW FLOW -->
+                    </ul>
+                </details><!-- END OF THRESHOLDS -->
+                <details><summary>Properties</summary>
+                    <ul>
+                        <li v-for="(attributes, property) in selectedAgent.properties" :key="property">
+                            {{property}} (Change to:
+                            <input v-model="propertyNames[property]" name="propertyName" type="text">
+                            <button @click="changePropertyName(property, attributes, propertyNames[property])">
+                                Change
+                            </button>)
+                            <button @click="removeProperty(property)">Remove</button>
+                            <ul> <!-- Property Attributes -->
+                                <li>
+                                    value: {{attributes.value}}
+                                    <input v-model="changedPropVal" name="propVal" type="text">
+                                    <button @click="changePropertyValue(property, changedPropVal)">Change Value</button>
+                                </li>
+                                <li>unit:
+                                    <input v-model="selectedAgent.properties[property].unit"
+                                           name="propUnit" type="text" col="15">
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            New Property:
+                            <input v-model="newPropertyName" name="newPropertyName" type="text">
+                            <ul> <!-- Property Attributes -->
+                                <li>value: <input v-model="newPropVal" name="propValField" type="text"> </li>
+                                <li>unit: <input v-model="newPropUnit" name="propUnitField" type="text"> </li>
+                                <button @click="addNewProperty(newPropertyName, newPropVal, newPropUnit)">
+                                    Add New Property
+                                </button>
+                            </ul>
+                        </li>
+                    </ul>
+                </details>
+                <h2> Agent JSON Content View </h2>
                 <hr>
                 <ul>
                     <li v-for="(value, key) in selectedAgent" :key="key">
@@ -1179,11 +1255,27 @@ export default {
     </div> <!-- agentMode div -->
 </template>
 <style scoped>
-.navMenu{
+
+summary {
+    font-weight: bold;
+}
+
+details {
+    background-color: rgba(150,150,150,0.2);
+    border: 2px dotted black;
+    padding: 10px;
+}
+
+details ul {
+    list-style-type: none;
+}
+
+.navMenu {
     display: flex;
     justify-content: center;
 }
-.gridBox{
+
+.gridBox {
             display: grid;
             grid-template-columns: 1fr 5fr;
             grid-gap: 10px;

From c02d22bb25aea0b9fee6be7d1e05b1584ad82478 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 1 Jul 2024 03:35:48 -0700
Subject: [PATCH 47/63] Prepare for Refactor/combine type change functions

---
 src/components/ace/ACE.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 00b5fcb30..aade41426 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -350,7 +350,7 @@ export default {
             this.selectedCurrency = newName
             this.generateCurrencyList()
         },
-        changeType(key, value, newName) {
+        changeCapacityType(key, value, newName) {
             if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
                 this.selectedAgent.capacity[newName]=value
                 delete this.selectedAgent.capacity[key]
@@ -399,6 +399,10 @@ export default {
             }
         },
         changeCriterionType(kind, value, newName, key) {
+            // const flow = true
+            // const dirrection = 'out'
+            // const parameter = 'criteria'
+            // this.changeType(kind, value, newName, key, parameter, flow, dirrection)
             if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
                 this.agentOutFlow[key].criteria[newName]=value
                 delete this.agentOutFlow[key].criteria[kind]
@@ -406,6 +410,19 @@ export default {
                 console.log('Cannot change to type without label')
             }
         },
+        changeType(kind, value, newName, key, parameter, flow, dirrection) {
+            if (!(newName==='' || newName===undefined)) { // Make sure it is not the empty string
+                if (!flow) {
+                    this.selectedAgent[parameter][newName]=value
+                    delete this.selectedAgent[parameter][key]
+                } else {
+                    this.selectedAgent.flows[dirrection][parameter][newName]=value
+                    delete this.selectedAgent.flows[dirrection][parameter][kind]
+                }
+            } else {
+                console.log('Cannot change to type without label')
+            }
+        },
         addNewCapacity(key, value) {
             // Add the capacity object if it doesn't exist
             if (!(typeof (this.selectedAgent.capacity)==='object')) {
@@ -761,7 +778,7 @@ export default {
                             {{key}}
                             (Change to:
                             <input v-model="capacityTypes[key]" name="capType" type="text">
-                            <button @click="changeType(key, value, capacityTypes[key])">Change</button>)
+                            <button @click="changeCapacityType(key, value, capacityTypes[key])">Change</button>)
                             :::::
                             Quantity:
                             <input v-model="selectedAgent.capacity[key]" name="capVal" type="number">
@@ -916,7 +933,6 @@ export default {
                                         </select>
                                     </label>
                                     <button @click="changeOutType(currency, value, outTypes[currency])">Change</button>
-
                                     <ul> <!-- Out currency -->
                                         <li> Value:
                                             <input v-model="agentOutFlow[currency].value"

From 8f301000ed37d9f7be5568782c1a269bf63c074f Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 1 Jul 2024 03:51:23 -0700
Subject: [PATCH 48/63] Improve ACE UI: Outline new items, wording

---
 src/components/ace/ACE.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index aade41426..95aee7921 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -784,7 +784,7 @@ export default {
                             <input v-model="selectedAgent.capacity[key]" name="capVal" type="number">
                             <button @click="removeCapacity(key)">Remove Capacity</button>
                         </li>
-                        <li>
+                        <li class="newItem">
                             New Capacity:
                             <input v-model="newCapacityType" name="newCapType" type="text">
                             :::::
@@ -886,7 +886,7 @@ export default {
                                             </ul>
                                             <ul v-else>
                                                 <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">
-                                                    Turn Deprive On [Currently Disabled]
+                                                    Enable Deprive [Currently Disabled]
                                                 </button>
                                                 <li>Value:
                                                     <input v-model="newDepriveValue"
@@ -900,7 +900,7 @@ export default {
                                     </ul>
                                 </details>
                             </li>
-                            <li> <!-- NEW FLOW -->
+                            <li class="newItem"> <!-- NEW FLOW -->
                                 <label>New In Flow:
                                     <select v-model="newInType" name="newInFlowCurrencySelector">
                                         <option v-for="item in currencyList"
@@ -1122,9 +1122,9 @@ export default {
                                     </ul> <!-- Out currency -->
                                 </details>
                             </li>
-                            <li> <!-- NEW FLOW -->
+                            <li class="newItem"> <!-- NEW FLOW -->
                                 <label>
-                                    New Out Flow: (Change to:
+                                    New Out Flow:
                                     <select v-model="newOutType" name="outFlowCurrencySelector">
                                         <option v-for="item in currencyList" :key="item" :value="item">
                                             {{item}}
@@ -1173,7 +1173,7 @@ export default {
                                 </li>
                             </ul>
                         </li>
-                        <li> <!-- NEW FLOW -->
+                        <li class="newItem"> <!-- NEW FLOW -->
                             <label>New Currency:
                                 <select v-model="newThresholdCurrency" name="newThresholdCurrency" selected="o2">
                                     <option v-for="item in currencyList" :key="item" :value="item">
@@ -1227,7 +1227,7 @@ export default {
                                 </li>
                             </ul>
                         </li>
-                        <li>
+                        <li class="newItem">
                             New Property:
                             <input v-model="newPropertyName" name="newPropertyName" type="text">
                             <ul> <!-- Property Attributes -->
@@ -1314,4 +1314,8 @@ details ul {
     color: black;
     background-color: grey;
 }
+.newItem {
+    background-color: rgba(250,100,100,0.1);
+    border: 2px dotted black;
+}
 </style>

From c16f11f0077d36c10c0d290702d049b8625be2dd Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 1 Jul 2024 03:55:37 -0700
Subject: [PATCH 49/63] Improve UI for Deprives

---
 src/components/ace/ACE.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 95aee7921..df81799d2 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -884,7 +884,7 @@ export default {
                                                            name="depriveUnit" type="text">
                                                 </li>
                                             </ul>
-                                            <ul v-else>
+                                            <ul v-else class="newItem">
                                                 <button @click="addDeprive(currency, newDepriveValue, newDepriveUnit)">
                                                     Enable Deprive [Currently Disabled]
                                                 </button>

From 2fce7c575550b90e634f3a1034a99014e1e6c092 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 11 Jul 2024 16:57:57 -0700
Subject: [PATCH 50/63] Make style more similar to elsewhere (not done)

---
 src/components/ace/ACE.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index df81799d2..b0b0d5f5d 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -1278,7 +1278,7 @@ summary {
 
 details {
     background-color: rgba(150,150,150,0.2);
-    border: 2px dotted black;
+    border: 2px dotted grey;
     padding: 10px;
 }
 
@@ -1310,12 +1310,12 @@ details ul {
 }
 .agentData {
     padding: 5px;
-    border: solid red 5px;
-    color: black;
-    background-color: grey;
+    border: solid grey 5px;
+    color: white;
+    background-color: rgba(250,100,100,0.1);
 }
 .newItem {
-    background-color: rgba(250,100,100,0.1);
-    border: 2px dotted black;
+    background-color: rgba(250,100,100,0.3);
+    border: 2px dotted white;
 }
 </style>

From 20c9af6a1eb310e9493be2cb07e5a01564266b93 Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 11 Jul 2024 17:13:16 -0700
Subject: [PATCH 51/63] Add comments clarifying purpose of
 ConfigurationMenu.vue

---
 src/components/configuration/ConfigurationMenu.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/configuration/ConfigurationMenu.vue b/src/components/configuration/ConfigurationMenu.vue
index 871ef18c5..00c8751fd 100644
--- a/src/components/configuration/ConfigurationMenu.vue
+++ b/src/components/configuration/ConfigurationMenu.vue
@@ -1,3 +1,9 @@
+<!--
+ConfigurationMenu.vue relates to the pop up menu modal accessible by pressing the hamburger
+(3 horizontal line) button that appears in the upper right corner of the screen on the top bar
+when in Simulation Configuration, which is reached after choosing 'Mars' or
+'Biosphere 2' from the "Main Menu" modal menu
+-->
 <template>
     <BaseMenu>
         <template #menu-title>

From 20ff0e7a62f16066cac0a8f47b6959a009873d1c Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 11 Jul 2024 17:19:45 -0700
Subject: [PATCH 52/63] Improve comment

---
 src/components/configuration/ConfigurationMenu.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/configuration/ConfigurationMenu.vue b/src/components/configuration/ConfigurationMenu.vue
index 00c8751fd..12e4b84d0 100644
--- a/src/components/configuration/ConfigurationMenu.vue
+++ b/src/components/configuration/ConfigurationMenu.vue
@@ -2,7 +2,8 @@
 ConfigurationMenu.vue relates to the pop up menu modal accessible by pressing the hamburger
 (3 horizontal line) button that appears in the upper right corner of the screen on the top bar
 when in Simulation Configuration, which is reached after choosing 'Mars' or
-'Biosphere 2' from the "Main Menu" modal menu
+'Biosphere 2' from the "Main Menu" modal menu. See base\BaseConfiguration.vue for the layout of the
+Simulation Configuration itself.
 -->
 <template>
     <BaseMenu>

From 691930dd7dd93de7ad1fadc94e37dfc33a7e01fa Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 18 Jul 2024 19:48:40 -0700
Subject: [PATCH 53/63] Add SimulationConfiguration support component for
 Custom non-plant agent quantities

---
 src/components/configuration/CustomAgents.vue | 80 +++++++++++++++++++
 src/components/configuration/index.js         |  1 +
 src/views/ConfigurationView.vue               |  7 +-
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/components/configuration/CustomAgents.vue

diff --git a/src/components/configuration/CustomAgents.vue b/src/components/configuration/CustomAgents.vue
new file mode 100644
index 000000000..61df9497a
--- /dev/null
+++ b/src/components/configuration/CustomAgents.vue
@@ -0,0 +1,80 @@
+<!-- This component establishes the user interface for configuring the quantity of custom agents that
+have been defined in local storage that should be present in the actual simulation -->
+
+<script>
+    export default {
+        data() {
+            return {
+                customAgents: []
+            }
+        },
+        async created() {
+            // Get currencies from simoc-abm
+            try {
+                // Get currencies from local storage.
+                //this.getLocalStorageCurrencies()
+                this.getLocalStorageAgents()
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        methods: {
+            getLocalStorageAgents() {
+                let localStorageAgents = localStorage.getItem('customAgents')
+                localStorageAgents = JSON.parse(localStorageAgents)
+                const localAgentNames = Object.keys(localStorageAgents)
+                this.customAgents = Object.keys(localStorageAgents)
+                if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
+                    console.log('Custom agents found in local storage:')
+                    for (let index=0; index<localAgentNames.length; ++index) {
+                        // Modify this code such that it only adds an agent if it is NOT a plant
+                        console.log(localAgentNames[index])
+                    }
+                } else {
+                    console.log(' * No agents loaded from local storage *')
+                }
+            },
+        },
+    }
+</script>
+<template>
+    <div>
+        <h1 style="color:rgb(0,240,0)">Custom Agents <span style="color:lightgrey">@</span>
+        </h1>
+        <p>Custom Defined Agents other than plants.</p>
+        <p style="color:red">THIS SECTION SHOULD ONLY APPEAR IF ANY AGENTS ARE IN LIST</p>
+        <p style="color:red">REPLACE WITH SELECT LIKE PLANT SPECIES COMPONENT</p>
+        <div v-for="agent in this.customAgents">
+            <b>{{agent}}</b> Quantity:
+            <input type="number" value ="1"/>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+    @import '../../sass/components/configuration-input';
+
+    .input-plant-wrapper{
+        display:flex;
+        justify-content:flex-start;
+        align-items:center;
+    }
+
+    .input-field-select{
+        margin-right:24px;
+    }
+
+    .plant-row-icon{
+        &:first-of-type{
+            margin-left:auto;
+        }
+
+        margin-right:24px;
+    }
+
+.crop-mgmt-description{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 2em;
+}
+</style>
diff --git a/src/components/configuration/index.js b/src/components/configuration/index.js
index ec816b6b4..b10ee7fbf 100644
--- a/src/components/configuration/index.js
+++ b/src/components/configuration/index.js
@@ -8,3 +8,4 @@ export {default as Reference} from './Reference.vue'
 export {default as Graphs} from './Graphs.vue'
 export {default as Presets} from './Presets.vue'
 export {default as Layout} from './Layout.vue'
+export {default as CustomAgents} from './CustomAgents.vue'
\ No newline at end of file
diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
index fbc07aa82..58b5f1835 100644
--- a/src/views/ConfigurationView.vue
+++ b/src/views/ConfigurationView.vue
@@ -16,6 +16,9 @@
                         <option :selected="formIndex === 2" value="2">Greenhouse</option>
                         <option :selected="formIndex === 3" value="3">Energy</option>
                         <option :selected="formIndex === 4" value="4">Finalize</option>
+                        <!-- If custom agents should appear in list, uncomment and probably put before finalize
+                        <option :selected="formIndex === 5" value="5">CustomAgents</option>
+                        -->
                     </select>
                 </template>
                 <template #main-wizard-input>
@@ -33,6 +36,7 @@
                             <ECLSS ref="eclss" />
                             <Greenhouse ref="greenhouse" />
                             <Energy v-if="simLocation === 'mars'" ref="energy" />
+                            <CustomAgents ref="customAgents" />
                             <!--
                             This works, but breaks the $refs (i.e. this.$refs works, but not this.$refs.component.$refs)
                             <component :is="formName" v-for="formName in forms" :ref="formName.toLowerCase()" />
@@ -78,7 +82,7 @@ import {useWizardStore} from '../store/modules/WizardStore'
 import {useModalStore} from '../store/modules/ModalStore'
 import {TheTopBar} from '../components/bars'
 import {ConfigurationMenu, Presets, Initial, Inhabitants, ECLSS,
-        Greenhouse, Energy, Reference, Graphs, Layout} from '../components/configuration'
+        Greenhouse, Energy, Reference, Graphs, Layout, CustomAgents} from '../components/configuration'
 import {idleMixin} from '../javascript/mixins'
 import b2Url from '@/assets/b2-bg.jpg'
 import marsUrl from '@/assets/mars-bg.jpg'
@@ -96,6 +100,7 @@ export default {
         Reference,
         Graphs,
         Layout,
+        CustomAgents,
     },
     mixins: [idleMixin],
     setup() {

From dba1a259b16a44d95e9470154b1589676546e60e Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 22 Jul 2024 00:43:34 -0700
Subject: [PATCH 54/63] Fix linter issues

---
 src/components/configuration/CustomAgents.vue | 160 +++++++++---------
 src/components/configuration/index.js         |   2 +-
 2 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/src/components/configuration/CustomAgents.vue b/src/components/configuration/CustomAgents.vue
index 61df9497a..ccbef0e87 100644
--- a/src/components/configuration/CustomAgents.vue
+++ b/src/components/configuration/CustomAgents.vue
@@ -1,80 +1,80 @@
-<!-- This component establishes the user interface for configuring the quantity of custom agents that
-have been defined in local storage that should be present in the actual simulation -->
-
-<script>
-    export default {
-        data() {
-            return {
-                customAgents: []
-            }
-        },
-        async created() {
-            // Get currencies from simoc-abm
-            try {
-                // Get currencies from local storage.
-                //this.getLocalStorageCurrencies()
-                this.getLocalStorageAgents()
-            } catch (error) {
-                console.log(error)
-            }
-        },
-        methods: {
-            getLocalStorageAgents() {
-                let localStorageAgents = localStorage.getItem('customAgents')
-                localStorageAgents = JSON.parse(localStorageAgents)
-                const localAgentNames = Object.keys(localStorageAgents)
-                this.customAgents = Object.keys(localStorageAgents)
-                if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
-                    console.log('Custom agents found in local storage:')
-                    for (let index=0; index<localAgentNames.length; ++index) {
-                        // Modify this code such that it only adds an agent if it is NOT a plant
-                        console.log(localAgentNames[index])
-                    }
-                } else {
-                    console.log(' * No agents loaded from local storage *')
-                }
-            },
-        },
-    }
-</script>
-<template>
-    <div>
-        <h1 style="color:rgb(0,240,0)">Custom Agents <span style="color:lightgrey">@</span>
-        </h1>
-        <p>Custom Defined Agents other than plants.</p>
-        <p style="color:red">THIS SECTION SHOULD ONLY APPEAR IF ANY AGENTS ARE IN LIST</p>
-        <p style="color:red">REPLACE WITH SELECT LIKE PLANT SPECIES COMPONENT</p>
-        <div v-for="agent in this.customAgents">
-            <b>{{agent}}</b> Quantity:
-            <input type="number" value ="1"/>
-        </div>
-    </div>
-</template>
-<style lang="scss" scoped>
-    @import '../../sass/components/configuration-input';
-
-    .input-plant-wrapper{
-        display:flex;
-        justify-content:flex-start;
-        align-items:center;
-    }
-
-    .input-field-select{
-        margin-right:24px;
-    }
-
-    .plant-row-icon{
-        &:first-of-type{
-            margin-left:auto;
-        }
-
-        margin-right:24px;
-    }
-
-.crop-mgmt-description{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 2em;
-}
-</style>
+<!-- This component establishes the user interface for configuring the quantity of custom agents that
+have been defined in local storage that should be present in the actual simulation -->
+
+<script>
+export default {
+    data() {
+        return {
+            customAgents: [],
+        }
+    },
+    async created() {
+        // Get currencies from simoc-abm
+        try {
+            // Get currencies from local storage.
+            // this.getLocalStorageCurrencies()
+            this.getLocalStorageAgents()
+        } catch (error) {
+            console.log(error)
+        }
+    },
+    methods: {
+        getLocalStorageAgents() {
+            let localStorageAgents = localStorage.getItem('customAgents')
+            localStorageAgents = JSON.parse(localStorageAgents)
+            const localAgentNames = Object.keys(localStorageAgents)
+            this.customAgents = Object.keys(localStorageAgents)
+            if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
+                console.log('Custom agents found in local storage:')
+                for (let index=0; index<localAgentNames.length; ++index) {
+                    // Modify this code such that it only adds an agent if it is NOT a plant
+                    console.log(localAgentNames[index])
+                }
+            } else {
+                console.log(' * No agents loaded from local storage *')
+            }
+        },
+    },
+}
+</script>
+<template>
+    <div>
+        <h1 style="color:rgb(0,240,0)">Custom Agents <span style="color:lightgrey">@</span>
+        </h1>
+        <p>Custom Defined Agents other than plants.</p>
+        <p style="color:red">THIS SECTION SHOULD ONLY APPEAR IF ANY AGENTS ARE IN LIST</p>
+        <p style="color:red">REPLACE WITH SELECT LIKE PLANT SPECIES COMPONENT</p>
+        <div v-for="agent in customAgents" :key="agent">
+            <b>{{agent}}</b> Quantity:
+            <input type="number" value="1">
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+    @import '../../sass/components/configuration-input';
+
+    .input-plant-wrapper{
+        display:flex;
+        justify-content:flex-start;
+        align-items:center;
+    }
+
+    .input-field-select{
+        margin-right:24px;
+    }
+
+    .plant-row-icon{
+        &:first-of-type{
+            margin-left:auto;
+        }
+
+        margin-right:24px;
+    }
+
+.crop-mgmt-description{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 2em;
+}
+</style>
diff --git a/src/components/configuration/index.js b/src/components/configuration/index.js
index b10ee7fbf..6c66920e7 100644
--- a/src/components/configuration/index.js
+++ b/src/components/configuration/index.js
@@ -8,4 +8,4 @@ export {default as Reference} from './Reference.vue'
 export {default as Graphs} from './Graphs.vue'
 export {default as Presets} from './Presets.vue'
 export {default as Layout} from './Layout.vue'
-export {default as CustomAgents} from './CustomAgents.vue'
\ No newline at end of file
+export {default as CustomAgents} from './CustomAgents.vue'

From 1e5d547e2f463928d1fd88976b62f750ae42293d Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 22 Jul 2024 00:54:07 -0700
Subject: [PATCH 55/63] Fix linter issues

---
 src/views/ConfigurationView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
index 58b5f1835..ae44cf137 100644
--- a/src/views/ConfigurationView.vue
+++ b/src/views/ConfigurationView.vue
@@ -82,7 +82,8 @@ import {useWizardStore} from '../store/modules/WizardStore'
 import {useModalStore} from '../store/modules/ModalStore'
 import {TheTopBar} from '../components/bars'
 import {ConfigurationMenu, Presets, Initial, Inhabitants, ECLSS,
-        Greenhouse, Energy, Reference, Graphs, Layout, CustomAgents} from '../components/configuration'
+        Greenhouse, Energy, Reference, Graphs, Layout,
+        CustomAgents} from '../components/configuration'
 import {idleMixin} from '../javascript/mixins'
 import b2Url from '@/assets/b2-bg.jpg'
 import marsUrl from '@/assets/mars-bg.jpg'

From d0dc12f521c41ab7cbe7af887b14cac292470b8d Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Mon, 22 Jul 2024 01:57:11 -0700
Subject: [PATCH 56/63] Homogenize styling, add reference

---
 src/components/configuration/CustomAgents.vue | 67 +++++++++++++++----
 src/components/configuration/Reference.vue    |  4 ++
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/components/configuration/CustomAgents.vue b/src/components/configuration/CustomAgents.vue
index ccbef0e87..bb7dec1b4 100644
--- a/src/components/configuration/CustomAgents.vue
+++ b/src/components/configuration/CustomAgents.vue
@@ -2,7 +2,19 @@
 have been defined in local storage that should be present in the actual simulation -->
 
 <script>
+
+import {useWizardStore} from '../../store/modules/WizardStore'
+
 export default {
+    setup() {
+        const wizard = useWizardStore()
+        const {
+            setActiveRefEntry,
+        } = wizard
+        return {
+            setActiveRefEntry,
+        }
+    },
     data() {
         return {
             customAgents: [],
@@ -23,31 +35,60 @@ export default {
             let localStorageAgents = localStorage.getItem('customAgents')
             localStorageAgents = JSON.parse(localStorageAgents)
             const localAgentNames = Object.keys(localStorageAgents)
-            this.customAgents = Object.keys(localStorageAgents)
             if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
                 console.log('Custom agents found in local storage:')
                 for (let index=0; index<localAgentNames.length; ++index) {
-                    // Modify this code such that it only adds an agent if it is NOT a plant
-                    console.log(localAgentNames[index])
+                    // It only adds an agent if it is NOT a plant. Custom plants appear in Plant Species already
+                    if (localStorageAgents[localAgentNames[index]].agent_class==='plants') {
+                        console.log('PLANT: ', localAgentNames[index])
+                    } else {
+                        console.log('NOT PLANT: ', localAgentNames[index])
+                        this.customAgents.push(localAgentNames[index])
+                    }
                 }
             } else {
                 console.log(' * No agents loaded from local storage *')
             }
         },
+        addCustomAgent() {
+            console.log('ADD AGENT TRIED')
+        },
+        removeCustomAgent() {
+            console.log('REMOVE AGENT TRIED')
+        },
+        updateCustomAgent(number) {
+            console.log('UPDATE TRIED', number)
+        },
     },
 }
 </script>
 <template>
-    <div>
-        <h1 style="color:rgb(0,240,0)">Custom Agents <span style="color:lightgrey">@</span>
-        </h1>
-        <p>Custom Defined Agents other than plants.</p>
-        <p style="color:red">THIS SECTION SHOULD ONLY APPEAR IF ANY AGENTS ARE IN LIST</p>
-        <p style="color:red">REPLACE WITH SELECT LIKE PLANT SPECIES COMPONENT</p>
-        <div v-for="agent in customAgents" :key="agent">
-            <b>{{agent}}</b> Quantity:
-            <input type="number" value="1">
-        </div>
+    <div v-if="customAgents.length>0">
+        <label class="input-wrapper">
+            <div class="input-title" @click="setActiveRefEntry('CustomAgents')"> <!-- Description @ Reference.vue -->
+                Custom Agents <fa-icon :icon="['fa-solid','circle-info']" />
+            </div>
+            <div class="input-description">Custom user defined agents other than plants</div>
+            <div v-for="(item,index) in customAgents" :key="index" class="input-plant-wrapper">
+                <select class="input-field-select">
+                    <option value="" selected hidden disabled>Agent</option>
+                    <option v-for="(name,k) in customAgents" :key="k" :value="name">{{customAgents[k]}}</option>
+                </select>
+                <label><input class="input-field-number" type="number" pattern="^\d+$"
+                              placeholder="Quantity" @input="updateCustomAgent(index)"> units</label>
+                <fa-layers class="fa-2x plant-row-icon icon-add" @click="addCustomAgent()">
+                    <fa-icon :icon="['fa-solid','circle-plus']" />
+                </fa-layers>
+                <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removeCustomAgent(index)">
+                    <!-- Deletes the object at the specicied key within the wizard store. -->
+                    <fa-icon :icon="['fa-solid','trash']" mask="circle" transform="shrink-7" />
+                </fa-layers>
+            </div>
+            <div v-for="agent in customAgents" :key="agent">
+                <b>{{agent}}</b> Quantity:
+                <input type="number" value="0">
+            </div>
+        </label>
     </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/components/configuration/Reference.vue b/src/components/configuration/Reference.vue
index eb6311133..92fdbddcb 100644
--- a/src/components/configuration/Reference.vue
+++ b/src/components/configuration/Reference.vue
@@ -209,6 +209,10 @@ using v-for to populate all links with the title and the approriate value for th
             <p>The battery holds a maximum of 10,000 kilowatt-hours (kWh).</p>
         </ReferenceItem>
 
+        <ReferenceItem v-if="activeRefEntry === 'CustomAgents'" heading="Custom Agents">
+            <p>For custom agents that are not <a class="reference-link" href="#" @click="setActiveRefEntry('PlantSpecies')">plants</a>, you can specify the quantity here. This could be something like custom electronic devices that consume power. These are user defined agents created by the agent editor.</p>
+        </ReferenceItem>
+
         <div v-if="activeRefEntry === 'Table'">
             <div class="reference-item-title">Table of Contents</div>
             <ul v-if="simLocation === 'mars'">

From be68ff8eec428656fa0ecabd9b17467c9f0cfaec Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sun, 18 Aug 2024 23:16:31 -0700
Subject: [PATCH 57/63] Add exported custom agent&currency view / deleter

---
 src/components/ace/ACE.vue | 87 ++++++++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index b0b0d5f5d..8c5484ae5 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -58,6 +58,9 @@ export default {
             newAgentName: '',
             customAgents: {},
             customCurrencies: {},
+            exportedListVisible: false,
+            localAgentNames: [],
+            localCurrencyNames: [],
         }
     },
     computed: {
@@ -128,11 +131,11 @@ export default {
         getLocalStorageAgents() {
             let localStorageAgents = localStorage.getItem('customAgents')
             localStorageAgents = JSON.parse(localStorageAgents)
-            const localAgentNames = Object.keys(localStorageAgents)
+            this.localAgentNames = Object.keys(localStorageAgents)
             if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
                 console.log('Agents found in local storage:')
-                for (let index=0; index<localAgentNames.length; ++index) {
-                    const localAgentName = localAgentNames[index]
+                for (let index=0; index<this.localAgentNames.length; ++index) {
+                    const localAgentName = this.localAgentNames[index]
                     this.agentDesc[localAgentName] = localStorageAgents[localAgentName]
                 }
             } else {
@@ -158,10 +161,10 @@ export default {
                 } else {
                     this.currencyDesc.custom = {}
                 }
-                const localCurrencyNames = Object.keys(localStorageCurrencies)
+                this.localCurrencyNames = Object.keys(localStorageCurrencies)
                 console.log(' * Currencies loaded from local storage:')
-                for (let nameIndex=0; nameIndex<localCurrencyNames.length; nameIndex+=1) {
-                    const currencyName = localCurrencyNames[nameIndex]
+                for (let nameIndex=0; nameIndex<this.localCurrencyNames.length; nameIndex+=1) {
+                    const currencyName = this.localCurrencyNames[nameIndex]
                     console.log(currencyName)
                     this.currencyDesc.custom[currencyName] = localStorageCurrencies[currencyName]
                 }
@@ -624,15 +627,39 @@ export default {
             currentCustomCurrencies[currencyName]=this.customCurrencies[currencyName]
             localStorage.setItem('customCurrencies', JSON.stringify(currentCustomCurrencies))
         },
+        deleteExportAgent(agent) {
+            let currentCustomAgents=localStorage.getItem('customAgents')
+            currentCustomAgents=JSON.parse(currentCustomAgents)
+            // If there isn't a custom agent object, create it.
+            if (!(typeof (currentCustomAgents)==='object' && (currentCustomAgents!==null))) {
+                currentCustomAgents = {}
+            }
+            // Remove this agent from custom agents object.
+            delete currentCustomAgents[agent]
+            // Save to the local browser storage
+            localStorage.setItem('customAgents', JSON.stringify(currentCustomAgents))
+            // Remove from custom agent names
+            this.localAgentNames = this.localAgentNames.filter(item => item !== agent)
+        },
+        deleteExportCurrency(currency) {
+            let currentCustomCurrencies=localStorage.getItem('customCurrencies')
+            currentCustomCurrencies=JSON.parse(currentCustomCurrencies)
+            // If there isn't a custom agent object, create it.
+            if (!(typeof (currentCustomCurrencies)==='object'&&(currentCustomCurrencies!==null))) {
+                currentCustomCurrencies = {}
+            }
+            // Remove this agent from custom agents object.
+            delete currentCustomCurrencies[currency]
+            // Save to the local browser storage
+            localStorage.setItem('customCurrencies', JSON.stringify(currentCustomCurrencies))
+            // Remove from custom agent names
+            this.localCurrencyNames = this.localCurrencyNames.filter(item => item !== currency)
+        },
         returnToMenu() { // Function to return to main menu
             this.$router.push('menu')
         },
-        switchMode() { // Function to swap between agent mode and currency mode
-            if (this.currentMode==='agent') {
-                this.currentMode='currency'
-            } else {
-                this.currentMode='agent'
-            }
+        switchMode(mode) { // Function to swap between agent mode, currency mode, export data mode
+            this.currentMode=mode
         },
         getCriteriaValueModel(currency, kind) { // Function to limit line length in Vue
             return this.agentOutFlow[currency].criteria[kind].value
@@ -643,8 +670,31 @@ export default {
 <template>
     <div class="navMenu">
         <button @click="returnToMenu()">Return to Menu</button>
-        <button v-if="currentMode!='agent'" @click="switchMode()">Agent Editor</button>
-        <button v-else @click="switchMode()">Currency Editor</button>
+        <button v-if="currentMode!='exports'" @click="switchMode('exports')">Manage Exports</button>
+        <button v-if="currentMode!='agent'" @click="switchMode('agent')">Agent Editor</button>
+        <button v-if="currentMode!='currency'" @click="switchMode('currency')">Currency Editor</button>
+    </div>
+    <div v-if="currentMode==='exports'" class="gridBoxEven">
+        <div class="scrollie agentBox">
+            <h2>Custom Exported Agents</h2>
+            <p>Click to delete</p>
+            <ul>
+                <li v-for="agent in localAgentNames"
+                    :key="agent">
+                    <button @click="deleteExportAgent(agent)">{{agent}}</button>
+                </li>
+            </ul>
+        </div>
+        <div class="scrollie agentBox">
+            <h2>Custom Exported Currencies</h2>
+            <p>Click to delete</p>
+            <ul>
+                <li v-for="currency in localCurrencyNames"
+                    :key="currency">
+                    <button @click="deleteExportCurrency(currency)">{{currency}}</button>
+                </li>
+            </ul>
+        </div>
     </div>
     <div v-if="typeof(currencyDesc[currencyCategorySelected])==='object' && currentMode==='currency'">
         <h2>Currency Editor</h2>
@@ -1275,27 +1325,28 @@ export default {
 summary {
     font-weight: bold;
 }
-
 details {
     background-color: rgba(150,150,150,0.2);
     border: 2px dotted grey;
     padding: 10px;
 }
-
 details ul {
     list-style-type: none;
 }
-
 .navMenu {
     display: flex;
     justify-content: center;
 }
-
 .gridBox {
             display: grid;
             grid-template-columns: 1fr 5fr;
             grid-gap: 10px;
 }
+.gridBoxEven {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 10px;
+}
 .scrollie {
     overflow-y: scroll !important;
     /* FireFox */

From 22f79b528600062e92c6d923feaf003e1158ddef Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Sun, 18 Aug 2024 23:30:34 -0700
Subject: [PATCH 58/63] Make visual appearance consistent for mode title

---
 src/components/ace/ACE.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ace/ACE.vue b/src/components/ace/ACE.vue
index 8c5484ae5..4758bcae0 100644
--- a/src/components/ace/ACE.vue
+++ b/src/components/ace/ACE.vue
@@ -674,9 +674,10 @@ export default {
         <button v-if="currentMode!='agent'" @click="switchMode('agent')">Agent Editor</button>
         <button v-if="currentMode!='currency'" @click="switchMode('currency')">Currency Editor</button>
     </div>
+    <h2 v-if="currentMode==='exports'">Export manager for custom agents and currencies</h2>
     <div v-if="currentMode==='exports'" class="gridBoxEven">
         <div class="scrollie agentBox">
-            <h2>Custom Exported Agents</h2>
+            <h3>Custom Exported Agents</h3>
             <p>Click to delete</p>
             <ul>
                 <li v-for="agent in localAgentNames"
@@ -686,7 +687,7 @@ export default {
             </ul>
         </div>
         <div class="scrollie agentBox">
-            <h2>Custom Exported Currencies</h2>
+            <h3>Custom Exported Currencies</h3>
             <p>Click to delete</p>
             <ul>
                 <li v-for="currency in localCurrencyNames"

From 246bcfd1736dd11080ca1804c268f88f08c9e6dd Mon Sep 17 00:00:00 2001
From: GregRRoss <grross1@asu.edu>
Date: Thu, 29 Aug 2024 18:42:50 -0700
Subject: [PATCH 59/63] Revert to simplified quantity selector, focus on
 functionality

---
 src/components/configuration/CustomAgents.vue | 90 +++++++++++++++----
 1 file changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/components/configuration/CustomAgents.vue b/src/components/configuration/CustomAgents.vue
index bb7dec1b4..9ff42e172 100644
--- a/src/components/configuration/CustomAgents.vue
+++ b/src/components/configuration/CustomAgents.vue
@@ -17,11 +17,43 @@ export default {
     },
     data() {
         return {
-            customAgents: [],
+            customAgents: [], // List of all the possible custom agents
+            addedCustomAgents: [], // Objects holding name and quantity for each agent
+            // selectedName: 'Agent', // For first custom agent field
+            // selectedNames: [], // For addedCustomAgents fields
+            // customAgentAdd: false,
         }
     },
+    computed: {
+        /* Related to formatting like plant species
+        newAgentAddMode() {
+            if (this.addedCustomAgents.length<1 || this.customAgentAdd) {
+                this.selectedName='Agent'
+                return true
+            } else {
+                return false
+            }
+        }
+        */
+    },
+    watch: {/*
+        selectedName() { // Related to formatting custom agents the way plant species are
+            if (this.selectedName!='Agent'){
+                this.addedCustomAgents.push({name: this.selectedName, quantity: 1}) // Add drop selected agent
+                this.selectedName='Agent'
+                this.customAgentAdd=false // Make the 'Agent' template disappear when drop selected
+            } else {
+                console.log(this.selectedName)
+            }
+        },
+        addedCustomAgents() {
+            this.selectedNames = []
+            for (let agent in Object.keys(this.addedCustomAgents)) {
+                this.selectedNames.push(this.addedCustomAgents[agent].name)
+            }
+        }, */
+    },
     async created() {
-        // Get currencies from simoc-abm
         try {
             // Get currencies from local storage.
             // this.getLocalStorageCurrencies()
@@ -44,21 +76,25 @@ export default {
                     } else {
                         console.log('NOT PLANT: ', localAgentNames[index])
                         this.customAgents.push(localAgentNames[index])
+                        const agentObject = {name: localAgentNames[index], quantity: 0}
+                        console.log(agentObject)
+                        this.addedCustomAgents.push(agentObject)
                     }
                 }
             } else {
                 console.log(' * No agents loaded from local storage *')
             }
+        }, /*
+        addCustomAgent(name) { // Related to formatting custom agents the way plant species are
+            this.customAgentAdd = true // This makes the blank 'Agent' Field appear when you hit +
+            console.log(name, this.newAgentAddMode)
         },
-        addCustomAgent() {
-            console.log('ADD AGENT TRIED')
-        },
-        removeCustomAgent() {
-            console.log('REMOVE AGENT TRIED')
+        removeCustomAgent(name) {
+            console.log('REMOVE AGENT:', name)
         },
         updateCustomAgent(number) {
             console.log('UPDATE TRIED', number)
-        },
+        },*/
     },
 }
 </script>
@@ -68,25 +104,43 @@ export default {
             <div class="input-title" @click="setActiveRefEntry('CustomAgents')"> <!-- Description @ Reference.vue -->
                 Custom Agents <fa-icon :icon="['fa-solid','circle-info']" />
             </div>
-            <div class="input-description">Custom user defined agents other than plants</div>
-            <div v-for="(item,index) in customAgents" :key="index" class="input-plant-wrapper">
-                <select class="input-field-select">
-                    <option value="" selected hidden disabled>Agent</option>
+            <div class="input-description">Custom user defined agents other than plants.</div>
+            <!-- This commented code is to make the agent look like the plant config instead
+                 but it has issues that would need to be resolved and may be unnecessary.
+            <div v-for="(item,index) in addedCustomAgents" :key="index" class="input-plant-wrapper">
+                <select  v-model="selectedNames[index]" class="input-field-select">
+                    <option value="" selected hidden>selectedNames[index]</option>
                     <option v-for="(name,k) in customAgents" :key="k" :value="name">{{customAgents[k]}}</option>
                 </select>
                 <label><input class="input-field-number" type="number" pattern="^\d+$"
                               placeholder="Quantity" @input="updateCustomAgent(index)"> units</label>
-                <fa-layers class="fa-2x plant-row-icon icon-add" @click="addCustomAgent()">
+                <fa-layers class="fa-2x plant-row-icon icon-add" @click="addCustomAgent(selectedNames[index])">
                     <fa-icon :icon="['fa-solid','circle-plus']" />
                 </fa-layers>
-                <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removeCustomAgent(index)">
-                    <!-- Deletes the object at the specicied key within the wizard store. -->
+                <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removeCustomAgent(selectedNames[index])">
                     <fa-icon :icon="['fa-solid','trash']" mask="circle" transform="shrink-7" />
                 </fa-layers>
             </div>
-            <div v-for="agent in customAgents" :key="agent">
-                <b>{{agent}}</b> Quantity:
-                <input type="number" value="0">
+            <div v-if="newAgentAddMode">
+                <div class="input-plant-wrapper">
+                    <select v-model="selectedName" class="input-field-select">
+                        <option value="Agent" selected hidden disabled>Agent</option>
+                        <option v-for="(name,k) in customAgents" :key="k" :value="name">{{customAgents[k]}}</option>
+                    </select>
+                    <label><input class="input-field-number" type="number" pattern="^\d+$"
+                                  placeholder="Quantity" @input="updateCustomAgent(index)"> units</label>
+                    <fa-layers class="fa-2x plant-row-icon icon-add" @click="addCustomAgent(selectedName)">
+                        <fa-icon :icon="['fa-solid','circle-plus']" />
+                    </fa-layers>
+                    <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removeCustomAgent(selectedName)">
+                        <fa-icon :icon="['fa-solid','trash']" mask="circle" transform="shrink-7" />
+                    </fa-layers>
+                </div>
+            </div>
+             -->
+            <div v-for="agent in addedCustomAgents" :key="agent.name">
+                <b>{{agent.name}}</b>, Quantity:
+                <input v-model="agent.quantity" type="number" style="width: 50px;">
             </div>
         </label>
     </div>

From c9f70a4dd42f2fed28f374cdd1d38d92318a64b3 Mon Sep 17 00:00:00 2001
From: "Greg:RRoss" <grross1@asu.edu>
Date: Fri, 9 May 2025 11:28:39 -0700
Subject: [PATCH 60/63] Resolve merge conflict to updated master

---
 src/router.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/router.js b/src/router.js
index 6ffba178a..431e367ee 100644
--- a/src/router.js
+++ b/src/router.js
@@ -26,15 +26,6 @@ export default createRouter({
                 },
             ],
         },
-<<<<<<< HEAD
-        {
-            path: '/menuconfig',
-            name: 'menuconfig',
-            component: () => import('@/components/entry/MenuConfig.vue'),
-        },
-=======
-        /*
->>>>>>> master
         {
             path: '/ace',
             name: 'ACE',

From 296e92f48bc7abd13daf264938f6bf0ee96332fa Mon Sep 17 00:00:00 2001
From: "Greg:RRoss" <grross1@asu.edu>
Date: Fri, 9 May 2025 11:36:30 -0700
Subject: [PATCH 61/63] Solve merge conflict to update branch to master

---
 src/components/entry/Menu.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/entry/Menu.vue b/src/components/entry/Menu.vue
index f096d572f..9476ff5f0 100644
--- a/src/components/entry/Menu.vue
+++ b/src/components/entry/Menu.vue
@@ -11,14 +11,9 @@
                 <button form="login-form" class="btn-normal btn-mars" @click="toConfiguration('mars')">MARS</button>
                 <button form="login-form" class="btn-normal btn-biosphere2" @click="toConfiguration('b2')">BIOSPHERE 2</button>
                 <button form="login-form" class="btn-normal" @click="uploadSimData">LOAD SIMULATION DATA</button>
-<<<<<<< HEAD
-                <button class="btn-normal" @click="showSurvey">LEAVE FEEDBACK</button>
-                <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
-                        @click="toAce">AGENT EDITOR</button>
-=======
                 <!-- <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
                         @click="toAce">AGENT EDITOR</button> -->
->>>>>>> master
+
                 <button :class="{'hidden': !showLiveMode}" form="login-form" class="btn-normal"
                         @click="toLiveDashboard">LIVE MODE</button>
                 <input id="simDataInputFile" ref="simDataInputFile" type="file"

From b568e3208bc5a4a86666f5bc6580ea06391a59e1 Mon Sep 17 00:00:00 2001
From: "Greg:RRoss" <grross1@asu.edu>
Date: Fri, 9 May 2025 11:39:10 -0700
Subject: [PATCH 62/63] Solve merge conflict to update branch to master

---
 src/components/entry/Menu.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/entry/Menu.vue b/src/components/entry/Menu.vue
index 9476ff5f0..60df5eb5f 100644
--- a/src/components/entry/Menu.vue
+++ b/src/components/entry/Menu.vue
@@ -77,16 +77,9 @@ export default {
             this.$router.push('configuration')
         },
         // Send the user to the ACE Configuration Editor
-<<<<<<< HEAD
         toAce() {
-            this.activeConfigType = 'Custom'
             this.$router.push('ace')
         },
-=======
-        // toAce() {
-        //     this.$router.push('ace')
-        // },
->>>>>>> master
         /** Routes the user to the live Dashboard. The minimum configuration required for any
          *  Dashboard instance to open without error is the min_step_num and a duration object
          *  composed of an 'amount' key-value pairing. Both of these values can be 0, but the

From 61e8c764ae9fc99cbf927c6c3b45d3869e4e830e Mon Sep 17 00:00:00 2001
From: "Greg:RRoss" <grross1@asu.edu>
Date: Sun, 11 May 2025 09:55:42 -0700
Subject: [PATCH 63/63] Unceomment ACE button (caused by merge?)

---
 src/components/entry/Menu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/entry/Menu.vue b/src/components/entry/Menu.vue
index 60df5eb5f..0d9b3aa2d 100644
--- a/src/components/entry/Menu.vue
+++ b/src/components/entry/Menu.vue
@@ -11,8 +11,8 @@
                 <button form="login-form" class="btn-normal btn-mars" @click="toConfiguration('mars')">MARS</button>
                 <button form="login-form" class="btn-normal btn-biosphere2" @click="toConfiguration('b2')">BIOSPHERE 2</button>
                 <button form="login-form" class="btn-normal" @click="uploadSimData">LOAD SIMULATION DATA</button>
-                <!-- <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
-                        @click="toAce">AGENT EDITOR</button> -->
+                 <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
+                        @click="toAce">AGENT EDITOR</button>
 
                 <button :class="{'hidden': !showLiveMode}" form="login-form" class="btn-normal"
                         @click="toLiveDashboard">LIVE MODE</button>