improving extrack

static/extrack_ui/ShowRun.js

@@ -1,6 +1,6 @@
 import {TrajectoryPlayer} from "./TrajectoryPlayer.js";
 export class ShowRun{
-    constructor(container, run){
+    constructor(container, run, size){
 
         container.innerHTML = ""
         const step = Object.keys(run.steps).filter(step => run.steps[step].trajectories_compressed).sort().reverse()[0]
@@ -52,8 +52,8 @@ export class ShowRun{
         container.appendChild(description)
 
         const trajectory_player_container = document.createElement("div")
-        trajectory_player_container.style.height = "500px";
-        const trajectory_player = new TrajectoryPlayer(run.ui_jsm);
+        // trajectory_player_container.style.height = "500px";
+        const trajectory_player = new TrajectoryPlayer(run.ui_jsm, size);
         trajectory_player_container.appendChild(trajectory_player.getCanvas());
         container.appendChild(trajectory_player_container)
         trajectory_player.playTrajectories(run.steps[step].trajectories_compressed);

static/extrack_ui/TrajectoryPlayer.js

@@ -8,9 +8,10 @@ async function fetchAndDecompressData(url) {
 }
 
 export class TrajectoryPlayer{
-    constructor(render_function_path, options) {
+    constructor(render_function_path, size, options) {
         // const experiments_stub = "../../experiments";
         // const modulePath = `${experiments_stub}/experiments/2024-05-25_14-28-34/32e6580_zoo_algorithm_environment/sac_pendulum-v1/0000/ui.esm.js`;
+        this.size = size
         this.options = options || {};
 
         this.render = import(render_function_path)
@@ -19,6 +20,7 @@ export class TrajectoryPlayer{
             })
         this.container = document.createElement('div');
         this.container.classList.add("trajectory-player-container")
+        this.container.style.alignItems = "center";
         this.canvas_container = document.createElement('div');
         this.canvas_container.classList.add("trajectory-player-canvas-container")
         this.canvas = document.createElement('canvas');
@@ -68,13 +70,21 @@ export class TrajectoryPlayer{
 
 
         const onResize = () => {
-            const size = Math.min(this.canvas_container.clientWidth, this.canvas_container.clientHeight);
+            let size;
+            if(this.size){
+                size = this.size;
+            }
+            else{
+                size = Math.min(this.canvas_container.clientWidth, this.canvas_container.clientHeight);
+            }
             this.canvas.width = size * ratio;
             this.canvas.height = size * ratio;
 
             this.canvas.style.width = size + 'px';
             this.canvas.style.height = size + 'px';
         }
+        const resizeListener = new ResizeObserver(onResize);
+        resizeListener.observe(this.canvas_container);
         onResize();
         window.addEventListener('resize', onResize);
 

static/extrack_ui/index.css

@@ -3,8 +3,10 @@
     margin-left: 30px;
 }
 .trajectory-player-canvas-container{
-    height: 500px;
-    width: 500px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 300px;
 }
 
 #latest-run-container{

static/extrack_ui/index.html

@@ -35,7 +35,7 @@
             const runs_with_steps = runs_with_ui.filter(run => run.steps && Object.keys(run.steps).length > 0)
             const run = runs_with_steps[0]
             const latest_run_container = document.getElementById('latest-run-container')
-            const show_run = new ShowRun(latest_run_container, run)
+            const show_run = new ShowRun(latest_run_container, run, 500)
         })
 
         idx_promise.then(() => {

static/extrack_ui/play_trajectory.css

@@ -1,27 +1,17 @@
-#extrack-trajectory-player-container {
-    height: 500px;
-}
-
 .trajectory-player-container {
     display: flex;
     flex-direction: column;
-    height: 100%;
     overflow: auto;
+    margin: 10px;
 }
 
 .trajectory-player-canvas-container {
     flex-grow: 1;
     display: flex;
-    /*justify-content: center;*/
     align-items: center;
     position: relative;
 }
 
-.trajectory-player-canvas-container > canvas {
-    display: block;
-    position: absolute;
-}
-
 .trajectory-player-controls-container > * {
     margin: 5px;
 }