diff --git a/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.html b/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.html
index 795ee9e1ee402debc1981b74810a5363532606b0..71d3a5f18d9b946639e8db42a4761d0100a7a8be 100644
--- a/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.html
+++ b/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.html
@@ -1,78 +1,90 @@
-<div id="page" class="row" display="height:700px" >
- <div class="col-md-10">
-
- <div class="row">
- <div id="vel_tab" style="margin-left:20px;display:none">
- # Trajs <material-slide-toggle [(checked)]="toggleLbls" (change)="tooltipChange();">Sensor Labels</material-slide-toggle> Speed
- </div>
- <div id="radio_button_div" style="margin-left:20px;display:none">
- <div><input type="radio" id="trajs" name="viz_type" value="trajs" checked (change)="radio_change()"> <label for="trajs"> # Trajs</label></div>
- <div><input type="radio" id="speed" name="viz_type" value="speed" (change)="radio_change()"><label for="speed"> Speed</label></div>
- <div><input type="radio" id="safe" name="viz_type" value="safe" (change)="radio_change()"><label for="safe"> Safety Index</label> </div>
+<div id="page" class="row" style="padding-left:30px" >
+ <div class="row">
+ <div class="row" style="display:flex">
+
+ <div class="control_box" id='define_sims' style='width:450px;position:relative'>
+
+ <div id="vel_tab" style="margin-left:20px;display:none">
+ # Trajs <material-slide-toggle [(checked)]="toggleLbls" (change)="tooltipChange();">Sensor Labels</material-slide-toggle> Speed
+ </div>
+ <div id="radio_button_div" style="margin-left:20px;display:none">
+ <div><input type="radio" id="trajs" name="viz_type" value="trajs" checked (change)="radio_change()"> <label for="trajs"> # Trajs</label></div>
+ <div><input type="radio" id="speed" name="viz_type" value="speed" (change)="radio_change()"><label for="speed"> Speed</label></div>
+ <div><input type="radio" id="safe" name="viz_type" value="safe" (change)="radio_change()"><label for="safe"> Safety Index</label> </div>
+ </div>
+ <div id="day_tab" style="margin-left:50px; display:none">
+ Per Day <material-slide-toggle [(checked)]="dayLbls" (change)="dayChange();">Sensor Labels</material-slide-toggle> Filter
+ </div>
+
</div>
- <div id="day_tab" style="margin-left:50px; display:none">
- Per Day <material-slide-toggle [(checked)]="dayLbls" (change)="dayChange();">Sensor Labels</material-slide-toggle> Filter
- </div>
- <button style="margin-left:100px;height:25px" id="upload_geojson_btn" (click)="upload_geojson();">Upload GEOJSON</button>
- <button style="margin-left:5px;height:25px" id="download_run_btn1" (click)="download_points();">Download Points</button>
- <button style="margin-left:5px;height:25px" id="download_run_btn2" (click)="download_values();">Download Values</button>
- <button style="margin-left:5px;height:25px;z-index:100;" (click)="openInstructions()"> Help</button>
- </div>
- <div style='width:100%;border-style:solid;border-width:1px;'>
- <div id="controls_env" style="display:block">
- <div id="controls">
- <label id="week_label" style="margin-left:10px"> Weekday:</label>
- <select id="weekday_select" (change)="change();">
- <option value=0>Monday</option>
- <option value=1>Tuesday</option>
- <option value=2>Wednesday</option>
- <option value=3>Thursday</option>
- <option value=4>Friday</option>
- <option value=5>Saturday</option>
- <option value=6>Sunday</option>
- <option selected value=7>All</option>
- </select>
-
- <label id="day_label" style="margin-left:10px"> Part of the Day:</label>
- <select id="day_select" (change)="change();">
- <option value=0>Morning (<13:00) </option>
- <option value=1>Afternoon (>13:00)</option>
- <option selected value=2>All</option>
- </select>
- </div>
-
- <div id="info" style="margin-left:10px;width:500px">
- <h6>RingRing Dataset</h6>
- <div class="row" style="padding-left:10px">
- <div class="column" style="margin-left:20px">
- <b>Initial Date:</b>2015-06-11<br>
- <b>Final Date:</b> 2022-05-31
- </div>
- <div class="column" style="margin-left:20px">
- <b># Trajs:</b> 49520<br>
-
+
+ <div class="control_box" id="results_box" style="width:500px;position:relative">
+
+ <div id="controls_env" style="display:block">
+ <div id="controls">
+ <label id="week_label" style="margin-left:10px"> Weekday:</label>
+ <select id="weekday_select" (change)="change();">
+ <option value=0>Monday</option>
+ <option value=1>Tuesday</option>
+ <option value=2>Wednesday</option>
+ <option value=3>Thursday</option>
+ <option value=4>Friday</option>
+ <option value=5>Saturday</option>
+ <option value=6>Sunday</option>
+ <option selected value=7>All</option>
+ </select>
+
+ <label id="day_label" style="margin-left:10px"> Part of the Day:</label>
+ <select id="day_select" (change)="change();">
+ <option value=0>Morning (<13:00) </option>
+ <option value=1>Afternoon (>13:00)</option>
+ <option selected value=2>All</option>
+ </select>
+ </div>
+
+ <div id="info" style="margin-left:10px;width:500px">
+ <div>RingRing Dataset</div>
+ <div class="row" style="padding-left:10px">
+ <div class="column" style="margin-left:20px">
+ <b>Initial Date:</b>2015-06-11<br>
+ <b>Final Date:</b> 2022-05-31
+ </div>
+ <div class="column" style="margin-left:20px">
+ <b># Trajs:</b> 49520<br>
+
+ </div>
+ <div class="column" style="margin-left:20px">
+ <b>min # Trajs/Pnt:</b> 10<br>
+ <b># Pnts:</b>           <label id="num_points">61586</label>
+ </div>
+ </div>
+ </div>
+ <ngx-slider style="width:90%;margin-left:20px;margin-right:20px;margin-top:50px;margin-bottom:20px" id="daySlider" [(value)]="sliderValue" [options]="sliderOptions" (valueChange)="slider_change()"></ngx-slider>
</div>
- <div class="column" style="margin-left:20px">
- <b>min # Trajs/Pnt:</b> 10<br>
- <b># Pnts:</b>           <label id="num_points">61586</label>
- </div>
+ <div id="safe_env" style="display:none">
+ <div id="radio2_button_div" style="margin-left:20px;">
+ <div><input type="radio" id="trajs" name="biker_type" value="vulnerable" (change)="radio2_change()"><label for="vulnerable"> Vulnerable</label></div>
+ <div><input type="radio" id="speed" name="biker_type" value="normal" checked (change)="radio2_change()"><label for="normal"> Normal</label></div>
+ <div><input type="radio" id="safe" name="biker_type" value="fast" (change)="radio2_change()"><label for="fast"> Fast</label> </div>
+ </div>
</div>
- </div>
- <ngx-slider style="width:90%;margin-left:20px;margin-right:20px;margin-top:50px;margin-bottom:20px" id="daySlider" [(value)]="sliderValue" [options]="sliderOptions" (valueChange)="slider_change()"></ngx-slider>
- </div>
- <div id="safe_env" style="display:none">
- <div id="radio2_button_div" style="margin-left:20px;">
- <div><input type="radio" id="trajs" name="biker_type" value="vulnerable" (change)="radio2_change()"><label for="vulnerable"> Vulnerable</label></div>
- <div><input type="radio" id="speed" name="biker_type" value="normal" checked (change)="radio2_change()"><label for="normal"> Normal</label></div>
- <div><input type="radio" id="safe" name="biker_type" value="fast" (change)="radio2_change()"><label for="fast"> Fast</label> </div>
- </div>
</div>
+
+ <div class="control_box button_box" id="control_help" style='width:300px;'>
+ <button (click)="openInstructions()"> Help</button>
+ <button id="upload_geojson_btn" (click)="upload_geojson();">Upload GEOJSON</button>
+ <button id="download_run_btn" (click)="download_points();">Download Pnts</button>
+ <button id="download_run_btn2" (click)="download_values();">Download Values</button>
+ </div>
+
</div>
- <div id='top-right' style='height:700px;width:100%;margin-top:5px'>
- <div leaflet #map [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"
- style='border:1px solid #000;height:693px'></div>
- </div>
</div>
+ <div id='top-right' style='height:700px;width:100%;margin-top:5px'>
+ <div leaflet #map [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"
+ style='top:0px;border:1px solid #000;height:693px'>
+ </div>
+ </div>
+
</div>
<div class="modal" id="instructionModal" style="display:none;z-index:1000">
<div class="modal-content" style="width:80%;height:60%">
diff --git a/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.scss b/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.scss
index 80713d1a75d68aef63a6db80625cd31bb6ac24cf..65a3e2875c06734913712076d8bf9eeed788bd8f 100644
--- a/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.scss
+++ b/src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.scss
@@ -1,3 +1,16 @@
+.button_box{
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ padding: 10px;
+}
+.control_box{
+ margin:10px;
+ height:100px;
+ border-style:solid;
+ border-width:1px;
+}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */