initial Commit

ActiveBOWeb/package.json

@@ -16,6 +16,8 @@
     "roslib": "^1.3.0",
     "vue": "^3.2.45",
     "vue-resource": "^1.5.3",
+    "vue-slider-component": "^3.2.24",
+    "vue3-slider": "^1.8.0",
     "vuetify": "^3.1.4"
   },
   "devDependencies": {

ActiveBOWeb/src/components/PolicyPlot.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "PolicyPlot"
+}
+</script>
+
+<style scoped>
+
+</style>

ActiveBOWeb/src/components/RewardPlot.vue

@@ -10,8 +10,106 @@ import {
   onMounted,
   watch,
 } from "vue";
-import { Chart } from 'chart.js/auto';
+import { Chart } from "chart.js/auto";
+import { useRStore } from "@/store/RewardStore";
 
+const store = useRStore();
+
+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 RewardPlot = {
+    data: {
+      datasets: [
+        {
+          label: 'Reward',
+          type: 'line',
+          xAxisID: 'x',
+          yAxisID: 'y',
+          fill: false,
+          data: reward_mean,
+          borderColor: '#3DC47A',
+          borderWidth: 2,
+          pointRadius: 0,
+        },
+        {
+          type: 'line',
+          xAxisID: 'x',
+          yAxisID: 'y',
+          fill: 0,
+          data: upper_bound,
+          pointRadius: 0,
+          borderColor: 'transparent',
+
+        },
+        {
+          type: 'line',
+          xAxisID: 'x',
+          yAxisID: 'y',
+          fill: 0,
+          data: lower_bound,
+          pointRadius: 0,
+          borderColor: 'transparent',
+
+        },
+      ],
+    },
+    options: {
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+        duration: 0,
+      },
+      lineTension: 0,
+      tooltip: {
+        mode: 'label',
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+          },
+          labels: reward_labels,
+          ticks: {
+            autoSkip: true,
+          },
+        },
+        y:
+            {
+              type: 'linear',
+              ticks: {
+                beginAtZero: true,
+              },
+            },
+      },
+    },
+  };
+  const ctx = document.getElementById('reward-chart');
+  // eslint-disable-next-line no-new
+  chartHandle = new Chart(ctx, RewardPlot);
+}
+
+onMounted(() => {
+  buildChart();
+});
+
+watch(() => store.getMean(), () => {
+  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]);
+
+  chartHandle.data.dataset[0].data = reward_mean;
+  chartHandle.data.dataset[1].data = upper_bound;
+  chartHandle.data.dataset[2].data = lower_bound;
+
+  chartHandle.update();
+});
 
 </script>
 

ActiveBOWeb/src/components/SubLayout.vue

@@ -1,9 +1,9 @@
 <template>
-
+<weight-tuner/>
 </template>
 
 <script setup>
-
+import WeightTuner from "@/components/WeightTuner.vue";
 </script>
 
 <style scoped>

ActiveBOWeb/src/components/WeightTuner.vue

@@ -0,0 +1,44 @@
+<template>
+ <v-card height="200px">
+   <v-row>
+     <v-col v-for="(_, idx) in store.weights" align-self="center">
+<!--       <Vue3Slider v-model="weights[idx]"-->
+<!--                   :min="-1"-->
+<!--                   :max="1"-->
+<!--                   :step="0.01"-->
+<!--                   orientation="vertical"-->
+<!--                   class="weight-slider"-->
+<!--       />-->
+<!--       <v-slider v-model="weights[idx]"-->
+<!--                 direction="vertical"-->
+<!--                 :label="idx.toString()"-->
+<!--                 min="-1" max="1"-->
+<!--                 :step="0.01"-->
+<!--                 style="max-height: 200px"-->
+<!--                 density="comfortable"/>-->
+     </v-col>
+   </v-row>
+ </v-card>
+</template>
+
+<script setup>
+import { usePStore } from "@/store/PolicyStore";
+import VueSlider from "vue-slider-component";
+
+const store = usePStore()
+
+const weights = store.weights;
+
+
+</script>
+
+<style scoped>
+.weight-slider.vue3-slider.vertical {
+  height: 150px;
+  width: 8px;
+}
+.weight-slider {
+  vertical-align: middle;
+}
+
+</style>

ActiveBOWeb/src/store/BaseWebsiteStore.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export const useBWStore = defineStore('BaseWebsiteStore', {
+export const useBWStore = defineStore('Base Website Store', {
     state: () => {
         return {
             play: false,

ActiveBOWeb/src/store/MountainCarStore.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export const useMCStore = defineStore('MountainCarStore', {
+export const useMCStore = defineStore('Mountain Car Store', {
     state: () => {
         return {
             play: false,

ActiveBOWeb/src/store/PolicyStore.js

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+export const usePStore = defineStore('Policy Store', {
+    state: () => {
+        return {
+            policy: Array,
+            weights: [-1, 1, 1],
+            nr_steps: 0,
+        }
+    },
+    getters: {
+        getPolicy: (state) => state.policy,
+        getWeights: (state) => state.weights,
+        getNrSteps: (state) => state.nr_steps,
+    },
+    actions: {
+        setPolicy(value) {
+            this.policy = value;
+        },
+        setWeights(value) {
+            this.weights = value;
+        },
+        setNrSteps(value) {
+            this.nr_steps = value;
+        },
+    }
+})

ActiveBOWeb/src/store/RewardStore.js

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+export const useRStore = defineStore('Reward Store', {
+    state: () => {
+        return {
+            reward_mean: Array,
+            reward_std: Array,
+            nr_episodes: 0,
+        }
+    },
+    getters: {
+        getMean: (state) => state.reward_mean,
+        getStd: (state) => state.reward_std,
+        getNrEpisodes: (state) => state.nr_episodes,
+    },
+    actions: {
+        setMean(value) {
+            this.reward_mean = value;
+        },
+        setStd(value) {
+            this.reward_std = value;
+        },
+        setNrEpisodes(value) {
+            this.nr_episodes = value;
+        },
+    }
+})