Skip to content

Commit bc5b1ff

Browse files
TomCoolsTomCools
authored
fix: VRP fix broken tabs (#1068)
1 parent 5fed0ca commit bc5b1ff

3 files changed

Lines changed: 50 additions & 8 deletions

File tree

‎java/vehicle-routing/src/main/java/org/acme/vehiclerouting/rest/VehicleRouteDemoResource.java‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,13 @@ public class VehicleRouteDemoResource {
4444
private static final LocalTime AFTERNOON_WINDOW_END = LocalTime.of(18, 0);
4545

4646
public enum DemoData {
47-
PHILADELPHIA(0, 55, 6, LocalTime.of(7, 30),
47+
PHILADELPHIA(2, 55, 6, LocalTime.of(7, 30),
4848
1, 2, 15, 30,
4949
new Location(39.7656099067391, -76.83782328143754),
5050
new Location(40.77636644354855, -74.9300739430771)),
51+
GHENT(1, 65, 6, LocalTime.of(7, 30),
52+
1, 2, 15, 30,
53+
new Location(50.990000, 3.620000), new Location(51.130000, 3.840000)),
5154
HARTFORT(1, 50, 6, LocalTime.of(7, 30),
5255
1, 3, 20, 30,
5356
new Location(41.48366520850297, -73.15901689943055),

‎java/vehicle-routing/src/main/resources/META-INF/resources/app.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const routeGroup = L.layerGroup().addTo(map);
2323

2424
/************************************ Time line constants and variable definitions ************************************/
2525

26-
const byVehiclePanel = document.getElementById("byVehiclePanel");
26+
const byVehicleTimelineElement = document.getElementById("byVehicleTimeline");
2727
const byVehicleTimelineOptions = {
2828
timeAxis: {scale: "hour"},
2929
orientation: {axis: "top"},
@@ -35,9 +35,9 @@ const byVehicleTimelineOptions = {
3535
};
3636
const byVehicleGroupData = new vis.DataSet();
3737
const byVehicleItemData = new vis.DataSet();
38-
const byVehicleTimeline = new vis.Timeline(byVehiclePanel, byVehicleItemData, byVehicleGroupData, byVehicleTimelineOptions);
38+
const byVehicleTimeline = new vis.Timeline(byVehicleTimelineElement, byVehicleItemData, byVehicleGroupData, byVehicleTimelineOptions);
3939

40-
const byVisitPanel = document.getElementById("byVisitPanel");
40+
const byVisitTimelineElement = document.getElementById("byVisitTimeline");
4141
const byVisitTimelineOptions = {
4242
timeAxis: {scale: "hour"},
4343
orientation: {axis: "top"},
@@ -50,7 +50,7 @@ const byVisitTimelineOptions = {
5050
};
5151
const byVisitGroupData = new vis.DataSet();
5252
const byVisitItemData = new vis.DataSet();
53-
const byVisitTimeline = new vis.Timeline(byVisitPanel, byVisitItemData, byVisitGroupData, byVisitTimelineOptions);
53+
const byVisitTimeline = new vis.Timeline(byVisitTimelineElement, byVisitItemData, byVisitGroupData, byVisitTimelineOptions);
5454

5555
const BG_COLORS = ["#009E73","#0072B2","#D55E00","#000000","#CC79A7","#E69F00","#F0E442","#F6768E","#C10020","#A6BDD7","#803E75","#007D34","#56B4E9","#999999","#8DD3C7","#FFD92F","#B3DE69","#FB8072","#80B1D3","#B15928","#CAB2D6","#1B9E77","#E7298A","#6A3D9A"];
5656
const FG_COLORS = ["#FFFFFF","#FFFFFF","#FFFFFF","#FFFFFF","#FFFFFF","#000000","#000000","#FFFFFF","#FFFFFF","#000000","#FFFFFF","#FFFFFF","#FFFFFF","#000000","#000000","#000000","#000000","#FFFFFF","#000000","#FFFFFF","#000000","#FFFFFF","#FFFFFF","#FFFFFF"];
@@ -107,6 +107,11 @@ function colorByVehicle(vehicle) {
107107
return vehicle === null ? null : pickColor('vehicle' + vehicle.id);
108108
}
109109

110+
function formatScore(score) {
111+
if (!score) return '?';
112+
return score.replace('hard', 'H').replace('medium', 'M').replace('soft', 'S');
113+
}
114+
110115
function formatDrivingTime(drivingTimeInSeconds) {
111116
return `${Math.floor(drivingTimeInSeconds / 3600)}h ${Math.round((drivingTimeInSeconds % 3600) / 60)}m`;
112117
}
@@ -209,7 +214,7 @@ function renderRoutes(solution) {
209214
}
210215

211216
// Summary
212-
$('#score').text(solution.score);
217+
$('#score').text(formatScore(solution.score));
213218
$("#info").text(`This dataset has ${solution.visits.length} visits who need to be assigned to ${solution.vehicles.length} vehicles.`);
214219
$('#drivingTime').text(formatDrivingTime(solution.totalDrivingTimeSeconds));
215220
}
@@ -303,7 +308,7 @@ function renderTimelines(routePlan) {
303308
id: visit.id + '_wait',
304309
group: visit.vehicle, // visit.vehicle is the vehicle.id due to Jackson serialization
305310
subgroup: visit.vehicle,
306-
content: byVehicleWaitElement.ahtml(),
311+
content: byVehicleWaitElement.html(),
307312
start: visit.arrivalTime,
308313
end: visit.minStartTime
309314
});
@@ -353,6 +358,10 @@ function renderTimelines(routePlan) {
353358
byVehicleTimeline.setWindow(routePlan.startDateTime, routePlan.endDateTime);
354359
byVisitTimeline.setWindow(routePlan.startDateTime, routePlan.endDateTime);
355360
}
361+
requestAnimationFrame(() => {
362+
if ($('#byVehiclePanel').hasClass('active')) byVehicleTimeline.redraw();
363+
if ($('#byVisitPanel').hasClass('active')) byVisitTimeline.redraw();
364+
});
356365
}
357366

358367
function analyze() {

‎java/vehicle-routing/src/main/resources/META-INF/resources/index.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222
.nav-pills {
2323
--bs-nav-pills-link-active-bg: var(--ts-violet-1-rgb);
2424
}
25+
26+
.legend-swatch {
27+
display: inline-block;
28+
width: 12px;
29+
height: 12px;
30+
border-radius: 3px;
31+
flex-shrink: 0;
32+
}
2533
</style>
2634
</head>
2735
<body>
@@ -99,7 +107,6 @@
99107
<button id="stopSolvingButton" type="button" class="btn btn-danger p-2">
100108
<i class="fas fa-stop"></i> Stop solving
101109
</button>
102-
<span id="score" class="score ms-2 align-middle fw-bold">Score: ?</span>
103110
<button id="analyzeButton" type="button" class="ms-2 btn btn-secondary">
104111
<span class="fas fa-question"></span>
105112
</button>
@@ -120,6 +127,10 @@ <h5>
120127
Solution summary
121128
</h5>
122129
<table class="table">
130+
<tr>
131+
<td>Score:</td>
132+
<td><span id="score" class="fw-bold">?</span></td>
133+
</tr>
123134
<tr>
124135
<td>Total driving time:</td>
125136
<td><span id="drivingTime">unknown</span></td>
@@ -152,8 +163,27 @@ <h5>Vehicles</h5>
152163

153164

154165
<div class="tab-pane fade" id="byVehiclePanel" role="tabpanel" aria-labelledby="byVehicleTab">
166+
<div class="d-flex align-items-center flex-wrap gap-2 px-3 py-2 border-bottom bg-light">
167+
<span class="text-muted small">Each row shows a vehicle's day: travel blocks, optional wait, and service stops.</span>
168+
<div class="ms-auto d-flex gap-3 flex-wrap">
169+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#f7dd8f;"></span>Travel</span>
170+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#97C2FC;"></span>Wait</span>
171+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#83C159;"></span>Service</span>
172+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#EF2929;"></span>Late</span>
173+
</div>
174+
</div>
175+
<div id="byVehicleTimeline"></div>
155176
</div>
156177
<div class="tab-pane fade" id="byVisitPanel" role="tabpanel" aria-labelledby="byVisitTab">
178+
<div class="d-flex align-items-center flex-wrap gap-2 px-3 py-2 border-bottom bg-light">
179+
<span class="text-muted small">Each row shows a visit's assigned vehicle and where it falls relative to its time window.</span>
180+
<div class="ms-auto d-flex gap-3 flex-wrap">
181+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#8AE234;opacity:0.4;"></span>Time window</span>
182+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#83C159;"></span>Assigned</span>
183+
<span class="d-flex align-items-center gap-1 small"><span class="legend-swatch" style="background:#EF2929;"></span>Late / Unassigned</span>
184+
</div>
185+
</div>
186+
<div id="byVisitTimeline"></div>
157187
</div>
158188
</div>
159189
</div>

0 commit comments

Comments
 (0)