preparation for 2d policy

InteractiveBO/src/components/SubLayout.vue

@@ -1,20 +1,20 @@
 <template>
   <v-container fluid class="sub-layout">
     <v-row no-gutters>
-      <v-col cols="12" md="8">
+      <v-col>
-        <v-row no-gutters>
+        <v-row no-gutters justify="start" cols="8">
-          <v-col cols="8">
+          <v-col :style="{ flexGrow: 0 }">
             <v-card
               class="tile"
-              :style="{ height: 'calc(60vh - 24px)', width: '100%' }"
+              :style="{ height: squaredSize, width: squaredSize }"
             >
               <policy-plot />
             </v-card>
           </v-col>
-          <v-col cols="4">
+          <v-col :style="{ flexGrow: 0 }" cols="4">
             <v-card
               class="tile"
-                :style="{ height: 'calc(60vh - 24px)', width: '100%' }"
+              :style="{ height: squaredSize, width: '20vh' }"
             >
               <weight-tuner-vertical />
             </v-card>
@@ -22,12 +22,12 @@
           <v-col cols="8">
             <v-card
               class="tile"
-              :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
+              :style="{ height: 'calc(20vh - 24px)', width: squaredSize }"
             >
               <weight-tuner />
             </v-card>
           </v-col>
-          <v-col cols="12">
+          <v-col>
             <v-card
               class="tile"
               :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
@@ -68,6 +68,27 @@ import PolicyPlot from "@/components/PolicyPlot.vue";
 import ControlPanel from "@/components/ControlPanel.vue";
 import RLCanvas from "@/components/RLCanvas.vue";
 import WeightTunerVertical from "@/components/WeightTunerVertical.vue";
+
+import { ref, computed } from "vue";
+
+const viewportHeight = ref(window.innerHeight);
+const viewportWidth = ref(window.innerWidth);
+
+// Update the viewportWidth on resize
+window.addEventListener("resize", () => {
+  viewportHeight.value = window.innerHeight;
+});
+
+window.addEventListener("resize", () => {
+  viewportWidth.value = window.innerWidth;
+});
+
+const squaredSize = computed(() => {
+  const vhSize = viewportWidth.value * 0.4 - 64 + "px";
+  const vwSize = viewportHeight.value * 0.65 - 68 + "px"; // 8/12 of viewport width
+  console.log(vhSize, vwSize);
+  return `min(${vhSize}, ${vwSize})`;
+});
 </script>
 
 <style scoped>

InteractiveBO/src/components/WeightTuner.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-row no-gutters justify="center" class="weight-tuner">
+  <v-row no-gutters justify="center" class="h-weight-tuner">
     <!-- eslint-disable-next-line -->
     <v-col v-for="(_ , idx) in weights" :key="idx">
-      <div class="weight-container">
+      <div class="h-weight-container">
         <vue-slider
-          class="slider-margin-bottom"
+          class="h-slider-margin-bottom"
           v-model="weights[idx]"
           @change="updateWeight(idx, $event)"
           direction="btt"
@@ -14,7 +14,7 @@
           :interval="0.01"
         />
         <v-checkbox
-          class="ma-0 checkbox-bottom"
+          class="ma-0 h-checkbox-bottom"
           v-model="store.weights_fixed[idx]"
         />
       </div>
@@ -28,10 +28,8 @@ 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,
@@ -47,22 +45,20 @@ const updateWeight = (index, newValue) => {
 </script>
 
 <style scoped>
-.weight-tuner {
+.h-weight-tuner {
   height: 140px;
 }
-.weight-container {
+.h-weight-container {
   height: 180px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }
-.slider-margin-bottom {
+.h-slider-margin-bottom {
   margin-bottom: 0; /* adjust this value as necessary */
 }
-.checkbox-bottom {
+.h-checkbox-bottom {
-  //position: absolute;
-  //bottom: 0;
   padding: 5px 0 0 0;
 }
 </style>

InteractiveBO/src/components/WeightTunerVertical.vue

@@ -1,18 +1,33 @@
 <template>
-    <v-row no-gutters class="vertical-tuner">
+  <v-row no-gutters justify="center" class="v-weight-tuner">
     <!-- eslint-disable-next-line -->
-      <v-col v-for="(_ , idx) in weights" :key="idx" class="tuner-item">
+    <v-col v-for="(_ , idx) in weights" :key="idx"
+      class="v-column"
+      :style="{ height: `calc(100% / ${nrweights})` }"
+    >
+      <div class="v-weight-container">
+        <v-row no-gutters justify="space-between">
+          <v-col class="v-column-content">
             <vue-slider
-          class="slider"
+              class="v-slider-margin-bottom"
               v-model="weights[idx]"
               @change="updateWeight(idx, $event)"
               direction="ltr"
-          :width="100"
               :min="-1"
               :max="1"
               :interval="0.01"
+              :style="{}"
             />
-        <v-checkbox class="ma-0 checkbox" v-model="store.weights_fixed[idx]" />
+          </v-col>
+          <v-col class="v-column-content" :style="{ flexGrow: 0 }">
+            <v-checkbox
+              density="compact"
+              class="ma-0 v-checkbox-bottom"
+              v-model="store.weights_fixed[idx]"
+            />
+          </v-col>
+        </v-row>
+      </div>
     </v-col>
   </v-row>
 </template>
@@ -23,10 +38,10 @@ 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 nrweights = computed(() => store.nr_weights);
 
 const weights = computed({
   get: () => store.weights,
@@ -42,29 +57,39 @@ const updateWeight = (index, newValue) => {
 </script>
 
 <style scoped>
-.vertical-tuner {
+.v-weight-tuner {
+  width: 100%;
   height: 100%;
-  transform: rotate(90deg);
+  margin-left: 10px;
-  //transform-origin: bottom left;
+}
+
+.v-column {
+  margin: 0 !important;
+  padding: 0 !important;
   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 {
+.v-column-content {
-  margin-right: 10px;
 }
 
-.checkbox {
+.v-weight-container {
-  padding: 0;
+  width: 100%;
+}
+
+.v-slider-margin-bottom {
+  margin-bottom: 0;
+  width: 140px !important;
+  align-self: center;
+  padding-top: 12% !important;
+}
+
+.v-checkbox-bottom {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  min-height: 0;
 }
 </style>