From c0abdae2e859b2a41110eb2bb07dd1456472cfbf Mon Sep 17 00:00:00 2001
From: Niko <nikolaus.feith@unileoben.ac.at>
Date: Wed, 8 Mar 2023 16:26:51 +0100
Subject: [PATCH] finished BO Manual case and BO fully functional

---
 ActiveBOWeb/src/components/ControlPanel.vue   | 160 +++++++++--------
 .../src/components/MountainCarCanvas.vue      |  40 ++---
 ActiveBOWeb/src/components/RewardPlot.vue     | 108 ++++++------
 ActiveBOWeb/src/components/RosBar.vue         | 165 +++++++++++-------
 ActiveBOWeb/src/components/SideBar.vue        |   4 +-
 ActiveBOWeb/src/components/SubLayout.vue      |  37 ++--
 ActiveBOWeb/src/components/TopBar.vue         |  28 ++-
 ActiveBOWeb/src/store/BaseWebsiteStore.js     |  46 ++---
 ActiveBOWeb/src/store/ControlStore.js         |  88 +++++-----
 ActiveBOWeb/src/store/MountainCarStore.js     |  58 +++---
 ActiveBOWeb/src/store/PolicyStore.js          |  60 +++----
 ActiveBOWeb/src/store/RewardStore.js          |  51 +++---
 12 files changed, 463 insertions(+), 382 deletions(-)

diff --git a/ActiveBOWeb/src/components/ControlPanel.vue b/ActiveBOWeb/src/components/ControlPanel.vue
index 97b730e..306ec43 100644
--- a/ActiveBOWeb/src/components/ControlPanel.vue
+++ b/ActiveBOWeb/src/components/ControlPanel.vue
@@ -2,60 +2,68 @@
   <v-row>
     <v-col>
       <v-select
-          :items="options"
-          label="User Mode"
-          v-model="modeSelector"
+        :items="options"
+        label="User Mode"
+        v-model="modeSelector"
       ></v-select>
       <v-slider
-          class="control-slider"
-          label="maximum steps"
-          v-model="pstore.max_steps"
-          :step="1"
-          :min="10"
-          :max="200"
-          thumb-label
+        class="control-slider"
+        label="maximum steps"
+        v-model="pstore.max_steps"
+        :step="1"
+        :min="10"
+        :max="200"
+        thumb-label
       />
       <v-slider
-          class="control-slider"
-          label="nr base funcs"
-          v-model="baseFuncsComp"
-          :step="1"
-          :min="2"
-          :max="20"
-          thumb-label
+        class="control-slider"
+        label="nr base funcs"
+        v-model="baseFuncsComp"
+        :step="1"
+        :min="2"
+        :max="20"
+        thumb-label
       />
       <v-slider
-          class="control-slider"
-          label="nr episodes"
-          v-model="cstore.nr_episodes"
-          :step="1"
-          :min="10"
-          :max="200"
-          thumb-label
-          :disabled="episodeRef"
+        class="control-slider"
+        label="nr episodes"
+        v-model="cstore.nr_episodes"
+        :step="1"
+        :min="10"
+        :max="200"
+        thumb-label
+        :disabled="episodeRef"
       />
       <v-slider
-          class="control-slider"
-          label="nr runs"
-          v-model="cstore.nr_runs"
-          :step="1"
-          :min="1"
-          :max="50"
-          thumb-label
-          :disabled="runRef"
+        class="control-slider"
+        label="nr runs"
+        v-model="cstore.nr_runs"
+        :step="1"
+        :min="2"
+        :max="50"
+        thumb-label
+        :disabled="runRef"
       />
+      <v-select
+        :items="acq_funs"
+        label="Acquisition Function"
+        v-model="acqSelector"
+        :disabled="acqRef"
+      ></v-select>
       <v-slider
-          class="control-slider"
-          label="greedy"
-          v-model="cstore.greedy"
-          :step="0.01"
-          :min="0"
-          :max="1"
-          thumb-label
-          :disabled="greedyRef"
+        class="control-slider"
+        label="greedy"
+        v-model="cstore.greedy"
+        :step="0.01"
+        :min="0"
+        :max="1"
+        thumb-label
+        :disabled="greedyRef"
       />
       <v-row class="d-flex justify-space-evenly mb-9">
-        <v-btn color="primary" @click="cstore.setSendWeights()">Send Weights</v-btn>
+        <v-btn color="primary" @click="cstore.setSendWeights()"
+          >Send Weights</v-btn
+        >
         <v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn>
       </v-row>
     </v-col>
@@ -63,52 +71,64 @@
 </template>
 
 <script setup>
-import {usePStore} from "@/store/PolicyStore";
-import {useCStore} from "@/store/ControlStore";
-import {computed, watch, ref} from "vue";
+import { usePStore } from "@/store/PolicyStore";
+import { useCStore } from "@/store/ControlStore";
+import { computed, watch, ref } from "vue";
 
 const pstore = usePStore();
 const cstore = useCStore();
 
 const options = cstore.user_modes;
+const acq_funs = cstore.acq_funs;
 
-const episodeRef = ref(false);
+const episodeRef = ref(true);
 const runRef = ref(true);
+const acqRef = ref(true);
 const greedyRef = ref(true);
 
 const baseFuncsComp = computed({
   get: () => pstore.nr_weights,
   set: (value) => pstore.setNrWeights(value),
-})
+});
 
 const modeSelector = computed({
   get: () => cstore.mode,
-  set: (value) => cstore.setUserMode(value)
-})
-
-watch(() => cstore.getUserMode, () => {
-  const usrMode = cstore.getUserMode;
-
-  if (usrMode === 'manually') {
-    episodeRef.value = true;
-    runRef.value = true;
-    greedyRef.value = true;
-  }
-  if (usrMode === 'BO') {
-    episodeRef.value = false;
-    runRef.value = false;
-    greedyRef.value = true;
-  }
-  if (usrMode === 'active BO') {
-    episodeRef.value = false;
-    runRef.value = false;
-    greedyRef.value = false;
-  }
+  set: (value) => cstore.setUserMode(value),
 });
+
+const acqSelector = computed({
+  get: () => cstore.acq_fun,
+  set: (value) => cstore.setAcq(value),
+});
+
+watch(
+  () => cstore.getUserMode,
+  () => {
+    const usrMode = cstore.getUserMode;
+
+    if (usrMode === "manually") {
+      episodeRef.value = true;
+      runRef.value = true;
+      acqRef.value = true;
+      greedyRef.value = true;
+    }
+    if (usrMode === "BO") {
+      episodeRef.value = false;
+      runRef.value = false;
+      acqRef.value = false;
+      greedyRef.value = true;
+    }
+    if (usrMode === "active BO") {
+      episodeRef.value = false;
+      runRef.value = false;
+      acqRef.value = false;
+      greedyRef.value = false;
+    }
+  }
+);
 </script>
 
 <style scoped>
-.control-slider{
+.control-slider {
 }
-
 </style>
diff --git a/ActiveBOWeb/src/components/MountainCarCanvas.vue b/ActiveBOWeb/src/components/MountainCarCanvas.vue
index 6d01a42..8131e18 100644
--- a/ActiveBOWeb/src/components/MountainCarCanvas.vue
+++ b/ActiveBOWeb/src/components/MountainCarCanvas.vue
@@ -3,14 +3,12 @@
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
-import {useMCStore} from "@/store/MountainCarStore";
+import { onMounted, ref, watch } from "vue";
+import { useMCStore } from "@/store/MountainCarStore";
 
 const mcstore = useMCStore();
 
 const imageData = ref(null);
-const canvasWidth = mcstore.width;
-const canvasHeight = mcstore.height;
 
 const renderImage = (width, height) => {
   const red = mcstore.getRed;
@@ -21,9 +19,9 @@ const renderImage = (width, height) => {
   for (let i = 0; i < height * width; i++) {
     const j = i * 4;
     rgbData[j] = red[i];
-    rgbData[j+1] = green[i];
-    rgbData[j+2] = blue[i];
-    rgbData[j+3] = 255;
+    rgbData[j + 1] = green[i];
+    rgbData[j + 2] = blue[i];
+    rgbData[j + 3] = 255;
   }
 
   imageData.value = rgbData;
@@ -31,13 +29,13 @@ const renderImage = (width, height) => {
 
 const drawImage = (width, height) => {
   if (imageData.value) {
-    const canvas = document.getElementById('MCcanvas');
-    const context = canvas.getContext('2d')
+    const canvas = document.getElementById("MCcanvas");
+    const context = canvas.getContext("2d");
 
     const image = new ImageData(imageData.value, width, height);
-    context.putImageData(image, 0 , 0);
+    context.putImageData(image, 0, 0);
   }
-}
+};
 
 onMounted(() => {
   const height = mcstore.getHeight;
@@ -46,15 +44,15 @@ onMounted(() => {
   drawImage(width, height);
 });
 
-watch(() => mcstore.trigger, () => {
-  const height = mcstore.getHeight;
-  const width = mcstore.getWidth;
-  renderImage(width, height);
-  drawImage(width, height);
-});
-
+watch(
+  () => mcstore.trigger,
+  () => {
+    const height = mcstore.getHeight;
+    const width = mcstore.getWidth;
+    renderImage(width, height);
+    drawImage(width, height);
+  }
+);
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/ActiveBOWeb/src/components/RewardPlot.vue b/ActiveBOWeb/src/components/RewardPlot.vue
index 40e93b8..2e4336b 100644
--- a/ActiveBOWeb/src/components/RewardPlot.vue
+++ b/ActiveBOWeb/src/components/RewardPlot.vue
@@ -1,12 +1,9 @@
 <template>
-  <canvas id="reward-chart"/>
+  <canvas id="reward-chart" />
 </template>
 
 <script setup>
-import {
-  onMounted,
-  watch,
-} from "vue";
+import { onMounted, watch } from "vue";
 import { Chart } from "chart.js/auto";
 import { useRStore } from "@/store/RewardStore";
 
@@ -17,47 +14,53 @@ let chartHandle;
 function buildChart() {
   const reward_mean = store.getMean;
   const reward_std = store.getStd;
-  const upper_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
-  const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
-  const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i);
+  const upper_bound = Array(reward_mean.length)
+    .fill(0)
+    .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
+  const lower_bound = Array(reward_mean.length)
+    .fill(0)
+    .map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
+  const reward_labels = Array(reward_mean.length)
+    .fill(0)
+    .map((_, i) => i);
   const RewardPlot = {
     data: {
       datasets: [
         {
-          label: 'Reward',
-          type: 'line',
-          xAxisID: 'x',
-          yAxisID: 'y',
+          label: "Reward",
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
           fill: false,
           data: reward_mean,
-          borderColor: '#3DC47A',
+          borderColor: "#3DC47A",
           borderWidth: 2,
           pointRadius: 0,
         },
         {
-          type: 'line',
-          xAxisID: 'x',
-          yAxisID: 'y',
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
           fill: 0,
           data: upper_bound,
           pointRadius: 0,
-          borderColor: 'transparent',
-
+          borderColor: "transparent",
+          backgroundColor: "rgba(61,196,122,0.5)",
         },
         {
-          type: 'line',
-          xAxisID: 'x',
-          yAxisID: 'y',
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
           fill: 0,
           data: lower_bound,
           pointRadius: 0,
-          borderColor: 'transparent',
-
+          borderColor: "transparent",
+          backgroundColor: "rgba(61,196,122,0.5)",
         },
       ],
     },
     options: {
-      plugins:{
+      plugins: {
         legend: {
           display: false,
         },
@@ -69,7 +72,7 @@ function buildChart() {
       },
       lineTension: 0,
       tooltip: {
-        mode: 'label',
+        mode: "label",
       },
       scales: {
         x: {
@@ -81,17 +84,18 @@ function buildChart() {
             autoSkip: true,
           },
         },
-        y:
-            {
-              type: 'linear',
-              ticks: {
-                beginAtZero: true,
-              },
-            },
+        y: {
+          type: "linear",
+          ticks: {
+            beginAtZero: false,
+            min: -110,
+            max: 0,
+          },
+        },
       },
     },
   };
-  const ctx = document.getElementById('reward-chart');
+  const ctx = document.getElementById("reward-chart");
   // eslint-disable-next-line no-new
   chartHandle = new Chart(ctx, RewardPlot);
 }
@@ -100,24 +104,28 @@ onMounted(() => {
   buildChart();
 });
 
-watch(() => store.getTrigger, () => {
-  const reward_mean = store.getMean;
-  const reward_std = store.getStd;
-  const upper_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
-  const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
+watch(
+  () => store.getTrigger,
+  () => {
+    const reward_mean = store.getMean;
+    const reward_std = store.getStd;
+    const upper_bound = Array(reward_mean.length)
+      .fill(0)
+      .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
+    const lower_bound = Array(reward_mean.length)
+      .fill(0)
+      .map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
 
-  const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i);
-
-  chartHandle.options.scales.x.labels = reward_labels;
-  chartHandle.data.datasets[0].data = reward_mean;
-  chartHandle.data.datasets[1].data = upper_bound;
-  chartHandle.data.datasets[2].data = lower_bound;
-
-  chartHandle.update();
-});
+    chartHandle.options.scales.x.labels = Array(reward_mean.length)
+      .fill(0)
+      .map((_, i) => i);
+    chartHandle.data.datasets[0].data = reward_mean;
+    chartHandle.data.datasets[1].data = upper_bound;
+    chartHandle.data.datasets[2].data = lower_bound;
 
+    chartHandle.update();
+  }
+);
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/ActiveBOWeb/src/components/RosBar.vue b/ActiveBOWeb/src/components/RosBar.vue
index 295df7e..f7e5d46 100644
--- a/ActiveBOWeb/src/components/RosBar.vue
+++ b/ActiveBOWeb/src/components/RosBar.vue
@@ -1,21 +1,24 @@
 <template>
-  <v-navigation-drawer
-      v-model="store.rosBarOpened"
-      temporary
-      location="right">
+  <v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
     <v-container fluid>
       <v-row justify="space-between">
         <v-col cols="6" md="12">
-          <v-text-field v-model="formState.ipaddress"
-                        label="IP Address"
-                        :disabled="connectionState"/>
-          <v-text-field v-model="formState.port"
-                        label="Port"
-                        :disabled="connectionState"/>
-          <v-switch @change="updateConnectionState"
-                    true-value="connected"
-                    false-value="not connected"
-                    :label="`${formState.connect}`"/>
+          <v-text-field
+            v-model="formState.ipaddress"
+            label="IP Address"
+            :disabled="connectionState"
+          />
+          <v-text-field
+            v-model="formState.port"
+            label="Port"
+            :disabled="connectionState"
+          />
+          <v-switch
+            @change="updateConnectionState"
+            true-value="connected"
+            false-value="not connected"
+            :label="`${formState.connect}`"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -23,31 +26,27 @@
 </template>
 
 <script setup>
-import * as ROS from 'roslib';
-import { useBWStore } from '@/store/BaseWebsiteStore';
+import * as ROS from "roslib";
+import { useBWStore } from "@/store/BaseWebsiteStore";
 import { usePStore } from "@/store/PolicyStore";
-import {useCStore} from "@/store/ControlStore";
+import { useCStore } from "@/store/ControlStore";
 
-import {
-  reactive,
-  ref,
-  watch,
-} from 'vue';
+import { reactive, ref, watch } from "vue";
 
 import * as ROSLIB from "roslib";
-import {useRStore} from "@/store/RewardStore";
-import {useMCStore} from "@/store/MountainCarStore";
+import { useRStore } from "@/store/RewardStore";
+import { useMCStore } from "@/store/MountainCarStore";
 
-const store =  useBWStore();
+const store = useBWStore();
 const pstore = usePStore();
 const cstore = useCStore();
 const rstore = useRStore();
 const mcstore = useMCStore();
 
 const formState = reactive({
-  ipaddress: 'localhost',
-  port: '9090',
-  connect: 'not connected',
+  ipaddress: "localhost",
+  port: "9090",
+  connect: "not connected",
   // connectionState: computed(() => formState.connect !== 'not connected'),
 });
 
@@ -56,25 +55,27 @@ const stateCounter = ref([0, 0, 0]);
 
 // Open Connection to ROSBridge and subscribe the topics.
 const ros = new ROS.Ros();
-ros.on('connection', () => {
+ros.on("connection", () => {
   stateCounter.value[0] += 1;
 });
 
-ros.on('error', (error) => {
+ros.on("error", (error) => {
   stateCounter.value[1] += 1;
   console.log(error);
 });
 
-ros.on('close', () => { stateCounter.value[2] += 1; });
+ros.on("close", () => {
+  stateCounter.value[2] += 1;
+});
 
 function updateConnectionState() {
   connectionState.value = !connectionState.value;
-  if (formState.connect === 'not connected') {
-    formState.connect = 'connected';
+  if (formState.connect === "not connected") {
+    formState.connect = "connected";
     const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
     ros.connect(rosUrl);
   } else {
-    formState.connect = 'not connected';
+    formState.connect = "not connected";
     ros.close();
   }
 }
@@ -85,71 +86,101 @@ const lastStateCounter = [0, 0, 0];
 watch(stateCounter.value, (newValue) => {
   let currentState = 0;
   for (let i = 0; i < lastStateCounter.length; i += 1) {
-    if ((newValue[i] - lastStateCounter[i]) === 1) {
+    if (newValue[i] - lastStateCounter[i] === 1) {
       currentState = i;
     }
     lastStateCounter[i] = newValue[i];
   }
   if (currentState === 0) {
-    store.setRosConState('connected');
+    store.setRosConState("connected");
   } else if (currentState === 1) {
-    store.setRosConState('error');
+    store.setRosConState("error");
   } else if (currentState === 2) {
-    store.setRosConState('not connected');
+    store.setRosConState("not connected");
   }
 });
 
 // Policy Service
 const policy_service = new ROSLIB.Service({
   ros: ros,
-  name: '/policy_srv',
-  serviceType: 'active_bo_msgs/srv/WeightToPolicy',
+  name: "/policy_srv",
+  serviceType: "active_bo_msgs/srv/WeightToPolicy",
 });
 
-watch(() => cstore.getSendWeights, () =>{
+watch(
+  () => cstore.getSendWeights,
+  () => {
+    const policy_request = new ROSLIB.ServiceRequest({
+      weights: pstore.weights,
+      nr_steps: pstore.max_steps,
+    });
 
-  const policy_request = new ROSLIB.ServiceRequest({
-    weights: pstore.weights,
-    nr_steps: pstore.max_steps,
-  })
-
-  policy_service.callService(policy_request, function (result) {
-    pstore.setPolicy(result.policy)
-  });
-});
+    policy_service.callService(policy_request, function (result) {
+      pstore.setPolicy(result.policy);
+    });
+  }
+);
 
 // RL Service + Feedback Suscriber
 const rl_feedback_subscriber = new ROSLIB.Topic({
   ros: ros,
-  name: '/rl_feedback',
-  message: 'active_bo_msgs/msg/ImageFeedback',
+  name: "/rl_feedback",
+  message: "active_bo_msgs/msg/ImageFeedback",
 });
 
-rl_feedback_subscriber.subscribe( (msg) => {
+rl_feedback_subscriber.subscribe((msg) => {
   mcstore.setDim(msg.height, msg.width);
   mcstore.setRgbArrays(msg.red, msg.green, msg.blue);
 });
 
 const rl_service = new ROSLIB.Service({
   ros: ros,
-  name: '/rl_srv',
-  serviceType: 'active_bo_msgs/srv/RLRollOut',
+  name: "/rl_srv",
+  serviceType: "active_bo_msgs/srv/RLRollOut",
 });
 
-watch(() => cstore.getRunner, () =>{
-
-  const rl_request = new ROSLIB.ServiceRequest({
-    policy: pstore.policy,
-  })
-
-  rl_service.callService(rl_request, function (rl_result) {
-    rstore.addMeanManually(rl_result.reward)
-  });
+const bo_service = new ROSLIB.Service({
+  ros: ros,
+  name: "/bo_srv",
+  serviceType: "active_bo_msgs/srv/BO",
 });
 
+watch(
+  () => cstore.getRunner,
+  () => {
+    const usr_mode = cstore.getUserMode;
 
+    if (usr_mode === "manually") {
+      const rl_request = new ROSLIB.ServiceRequest({
+        policy: pstore.policy,
+      });
+
+      rl_service.callService(rl_request, function (rl_response) {
+        rstore.addMeanManually(rl_response.reward);
+      });
+    } else if (usr_mode === "BO") {
+      const bo_request = new ROSLIB.ServiceRequest({
+        nr_weights: pstore.nr_weights,
+        max_steps: pstore.max_steps,
+        nr_episodes: cstore.nr_episodes,
+        nr_runs: cstore.nr_runs,
+        acquisition_function: cstore.acq_fun,
+      });
+
+      bo_service.callService(bo_request, function (bo_response) {
+        pstore.setPolicy(bo_response.best_policy);
+        pstore.setWeights(bo_response.best_weights);
+        rstore.setMean(bo_response.reward_mean);
+        rstore.setStd(bo_response.reward_std);
+      });
+      const rl_request = new ROSLIB.ServiceRequest({
+        policy: pstore.policy,
+      });
+
+      rl_service.callService(rl_request, () => {});
+    }
+  }
+);
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/ActiveBOWeb/src/components/SideBar.vue b/ActiveBOWeb/src/components/SideBar.vue
index a744951..2a49940 100644
--- a/ActiveBOWeb/src/components/SideBar.vue
+++ b/ActiveBOWeb/src/components/SideBar.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script setup>
-import { useBWStore } from '@/store/BaseWebsiteStore';
+import { useBWStore } from "@/store/BaseWebsiteStore";
 
 const store = useBWStore();
 </script>
 
 <style scoped>
-.sidebar-button{
+.sidebar-button {
   height: 48px;
   width: 48px;
   left: -16px;
diff --git a/ActiveBOWeb/src/components/SubLayout.vue b/ActiveBOWeb/src/components/SubLayout.vue
index 4106d22..a6001aa 100644
--- a/ActiveBOWeb/src/components/SubLayout.vue
+++ b/ActiveBOWeb/src/components/SubLayout.vue
@@ -4,18 +4,27 @@
       <v-col cols="12" md="8">
         <v-row no-gutters>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
-              <policy-plot/>
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+            >
+              <policy-plot />
             </v-card>
           </v-col>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(20vh - 24px)', width: '100%' }">
-              <weight-tuner/>
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
+            >
+              <weight-tuner />
             </v-card>
           </v-col>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
-              <reward-plot/>
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+            >
+              <reward-plot />
             </v-card>
           </v-col>
         </v-row>
@@ -23,13 +32,19 @@
       <v-col cols="12" md="4">
         <v-row no-gutters>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
-                <MountainCarCanvas/>
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+            >
+              <MountainCarCanvas />
             </v-card>
           </v-col>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(60vh - 48px)', width: '100%' }">
-              <control-panel/>
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(60vh - 48px)', width: '100%' }"
+            >
+              <control-panel />
             </v-card>
           </v-col>
         </v-row>
@@ -47,7 +62,7 @@ import MountainCarCanvas from "@/components/MountainCarCanvas.vue";
 </script>
 
 <style scoped>
-.sub-layout{
+.sub-layout {
   padding: 0;
   margin: 1px 0 0 0;
 }
diff --git a/ActiveBOWeb/src/components/TopBar.vue b/ActiveBOWeb/src/components/TopBar.vue
index 6baaac0..41c435f 100644
--- a/ActiveBOWeb/src/components/TopBar.vue
+++ b/ActiveBOWeb/src/components/TopBar.vue
@@ -1,10 +1,9 @@
 <template>
   <v-app-bar id="components-top-bar" class="elevation-1">
-    <v-img class="cps-image" :left="true" :src="pic"/>
-    <v-divider vertical class="image-divider"/>
-    <v-spacer/>
-    <v-btn
-        @click="store.toggleRosBar()" >
+    <v-img class="cps-image" :left="true" :src="pic" />
+    <v-divider vertical class="image-divider" />
+    <v-spacer />
+    <v-btn @click="store.toggleRosBar()">
       <v-icon :color="changeRosColor()" large>
         mdi-checkbox-blank-circle
       </v-icon>
@@ -14,31 +13,30 @@
 </template>
 
 <script setup>
-import { useBWStore } from '@/store/BaseWebsiteStore';
-import pic from '../assets/CPS_Logo_White.png';
+import { useBWStore } from "@/store/BaseWebsiteStore";
+import pic from "../assets/CPS_Logo_White.png";
 
 const store = useBWStore();
 
 const changeRosColor = () => {
   const conState = store.getRosConState;
-  if (conState === 'not connected') {
-    return 'red';
+  if (conState === "not connected") {
+    return "red";
   }
-  if (conState === 'connected') {
-    return 'green';
+  if (conState === "connected") {
+    return "green";
   }
-  return 'grey';
+  return "grey";
 };
-
 </script>
 
 <style scoped>
-.cps-image{
+.cps-image {
   left: 8px;
   max-width: 48px;
   max-height: 48px;
 }
-.image-divider{
+.image-divider {
   position: absolute;
   left: 64px;
 }
diff --git a/ActiveBOWeb/src/store/BaseWebsiteStore.js b/ActiveBOWeb/src/store/BaseWebsiteStore.js
index 6cd7ed6..5fc97dd 100644
--- a/ActiveBOWeb/src/store/BaseWebsiteStore.js
+++ b/ActiveBOWeb/src/store/BaseWebsiteStore.js
@@ -1,27 +1,27 @@
 import { defineStore } from "pinia";
 
-export const useBWStore = defineStore('Base Website Store', {
-    state: () => {
-        return {
-            play: false,
-            rosBarOpened: true,
-            rosConState: 'not connected',
-        }
+export const useBWStore = defineStore("Base Website Store", {
+  state: () => {
+    return {
+      play: false,
+      rosBarOpened: true,
+      rosConState: "not connected",
+    };
+  },
+  getters: {
+    getPlay: (state) => state.play,
+    getRosBarOpened: (state) => state.rosBarOpened,
+    getRosConState: (state) => state.rosConState,
+  },
+  actions: {
+    setPlay() {
+      this.play = !this.play;
     },
-    getters: {
-        getPlay: (state) => state.play,
-        getRosBarOpened: (state) => state.rosBarOpened,
-        getRosConState: (state) => state.rosConState,
+    toggleRosBar() {
+      this.rosBarOpened = !this.rosBarOpened;
     },
-    actions: {
-        setPlay() {
-            this.play = !this.play;
-        },
-        toggleRosBar() {
-            this.rosBarOpened = !this.rosBarOpened;
-        },
-        setRosConState(value) {
-            this.rosConState = value;
-        },
-    }
-})
+    setRosConState(value) {
+      this.rosConState = value;
+    },
+  },
+});
diff --git a/ActiveBOWeb/src/store/ControlStore.js b/ActiveBOWeb/src/store/ControlStore.js
index 5373a23..18f2b18 100644
--- a/ActiveBOWeb/src/store/ControlStore.js
+++ b/ActiveBOWeb/src/store/ControlStore.js
@@ -1,43 +1,53 @@
 import { defineStore } from "pinia";
 
-export const useCStore = defineStore('Control Store', {
-    state: () => {
-        return {
-            mode: 'manually',
-            user_modes: ['manually', 'BO', 'active BO'],
-            nr_episodes: 10,
-            nr_runs: 1,
-            greedy: 0,
-            sendWeights: false,
-            runner: false,
-        }
+export const useCStore = defineStore("Control Store", {
+  state: () => {
+    return {
+      mode: "manually",
+      user_modes: ["manually", "BO", "active BO"],
+      acq_fun: "Expected Improvement",
+      acq_funs: [
+        "Expected Improvement",
+        "Probability of Improvement",
+        "Upper Confidence Bound",
+      ],
+      nr_episodes: 10,
+      nr_runs: 2,
+      greedy: 0,
+      sendWeights: false,
+      runner: false,
+    };
+  },
+  getters: {
+    getUserMode: (state) => state.mode,
+    getNrEpisodes: (state) => state.nr_episodes,
+    getNrRuns: (state) => state.nr_runs,
+    getGreedy: (state) => state.greedy,
+    getSendWeights: (state) => state.sendWeights,
+    getRunner: (state) => state.runner,
+    getAcq: (state) => state.acq_fun,
+  },
+  actions: {
+    setUserMode(value) {
+      this.mode = value;
     },
-    getters: {
-        getUserMode: (state) => state.mode,
-        getNrEpisodes: (state) => state.nr_episodes,
-        getNrRuns: (state) => state.nr_runs,
-        getGreedy: (state) => state.greedy,
-        getSendWeights: (state) => state.sendWeights,
-        getRunner: (state) => state.runner,
+    setNrEpisodes(value) {
+      this.nr_episodes = value;
     },
-    actions: {
-        setUserMode(value) {
-            this.mode = value;
-        },
-        setNrEpisodes(value) {
-            this.nr_episodes = value;
-        },
-        setNrRuns(value) {
-            this.nr_runs = value;
-        },
-        setGreedy(value) {
-            this.greedy = value;
-        },
-        setSendWeights() {
-            this.sendWeights = !this.sendWeights;
-        },
-        setRunner() {
-            this.runner = !this.runner;
-        },
-    }
-})
+    setNrRuns(value) {
+      this.nr_runs = value;
+    },
+    setGreedy(value) {
+      this.greedy = value;
+    },
+    setSendWeights() {
+      this.sendWeights = !this.sendWeights;
+    },
+    setRunner() {
+      this.runner = !this.runner;
+    },
+    setAcq(value) {
+      this.acq_fun = value;
+    },
+  },
+});
diff --git a/ActiveBOWeb/src/store/MountainCarStore.js b/ActiveBOWeb/src/store/MountainCarStore.js
index 47b5b14..af082d8 100644
--- a/ActiveBOWeb/src/store/MountainCarStore.js
+++ b/ActiveBOWeb/src/store/MountainCarStore.js
@@ -1,33 +1,33 @@
 import { defineStore } from "pinia";
 
-export const useMCStore = defineStore('Mountain Car Store', {
-    state: () => {
-        return {
-            red: Array(153600).fill(120),
-            green: Array(153600).fill(120),
-            blue: Array(153600).fill(120),
-            width: 480,
-            height: 320,
-            trigger: false,
-        }
+export const useMCStore = defineStore("Mountain Car Store", {
+  state: () => {
+    return {
+      red: Array(153600).fill(120),
+      green: Array(153600).fill(120),
+      blue: Array(153600).fill(120),
+      width: 480,
+      height: 320,
+      trigger: false,
+    };
+  },
+  getters: {
+    getRed: (state) => state.red,
+    getGreen: (state) => state.green,
+    getBlue: (state) => state.blue,
+    getHeight: (state) => state.height,
+    getWidth: (state) => state.width,
+  },
+  actions: {
+    setRgbArrays(red, green, blue) {
+      this.red = red;
+      this.green = green;
+      this.blue = blue;
+      this.trigger = !this.trigger;
     },
-    getters: {
-        getRed: (state) => state.red,
-        getGreen: (state) => state.green,
-        getBlue: (state) => state.blue,
-        getHeight: (state) => state.height,
-        getWidth: (state) => state.width,
+    setDim(height, width) {
+      this.height = height;
+      this.width = width;
     },
-    actions: {
-        setRgbArrays(red, green, blue) {
-            this.red = red;
-            this.green = green;
-            this.blue = blue;
-            this.trigger = !this.trigger;
-        },
-        setDim(height, width) {
-            this.height = height;
-            this.width = width;
-        },
-    }
-})
+  },
+});
diff --git a/ActiveBOWeb/src/store/PolicyStore.js b/ActiveBOWeb/src/store/PolicyStore.js
index 4311bb8..e09a470 100644
--- a/ActiveBOWeb/src/store/PolicyStore.js
+++ b/ActiveBOWeb/src/store/PolicyStore.js
@@ -1,34 +1,34 @@
 import { defineStore } from "pinia";
 
-export const usePStore = defineStore('Policy Store', {
-    state: () => {
-        return {
-            policy: Array(10).fill(0),
-            nr_weights: 5,
-            weights: [-1, -1, 1, 0, 0],
-            max_steps: 100,
-        }
+export const usePStore = defineStore("Policy Store", {
+  state: () => {
+    return {
+      policy: Array(10).fill(0),
+      nr_weights: 5,
+      weights: [-1, -1, 1, 0, 0],
+      max_steps: 100,
+    };
+  },
+  getters: {
+    getPolicy: (state) => state.policy,
+    getNrWeights: (state) => state.nr_weights,
+    getWeights: (state) => state.weights,
+    getMaxSteps: (state) => state.max_steps,
+  },
+  actions: {
+    setPolicy(value) {
+      this.policy = null;
+      this.policy = value;
     },
-    getters: {
-        getPolicy: (state) => state.policy,
-        getNrWeights: (state) => state.nr_weights,
-        getWeights: (state) => state.weights,
-        getMaxSteps: (state) => state.max_steps,
+    setNrWeights(value) {
+      this.nr_weights = value;
+      this.weights = Array(this.nr_weights).fill(0);
     },
-    actions: {
-        setPolicy(value) {
-            this.policy = null;
-            this.policy = value;
-        },
-        setNrWeights(value) {
-            this.nr_weights = value;
-            this.weights = Array(this.nr_weights).fill(0);
-        },
-        setWeights(value) {
-            this.weights = value;
-        },
-        setMaxSteps(value) {
-            this.max_steps = value;
-        },
-    }
-})
+    setWeights(value) {
+      this.weights = value;
+    },
+    setMaxSteps(value) {
+      this.max_steps = value;
+    },
+  },
+});
diff --git a/ActiveBOWeb/src/store/RewardStore.js b/ActiveBOWeb/src/store/RewardStore.js
index 2a4429f..7648a84 100644
--- a/ActiveBOWeb/src/store/RewardStore.js
+++ b/ActiveBOWeb/src/store/RewardStore.js
@@ -1,29 +1,30 @@
 import { defineStore } from "pinia";
 
-export const useRStore = defineStore('Reward Store', {
-    state: () => {
-        return {
-            reward_mean: [],
-            reward_std: [],
-            trigger: false,
-        }
+export const useRStore = defineStore("Reward Store", {
+  state: () => {
+    return {
+      reward_mean: [],
+      reward_std: [],
+      trigger: false,
+    };
+  },
+  getters: {
+    getMean: (state) => state.reward_mean,
+    getStd: (state) => state.reward_std,
+    getTrigger: (state) => state.trigger,
+  },
+  actions: {
+    setMean(value) {
+      this.reward_mean = value;
     },
-    getters: {
-        getMean: (state) => state.reward_mean,
-        getStd: (state) => state.reward_std,
-        getTrigger: (state) => state.trigger,
+    setStd(value) {
+      this.reward_std = value;
+      this.trigger = !this.trigger;
     },
-    actions: {
-        setMean(value) {
-            this.reward_mean = value;
-        },
-        setStd(value) {
-            this.reward_std = value;
-        },
-        addMeanManually(value) {
-            this.reward_mean[this.reward_mean.length] = value;
-            this.reward_std[this.reward_std.length] = 0;
-            this.trigger = !this.trigger;
-        },
-    }
-})
+    addMeanManually(value) {
+      this.reward_mean[this.reward_mean.length] = value;
+      this.reward_std[this.reward_std.length] = 0;
+      this.trigger = !this.trigger;
+    },
+  },
+});