debugging

InteractiveBO/src/components/SubLayout.vue

@@ -3,15 +3,23 @@
     <v-row no-gutters>
       <v-col cols="12" md="8">
         <v-row no-gutters>
-          <v-col cols="12">
+          <v-col cols="8">
             <v-card
               class="tile"
-              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+              :style="{ height: 'calc(60vh - 24px)', width: '100%' }"
             >
               <policy-plot />
             </v-card>
           </v-col>
-          <v-col cols="12">
+          <v-col cols="4">
+            <v-card
+                class="tile"
+                :style="{ height: 'calc(60vh - 24px)', width: '100%' }"
+            >
+              <weight-tuner-vertical />
+            </v-card>
+          </v-col>
+          <v-col cols="8">
             <v-card
               class="tile"
               :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
@@ -22,7 +30,7 @@
           <v-col cols="12">
             <v-card
               class="tile"
-              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+              :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
             >
               <reward-plot />
             </v-card>
@@ -59,6 +67,7 @@ import RewardPlot from "@/components/RewardPlot.vue";
 import PolicyPlot from "@/components/PolicyPlot.vue";
 import ControlPanel from "@/components/ControlPanel.vue";
 import RLCanvas from "@/components/RLCanvas.vue";
+import WeightTunerVertical from "@/components/WeightTunerVertical.vue";
 </script>
 
 <style scoped>

InteractiveBO/src/components/WeightTunerVertical.vue

@@ -0,0 +1,70 @@
+<template>
+    <v-row no-gutters class="vertical-tuner">
+      <!-- eslint-disable-next-line -->
+      <v-col v-for="(_ , idx) in weights" :key="idx" class="tuner-item">
+        <vue-slider
+          class="slider"
+          v-model="weights[idx]"
+          @change="updateWeight(idx, $event)"
+          direction="ltr"
+          :width="100"
+          :min="-1"
+          :max="1"
+          :interval="0.01"
+        />
+        <v-checkbox class="ma-0 checkbox" v-model="store.weights_fixed[idx]" />
+      </v-col>
+    </v-row>
+</template>
+
+<script setup>
+import { usePStore } from "@/store/PolicyStore";
+
+import VueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";
+import { computed } from "vue";
+import { useCStore } from "@/store/ControlStore";
+
+const store = usePStore();
+const cstore = useCStore();
+
+const weights = computed({
+  get: () => store.weights,
+  set: (value) => store.setWeights(value),
+});
+
+const updateWeight = (index, newValue) => {
+  const newWeights = weights.value.slice();
+  newWeights[index] = newValue;
+  store.setWeights(newWeights);
+  store.setTrigger();
+};
+</script>
+
+<style scoped>
+.vertical-tuner {
+  height: 100%;
+  transform: rotate(90deg);
+  //transform-origin: bottom left;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.tuner-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+.slider {
+  margin-right: 10px;
+}
+
+.checkbox {
+  padding: 0;
+}
+</style>