Franka added

InteractiveBO/src/components/PolicyPlot.vue

@@ -5,45 +5,25 @@
 <script setup>
 import { onMounted, watch } from "vue";
 import { usePStore } from "@/store/PolicyStore";
+import { useCStore } from "@/store/ControlStore";
+import { useRLStore } from "@/store/RLStore";
 import { Chart } from "chart.js/auto";
 import { computeRbfCurve } from "@/js_funs/online_rbf_policy";
-import { useRLStore } from "@/store/RLStore";
 
 const store = usePStore();
 const rlstore = useRLStore();
+const cstore = useCStore();
 
 let chartHandle;
 
-// let verticalLinePlugin = {
-//   id: "verticalLinePlugin",
-//   afterDraw: function (chart, args, options) {
-//     let y_Scale = chart.scales["y"];
-//     let x_Scale = chart.scales["x"];
-//
-//     let ctx = chart.ctx;
-//     let xValue = options.xValue;
-//     let x = x_Scale.getPixelForValue(xValue);
-//     let top = y_Scale.top;
-//     let bottom = y_Scale.bottom;
-//
-//     ctx.save();
-//     ctx.beginPath();
-//     ctx.moveTo(x, top);
-//     ctx.lineTo(x, bottom);
-//     ctx.lineWidth = 1;
-//     ctx.strokeStyle = "#00ff00";
-//     ctx.stroke();
-//     ctx.restore();
-//   },
-// };
-// Chart.register(verticalLinePlugin);
-
 function buildChart() {
   const policy_x = store.getPolicy;
   const policy_y = store.getPolicy_y;
 
-  const current_x = policy_x[rlstore.current_time];
-  const current_y = policy_y[rlstore.current_time];
+  const current_x =
+    (cstore.bounds[cstore.env][2] + cstore.bounds[cstore.env][3]) / 2;
+  const current_y =
+    (cstore.bounds[cstore.env][3] + cstore.bounds[cstore.env][1]) / 2;
 
   const policy_xy = [];
 
@@ -74,6 +54,34 @@ function buildChart() {
           pointRadius: 3,
           order: 0,
         },
+        {
+          type: "scatter",
+          xAxisID: "x",
+          yAxisID: "y",
+          data: [{ x: 0.5, y: 0.3 }],
+          backgroundColor: "green",
+          pointRadius: 5,
+          order: 1,
+        },
+        {
+          type: "scatter",
+          xAxisID: "x",
+          yAxisID: "y",
+          data: [{ x: 0.5, y: -0.3 }],
+          backgroundColor: "blue",
+          pointRadius: 5,
+          order: 1,
+        },
+        {
+          type: "scatter",
+          xAxisID: "x",
+          yAxisID: "y",
+          data: [{ x: 0.5, y: 0 }],
+          backgroundColor: "red",
+          pointRadius: 75,
+          pointStyle: 'rect',
+          order: 0,
+        },
       ],
     },
     options: {
@@ -100,14 +108,14 @@ function buildChart() {
           grid: {
             display: false,
           },
-          min: -1.1,
-          max: 1.1,
+          min: cstore.bounds[cstore.env][0] - 0.1,
+          max: cstore.bounds[cstore.env][2] + 0.1,
         },
         y: {
           type: "linear",
           display: true,
-          min: -1.1,
-          max: 1.1,
+          min: cstore.bounds[cstore.env][1] - 0.1,
+          max: cstore.bounds[cstore.env][3] + 0.1,
         },
       },
     },
@@ -162,6 +170,27 @@ watch(
     chartHandle.update();
   }
 );
+watch(
+  () => cstore.env,
+  () => {
+    const x_axis_lim = {
+      min: cstore.bounds[cstore.env][0] - 0.1,
+      max: cstore.bounds[cstore.env][2] + 0.1,
+    };
+
+    const y_axis_lim = {
+      min: cstore.bounds[cstore.env][1] - 0.1,
+      max: cstore.bounds[cstore.env][3] + 0.1,
+    };
+
+    chartHandle.options.scales.x.min = x_axis_lim.min;
+    chartHandle.options.scales.x.max = x_axis_lim.max;
+    chartHandle.options.scales.y.min = y_axis_lim.min;
+    chartHandle.options.scales.y.max = y_axis_lim.max;
+
+    chartHandle.update();
+  }
+);
 </script>
 
 <style scoped></style>

InteractiveBO/src/components/RosBar.vue

@@ -153,6 +153,7 @@ active_rl_eval_sub.subscribe((msg) => {
   const weights_x = msg.weights.slice(0, nr_weights);
   const weights_y = msg.weights.slice(nr_weights);
 
+  pstore.setTrigger();
   pstore.setPolicy(pol_x);
   pstore.setPolicy_y(pol_y);
   pstore.setWeights(weights_x);
@@ -210,6 +211,7 @@ active_bo_response.subscribe((msg) => {
 
   pstore.setPolicy(pol_x);
   pstore.setPolicy_y(pol_y);
+  pstore.setTrigger();
   pstore.setWeights(weights_x);
   pstore.setWeights_y(weights_y);
   rstore.setMean(msg.reward_mean);

InteractiveBO/src/components/WeightTuner.vue

@@ -9,9 +9,10 @@
           @change="updateWeight(idx, $event)"
           direction="btt"
           :height="100"
-          :min="-1"
-          :max="1"
+          :min="cstore.bounds[cstore.env][0]"
+          :max="cstore.bounds[cstore.env][2]"
           :interval="0.01"
+          :disabled="idx === 0"
         />
         <v-checkbox
           class="ma-0 h-checkbox-bottom"
@@ -24,12 +25,14 @@
 
 <script setup>
 import { usePStore } from "@/store/PolicyStore";
+import { useCStore } from "@/store/ControlStore";
 
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/default.css";
 import { computed } from "vue";
 
 const store = usePStore();
+const cstore = useCStore();
 
 const weights = computed({
   get: () => store.weights,

InteractiveBO/src/components/WeightTunerVertical.vue

@@ -13,10 +13,11 @@
               v-model="weights_y[idx]"
               @change="updateWeight(idx, $event)"
               direction="ltr"
-              :min="-1"
-              :max="1"
+              :min="cstore.bounds[cstore.env][1]"
+              :max="cstore.bounds[cstore.env][3]"
               :interval="0.01"
               :style="{}"
+              :disabled="idx === 0"
             />
           </v-col>
           <v-col class="v-column-content" :style="{ flexGrow: 0 }">
@@ -34,12 +35,14 @@
 
 <script setup>
 import { usePStore } from "@/store/PolicyStore";
+import { useCStore } from "@/store/ControlStore";
 
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/default.css";
 import { computed } from "vue";
 
 const store = usePStore();
+const cstore = useCStore();
 
 const nrweights = computed(() => store.nr_weights);
 

InteractiveBO/src/store/ControlStore.js

@@ -3,11 +3,17 @@ import { defineStore } from "pinia";
 export const useCStore = defineStore("Control Store", {
   state: () => {
     return {
-      env: "Reacher",
-      envs: ["Reacher", "Finger"],
+      env: "Franka",
+      envs: ["Reacher", "Finger", "Franka"],
       env_dim: {
         Reacher: 2,
         Finger: 2,
+        Franka: 2,
+      },
+      bounds: {
+        Reacher: [-1, -1, 1, 1],
+        Finger: [-1, -1, 1, 1],
+        Franka: [0.3, -0.35, 0.7, 0.35],
       },
       metric: "random",
       metrics: ["random", "regular", "improvement", "max_acquisition"],
@@ -23,7 +29,7 @@ export const useCStore = defineStore("Control Store", {
         improvement: [0.0, 1.0, 0.01],
         max_acquisition: [1, 200, 1],
       },
-      acq_fun: "Expected Improvement",
+      acq_fun: "Preference Expected Improvement",
       acq_funs: [
         "Expected Improvement",
         "Probability of Improvement",

InteractiveBO/src/store/PolicyStore.js

@@ -53,6 +53,7 @@ export const usePStore = defineStore("Policy Store", {
       this.trigger = !this.trigger;
     },
     setTrigger() {
+      console.log('Toggling trigger');
       this.trigger = !this.trigger;
     },
     resetWeights_Fixed() {