From 899ef5be2ee134da922f4e4833bb475277750f56 Mon Sep 17 00:00:00 2001
From: "nikolaus.feith" <nikolaus.feith@unileoben.ac.at>
Date: Tue, 28 Feb 2023 16:24:12 +0100
Subject: [PATCH] layout complete

---
 ActiveBOWeb/src/components/ControlPanel.vue | 101 ++++++++++++++------
 ActiveBOWeb/src/components/PolicyPlot.vue   |  10 +-
 ActiveBOWeb/src/components/RewardPlot.vue   |   9 +-
 ActiveBOWeb/src/components/SubLayout.vue    |  53 +++++++++-
 ActiveBOWeb/src/components/WeightTuner.vue  |  31 +++---
 ActiveBOWeb/src/rosInterfaces/policy_srv.js |  18 ----
 ActiveBOWeb/src/store/ControlStore.js       |   7 +-
 7 files changed, 152 insertions(+), 77 deletions(-)
 delete mode 100644 ActiveBOWeb/src/rosInterfaces/policy_srv.js

diff --git a/ActiveBOWeb/src/components/ControlPanel.vue b/ActiveBOWeb/src/components/ControlPanel.vue
index cd9aef3..a1d0c12 100644
--- a/ActiveBOWeb/src/components/ControlPanel.vue
+++ b/ActiveBOWeb/src/components/ControlPanel.vue
@@ -1,49 +1,90 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="12" sm="6">
-        <v-select
-            :items="options"
-            label="Select an option"
-            v-model="selectedOption"
-        ></v-select>
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col cols="12" sm="6" v-for="(slider, index) in sliders" :key="index">
-        <v-slider
-            :max="slider.max"
-            :min="slider.min"
-            v-model="slider.value"
-            label="Slider {{index+1}}"
-        ></v-slider>
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col cols="12" sm="6">
+  <v-row>
+    <v-col>
+      <v-select
+          :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/>
+      <v-slider
+          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/>
+      <v-slider
+          class="control-slider"
+          label="nr runs"
+          v-model="cstore.nr_runs"
+          :step="1"
+          :min="1"
+          :max="50"
+          thumb-label/>
+      <v-slider
+          class="control-slider"
+          label="greedy"
+          v-model="cstore.greedy"
+          :step="0.01"
+          :min="0"
+          :max="1"
+          thumb-label/>
+      <v-row class="d-flex justify-space-evenly mb-9">
         <v-btn color="primary" @click="cstore.setSendWeights()">Send Weights</v-btn>
-      </v-col>
-      <v-col cols="12" sm="6">
         <v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
+      </v-row>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
 import {usePStore} from "@/store/PolicyStore";
 import {useCStore} from "@/store/ControlStore";
+import {computed} from "vue";
 
 const pstore = usePStore();
 const cstore = useCStore();
 
-const options = ['manually', 'BO', 'active BO'];
-const selectedOption = cstore.user_mode;
-// TODO: Copy code from gpt
+const options = cstore.user_modes;
+const selectedOption = cstore.mode;
 
+const sliders = [
+  { min: 10, max: 200, value: pstore.max_steps, name: 'max steps', action: pstore.setMaxSteps},
+  { min: 5, max: 10, value: pstore.nr_weights, name: 'nr base funs', action: pstore.setNrWeights},
+  { min: 10, max: 200, value: cstore.nr_episodes, name: 'nr episodes', action: cstore.setNrEpisodes},
+  { min: 1, max: 100, value: cstore.nr_runs, name: 'nr runs', action: cstore.setNrRuns},
+  { min: 0, max: 1, value: cstore.greedy, name: 'greedy', action: cstore.setGreedy},
+];
+const baseFuncsComp = computed({
+  get: () => pstore.nr_weights,
+  set: (value) => pstore.setNrWeights(value),
+})
 
+const modeSelector = computed({
+  get: () => cstore.mode,
+  set: (value) => cstore.setUserMode(value)
+})
 </script>
 
 <style scoped>
+.control-slider{
+}
 
 </style>
diff --git a/ActiveBOWeb/src/components/PolicyPlot.vue b/ActiveBOWeb/src/components/PolicyPlot.vue
index 4df3df2..225c532 100644
--- a/ActiveBOWeb/src/components/PolicyPlot.vue
+++ b/ActiveBOWeb/src/components/PolicyPlot.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <canvas id="policy-chart"/>
-  </div>
+  <canvas id="policy-chart"/>
 </template>
 
 <script setup>
@@ -20,7 +18,6 @@ function buildChart() {
     data: {
       datasets: [
         {
-          label: 'Reward',
           type: 'line',
           xAxisID: 'x',
           yAxisID: 'y',
@@ -37,6 +34,11 @@ function buildChart() {
       animation: {
         duration: 0,
       },
+      plugins:{
+        legend: {
+          display: false,
+        },
+      },
       lineTension: 0,
       tooltip: {
         mode: 'label',
diff --git a/ActiveBOWeb/src/components/RewardPlot.vue b/ActiveBOWeb/src/components/RewardPlot.vue
index 2782851..a6fe669 100644
--- a/ActiveBOWeb/src/components/RewardPlot.vue
+++ b/ActiveBOWeb/src/components/RewardPlot.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <canvas id="reward-chart"/>
-  </div>
+  <canvas id="reward-chart"/>
 </template>
 
 <script setup>
@@ -59,6 +57,11 @@ function buildChart() {
       ],
     },
     options: {
+      plugins:{
+        legend: {
+          display: false,
+        },
+      },
       maintainAspectRatio: false,
       responsive: true,
       animation: {
diff --git a/ActiveBOWeb/src/components/SubLayout.vue b/ActiveBOWeb/src/components/SubLayout.vue
index 2ccde33..fa021a1 100644
--- a/ActiveBOWeb/src/components/SubLayout.vue
+++ b/ActiveBOWeb/src/components/SubLayout.vue
@@ -1,15 +1,62 @@
 <template>
-  <policy-plot/>
-  <weight-tuner/>
-  <reward-plot/>
+  <v-container fluid class="sub-layout">
+    <v-row no-gutters>
+      <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>
+          </v-col>
+          <v-col cols="12">
+            <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>
+          </v-col>
+        </v-row>
+      </v-col>
+      <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%' }">
+              <!-- component 4 here -->
+            </v-card>
+          </v-col>
+          <v-col cols="12">
+            <v-card class="tile" :style="{ height: 'calc(60vh - 48px)', width: '100%' }">
+              <control-panel/>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
 import WeightTuner from "@/components/WeightTuner.vue";
 import RewardPlot from "@/components/RewardPlot.vue";
 import PolicyPlot from "@/components/PolicyPlot.vue";
+import ControlPanel from "@/components/ControlPanel.vue";
 </script>
 
 <style scoped>
+.sub-layout{
+  padding: 0;
+  margin: 1px 0 0 0;
+}
+.tile {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  border: 1px solid #333;
+}
 </style>
diff --git a/ActiveBOWeb/src/components/WeightTuner.vue b/ActiveBOWeb/src/components/WeightTuner.vue
index 79078a0..285d28a 100644
--- a/ActiveBOWeb/src/components/WeightTuner.vue
+++ b/ActiveBOWeb/src/components/WeightTuner.vue
@@ -1,19 +1,17 @@
 <template>
- <v-card class="weight-tuner">
-   <v-row no-gutters justify="center">
-     <v-col v-for="(_, idx) in weights">
-       <div class="weight-container">
-         <vue-slider v-model="weights[idx]"
-                     direction="btt"
-                     :height="100"
-                     :min="-1"
-                     :max="1"
-                     :interval="0.01"
-         />
-       </div>
-     </v-col>
-   </v-row>
- </v-card>
+ <v-row no-gutters justify="center" class="weight-tuner">
+   <v-col v-for="(_, idx) in weights">
+     <div class="weight-container">
+       <vue-slider v-model="weights[idx]"
+                   direction="btt"
+                   :height="100"
+                   :min="-1"
+                   :max="1"
+                   :interval="0.01"
+       />
+     </div>
+   </v-col>
+ </v-row>
 </template>
 
 <script setup>
@@ -21,10 +19,11 @@ import { usePStore } from "@/store/PolicyStore";
 
 import VueSlider from "vue-slider-component";
 import 'vue-slider-component/theme/default.css';
+import {computed} from "vue";
 
 const store = usePStore()
 
-const weights = store.weights;
+const weights = computed(() => store.weights);
 
 </script>
 
diff --git a/ActiveBOWeb/src/rosInterfaces/policy_srv.js b/ActiveBOWeb/src/rosInterfaces/policy_srv.js
deleted file mode 100644
index e5f3dcb..0000000
--- a/ActiveBOWeb/src/rosInterfaces/policy_srv.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as ROSLIB from 'roslib';
-import { usePStore } from "../store/PolicyStore";
-
-const store = usePStore();
-
-export function PolicyService(ros) {
-    const service = new ROSLIB.Service({
-        ros: ros,
-        name: '/policy_srv',
-        serviceType: 'active_bo_msgs/srv/WeightToPolicy',
-    });
-
-    const request = new ROSLIB.ServiceRequest({
-        weights: store.weights,
-        nr_steps: store.nr_steps,
-    })
-
-}
diff --git a/ActiveBOWeb/src/store/ControlStore.js b/ActiveBOWeb/src/store/ControlStore.js
index 4e93162..868c890 100644
--- a/ActiveBOWeb/src/store/ControlStore.js
+++ b/ActiveBOWeb/src/store/ControlStore.js
@@ -3,7 +3,8 @@ import { defineStore } from "pinia";
 export const useCStore = defineStore('Control Store', {
     state: () => {
         return {
-            user_mode: 'manually',
+            mode: null,
+            user_modes: ['manually', 'BO', 'active BO'],
             nr_episodes: 10,
             nr_runs: 1,
             greedy: 0,
@@ -12,7 +13,7 @@ export const useCStore = defineStore('Control Store', {
         }
     },
     getters: {
-        getUserMode: (state) => state.user_mode,
+        getUserMode: (state) => state.mode,
         getNrEpisodes: (state) => state.nr_episodes,
         getNrRuns: (state) => state.nr_runs,
         getGreedy: (state) => state.greedy,
@@ -21,7 +22,7 @@ export const useCStore = defineStore('Control Store', {
     },
     actions: {
         setUserMode(value) {
-            this.user_mode = value;
+            this.mode = value;
         },
         setNrEpisodes(value) {
             this.nr_episodes = value;