From 84bb5d013f7948bd3878e556e8e7a4e1b82ef0e0 Mon Sep 17 00:00:00 2001
From: Niko <nikolaus.feith@unileoben.ac.at>
Date: Wed, 31 May 2023 19:08:15 +0200
Subject: [PATCH] usability improvements and saving function testing for bo and
 manual usage completed

---
 ActiveBOWeb/src/components/ControlPanel.vue |  12 ++-
 ActiveBOWeb/src/components/RosBar.vue       |  15 +++
 ActiveBOWeb/src/components/SideBar.vue      | 103 ++++++++++++++------
 ActiveBOWeb/src/store/ControlStore.js       |   1 +
 ActiveBOWeb/src/store/RLStore.js            |  20 ++++
 5 files changed, 118 insertions(+), 33 deletions(-)

diff --git a/ActiveBOWeb/src/components/ControlPanel.vue b/ActiveBOWeb/src/components/ControlPanel.vue
index 7b8cf3a..15e08c0 100644
--- a/ActiveBOWeb/src/components/ControlPanel.vue
+++ b/ActiveBOWeb/src/components/ControlPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row>
-    <v-col>
+    <v-col class="px-4">
       <v-row class="d-flex justify-space-evenly">
         <v-select
           :items="envs"
@@ -36,7 +36,7 @@
         label="nr episodes"
         v-model="cstore.nr_episodes"
         :step="1"
-        :min="10"
+        :min="1"
         :max="200"
         thumb-label
       />
@@ -46,10 +46,11 @@
         v-model="cstore.nr_runs"
         :step="1"
         :min="1"
-        :max="50"
+        :max="100"
         thumb-label
       />
       <v-select
+        class="justify-space-evenly"
         :items="acq_funs"
         label="Acquisition Function"
         v-model="acqSelector"
@@ -63,7 +64,10 @@
         :max="1"
         thumb-label
       />
-      <v-checkbox v-model="cstore.fixed_seed" label="fixed seed" />
+      <v-row class="justify-space-evenly pa-1">
+        <v-checkbox v-model="cstore.fixed_seed" label="fixed seed" />
+        <v-checkbox v-model="cstore.save_result" label="save_result" />
+      </v-row>
       <v-row class="d-flex justify-space-evenly mb-1">
         <v-btn color="primary" @click="cstore.setSendWeights()"
           >Send Weights</v-btn
diff --git a/ActiveBOWeb/src/components/RosBar.vue b/ActiveBOWeb/src/components/RosBar.vue
index 81c7982..a2e945d 100644
--- a/ActiveBOWeb/src/components/RosBar.vue
+++ b/ActiveBOWeb/src/components/RosBar.vue
@@ -105,6 +105,20 @@ watch(stateCounter.value, (newValue) => {
   }
 });
 
+// State Subscriber
+const state_subscriber = new ROS.Topic({
+  ros: ros,
+  name: "/active_bo_state",
+  messageType: "active_bo_msgs/msg/ActiveBOState",
+});
+
+state_subscriber.subscribe((msg) => {
+  rlstore.setCurrentRun(msg.current_run);
+  rlstore.setCurrentEpisode(msg.current_episode);
+  rlstore.setBestReward(msg.best_reward);
+  rlstore.setLastUserReward(msg.last_user_reward);
+});
+
 // RL Service + Feedback Subscriber
 const rl_feedback_subscriber = new ROS.Topic({
   ros: ros,
@@ -205,6 +219,7 @@ watch(
       nr_runs: cstore.nr_runs,
       acquisition_function: cstore.acq_fun,
       metric_parameter: cstore.metric_parameter,
+      save_result: cstore.save_result,
     });
     active_bo_pending.value = true;
     active_bo_request.publish(request_msg);
diff --git a/ActiveBOWeb/src/components/SideBar.vue b/ActiveBOWeb/src/components/SideBar.vue
index 9ce4946..ef2bf5f 100644
--- a/ActiveBOWeb/src/components/SideBar.vue
+++ b/ActiveBOWeb/src/components/SideBar.vue
@@ -1,39 +1,84 @@
 <template>
-  <v-navigation-drawer permanent width="64">
-    <v-container fluid>
-      <v-btn class="sidebar-button" @click="store.setPlay()">
-        <v-icon v-if="!store.getPlay">mdi-play</v-icon>
-        <v-icon v-else>mdi-pause</v-icon>
-      </v-btn>
-    </v-container>
-    <v-card class="pa-0" outlined style="width: 64px">
-      <v-card-text>
-        <pre>
-Current
-  Run:
-   1
-        </pre>
-      </v-card-text>
-    </v-card>
+  <v-navigation-drawer class="nav-drawer" permanent width="64">
+    <v-list class="py-3">
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >Current <br />
+            Run <br />
+            {{ rlstore.current_run }}</span
+          >
+        </div>
+      </v-list-item>
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >Current <br />
+            Episode <br />
+            {{ rlstore.current_episode }}</span
+          >
+        </div>
+      </v-list-item>
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >Best <br />
+            Reward <br />
+            {{ rlstore.best_reward.toFixed(1) }}</span
+          >
+        </div>
+      </v-list-item>
+      <v-list-item style="padding: 0" class="py-2">
+        <div class="tile">
+          <span
+            style="
+              font-size: 14px;
+              text-align: center;
+              word-wrap: break-word;
+              padding: 0;
+            "
+            >User <br />
+            Reward <br />
+            {{ rlstore.last_user_reward.toFixed(1) }}</span
+          >
+        </div>
+      </v-list-item>
+    </v-list>
   </v-navigation-drawer>
 </template>
 
 <script setup>
-import { useBWStore } from "@/store/BaseWebsiteStore";
-
-const store = useBWStore();
+import { useRLStore } from "@/store/RLStore";
+const rlstore = useRLStore();
 </script>
 
 <style scoped>
-.sidebar-button {
-  height: 48px;
-  width: 48px;
-  left: -16px;
-  box-shadow: none;
-  border-radius: 0;
-}
-
-pre {
-  margin: 0;
+.tile {
+  width: 63px;
+  height: 64px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 }
 </style>
diff --git a/ActiveBOWeb/src/store/ControlStore.js b/ActiveBOWeb/src/store/ControlStore.js
index 23acadc..a2fe505 100644
--- a/ActiveBOWeb/src/store/ControlStore.js
+++ b/ActiveBOWeb/src/store/ControlStore.js
@@ -19,6 +19,7 @@ export const useCStore = defineStore("Control Store", {
       sendWeights: false,
       runner: false,
       fixed_seed: false,
+      save_result: false,
     };
   },
   getters: {
diff --git a/ActiveBOWeb/src/store/RLStore.js b/ActiveBOWeb/src/store/RLStore.js
index ba8b758..0851e5c 100644
--- a/ActiveBOWeb/src/store/RLStore.js
+++ b/ActiveBOWeb/src/store/RLStore.js
@@ -9,6 +9,10 @@ export const useRLStore = defineStore("RL Store", {
       width: 480,
       height: 320,
       current_time: 0,
+      current_run: 0,
+      current_episode: 0,
+      best_reward: 0.0,
+      last_user_reward: 0.0,
       trigger: false,
     };
   },
@@ -19,6 +23,10 @@ export const useRLStore = defineStore("RL Store", {
     getHeight: (state) => state.height,
     getWidth: (state) => state.width,
     getCurrentTime: (state) => state.current_time,
+    getCurrentRun: (state) => state.current_run,
+    getCurrentEpisode: (state) => state.current_episode,
+    getBestReward: (state) => state.best_reward,
+    getLastUserReward: (state) => state.last_user_reward,
   },
   actions: {
     setRgbArrays(red, green, blue) {
@@ -34,5 +42,17 @@ export const useRLStore = defineStore("RL Store", {
     setCurrentTime(value) {
       this.current_time = value;
     },
+    setCurrentRun(value) {
+      this.current_run = value;
+    },
+    setCurrentEpisode(value) {
+      this.current_episode = value;
+    },
+    setBestReward(value) {
+      this.best_reward = value;
+    },
+    setLastUserReward(value) {
+      this.last_user_reward = value;
+    },
   },
 });