fix: VRP quickstart issues

[TomCools]

Description of the change

• UI Issues: tabs not working correctly
• Layout messed up on smaller screens.
• Added explainer to the tabs
• Added a new dataset
• Cleaned up some errors in the console.

Checklist

Development

• The changes have been covered with tests, if necessary.
• You have a green build, with the exception of the flaky tests.
• UI and JS files are fully tested, the user interface works for all modules affected by your changes (e.g., solve and analyze buttons).
• The network calls work for all modules affected by your changes (e.g., solving a problem).
• The console messages are validated for all modules affected by your changes.

Code Review

• This pull request includes an explanatory title and description.
• The GitHub issue is linked.
• At least one other engineer has approved the changes.
• After PR is merged, inform the reporter.

[Copilot]

Pull request overview

This PR targets the vehicle-routing (VRP) Quarkus quickstart UI, aiming to fix tab behavior and responsive layout issues, while improving timeline explainers and adding a new demo dataset.

Changes:

• Reworked the Demo UI layout to be viewport-filling, adjusted tab header layout, and moved the score display into the “Solution summary” panel.
• Improved timeline UI/labels (legends, icons) and added score formatting in the JS rendering logic.
• Added a new demo dataset (GHENT) and adjusted an existing dataset seed.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
java/vehicle-routing/src/main/resources/META-INF/resources/index.html	Adds new flex-based layout/CSS, updates tab header layout, moves score into summary, and adds timeline legend explainers.
java/vehicle-routing/src/main/resources/META-INF/resources/app.js	Updates timeline container IDs, adjusts vis-timeline options, improves timeline item/group rendering, and formats the displayed score.
java/vehicle-routing/src/main/java/org/acme/vehiclerouting/rest/VehicleRouteDemoResource.java	Adds the GHENT dataset and tweaks the Philadelphia dataset seed.

Comments suppressed due to low confidence (1)

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

• The aria-selected values for the inner tabs appear inverted: the active Map tab button has aria-selected="false", while the inactive “By vehicle” tab has aria-selected="true". This hurts accessibility and can confuse assistive tech; update aria-selected to match the active state (Map: true initially; others: false).

              <button class="nav-link active" id="mapTab" data-bs-toggle="tab" data-bs-target="#mapPanel"
                      type="button"
                      role="tab" aria-controls="mapPanel" aria-selected="false">Map
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="byVehicleTab" data-bs-toggle="tab" data-bs-target="#byVehiclePanel"
                      type="button" role="tab" aria-controls="byVehiclePanel" aria-selected="true">By vehicle
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="byVisitTab" data-bs-toggle="tab" data-bs-target="#byVisitPanel"
                      type="button" role="tab" aria-controls="byVisitPanel" aria-selected="false">By visit
              </button>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The new viewport-filling CSS sets body and the top-level .tab-content to overflow: hidden, which prevents scrolling in non-demo panes such as the REST API Guide (#rest) and REST API iframe tab. Consider limiting the no-scroll layout rules to the Demo UI pane only (e.g., apply overflow hiding under #demo), or explicitly enable scrolling on #rest/#openapi (e.g., overflow-y: auto with a constrained height).

Suggested change

	body > .tab-content { flex: 1; min-height: 0; overflow: hidden; }
	body > .tab-content { flex: 1; min-height: 0; overflow-y: auto; }

[Copilot]

vis-timeline is being fed HTML strings (icons, spans) via content: ...html(), but xss: { disabled: false } enables XSS filtering in vis-timeline and may escape/strip this HTML (breaking icon rendering). This also diverges from the pattern used in other quickstarts (they set disabled: true). If you need HTML content, keep xss.disabled set to true here and rely on the existing jQuery .text() usage to keep user-provided values escaped.

[Copilot]

Same as above for the visit timeline: xss: { disabled: false } can cause vis-timeline to sanitize/escape the HTML content strings, leading to broken rendering. Align this with the other quickstarts and set xss.disabled to true if HTML content is required.

Suggested change

	xss: {disabled: false}, // Items are XSS safe through JQuery
	xss: {disabled: true}, // Items are XSS safe through JQuery