feat: implement new backend, itinerary overview, also styling (#46)

* chore: enforce standards and improve ease of use

* feat: implement new frontend to the logic

Co-authored-by: MoPhliFra <[email protected]>
Co-authored-by: Dominik Kuckeburg <[email protected]>

* chore: delete old frontend

* feat: PlanEntry with itinerary match attribute; style change

- added attribute to itinerary class
- changed comparePlans.ts to use match attribute instead of cssClass when match / mismatch
- changed PlanEntry style for match / mismatch

* fix: revert match to cssClass

* chore: change layout

* feat: implement itinerary overview sketch

* feat: styling of itinerary overview

---------

Co-authored-by: MoPhliFra <[email protected]>
Co-authored-by: Dominik Kuckeburg <[email protected]>
Co-authored-by: nicosvv <[email protected]>
Co-authored-by: MoPhliFra <[email protected]>

visual-debugger/src/data-processing/assets/Query-Batch.json → visual-debugger/assets/Query-Batch.json

@@ -5,7 +5,7 @@
       "from": "Aachen HBF",
       "to": "Aachen West",
       "class": "Regional",
-      "time": "2025-01-10T10:00:00Z"
+      "time": "2025-01-31T10:00:00Z"
     },
     {
       "index": 2,

visual-debugger/src/data-processing/changeElements.ts

@@ -0,0 +1,61 @@
+import {
+    activeQueryStore, currentDefaultItineraryStore,
+    currentDefaultPlanStore, currentItineraryStore,
+    currentPlanStore,
+    defaultPlanDatasetStore,
+    planDatasetStore
+} from "sveltestore";
+import {Itinerary, type Plan} from "@data/type-declarations/planTypes.ts";
+
+// attributes for switching of current plan
+let plans: Plan[];
+let defaultPlans: Plan[];
+
+/**
+ * Changes the currently displayed plan to the one given in the index
+ */
+export function changePlan(queryIndex: number) {
+    // get current plan data
+    planDatasetStore.subscribe((data) => {
+            plans = data
+        }
+    )
+    // load plan of the clicked query into svelte store
+    currentPlanStore.set(plans[queryIndex - 1])
+
+    // get current plan data
+    defaultPlanDatasetStore.subscribe((data) => {
+            defaultPlans = data
+        }
+    )
+    // load plan of the clicked query into svelte store
+    currentDefaultPlanStore.set(defaultPlans[queryIndex - 1])
+
+    // set the number of the new active query
+     activeQueryStore.set(queryIndex)
+}
+
+let itinerary: Itinerary;
+let defaultItinerary: Itinerary;
+
+/**
+ * Changes the currently displayed plan to the one given in the index
+ */
+export function changeItinerary(itineraryIndex: number) {
+    // get current plan data
+    currentPlanStore.subscribe((data) => {
+            itinerary = data.itineraries[itineraryIndex]
+        }
+    )
+    // load plan of the clicked query into svelte store
+    currentItineraryStore.set(itinerary)
+
+    // get current plan data
+    currentDefaultPlanStore.subscribe((data) => {
+            defaultItinerary = data.itineraries[itineraryIndex]
+        }
+    )
+    // load plan of the clicked query into svelte store
+    currentDefaultItineraryStore.set(defaultItinerary)
+
+}

visual-debugger/src/data-processing/comparePlans.ts

@@ -1,11 +1,11 @@
-import type {Plan} from "./parsing-types/planParsingTypes.ts";
+import type {Plan} from "./type-declarations/planTypes.ts";
 import {
     currentDefaultPlanStore,
     currentPlanStore,
     defaultPlanDatasetStore,
     planDatasetStore
-} from "../sveltestore.ts";
-import {cssClasses} from "./parsing-types/cssClasses.ts";
+} from "sveltestore";
+import {cssClasses} from "./styling/cssClasses.ts";
 import {resetCssClassesForPlanEntries} from "./planParsing.ts";
 
 /**
@@ -30,6 +30,7 @@ export function comparePlans() {
     }
 
     // find if one plan has more entries than the other
+    // TODO: outsource this into it's own method
     if (plans.length != defaultPlans.length) {
         if (plans.length >= defaultPlans.length) {
             alert("Error: There are more queries in the batch than in the default plans.")
@@ -55,13 +56,14 @@ export function comparePlans() {
             // compare strings of itineraries and set colors(CSS-Classes) accordingly
             if (JSON.stringify(currentItinerary) == JSON.stringify(currentDefaultItinerary)) {
                 // itineraries are equal, mark them as such
-                plans[planIndex].itineraries[itineraryIndex].cssClass = new cssClasses().planEntryValid
-                defaultPlans[planIndex].itineraries[itineraryIndex].cssClass = new cssClasses().planEntryValid
+                plans[planIndex].itineraries[itineraryIndex].cssClass = cssClasses.planEntryValid
+                defaultPlans[planIndex].itineraries[itineraryIndex].cssClass = cssClasses.planEntryValid
+
 
             } else {
                 // itineraries are not equal
-                plans[planIndex].itineraries[itineraryIndex].cssClass = new cssClasses().planEntryInvalid
-                defaultPlans[planIndex].itineraries[itineraryIndex].cssClass = new cssClasses().planEntryInvalid
+                plans[planIndex].itineraries[itineraryIndex].cssClass = cssClasses.planEntryInvalid
+                defaultPlans[planIndex].itineraries[itineraryIndex].cssClass = cssClasses.planEntryInvalid
             }
 
         }

visual-debugger/src/data-processing/componentInterface.ts

@@ -0,0 +1,36 @@
+import {changeItinerary, changePlan} from "@data/changeElements.ts";
+import {computePlan, downloadPlans} from "@data/planParsing.ts";
+
+/**
+ * This division between the svelte components and the functions they're calling is sole to simplify unit testing said functions
+ */
+
+/**
+ * Interface method for changing the active plans
+ * @param planIndex the index of the plan to change to
+ */
+export function changePlanInterface(planIndex: number) {
+    changePlan(planIndex)
+}
+
+/**
+ * Interface method for getting the routing results for the queries from motis
+ */
+export function computePlansInterface() {
+    computePlan()
+}
+
+/**
+ * Interface method for downloading the computed plans for later use
+ */
+export function downloadPlanInterface() {
+    downloadPlans()
+
+}
+
+/**
+ * Interface method for getting the routing results for the queries from motis
+ */
+export function changeItineraryInterface(itineraryIndex: number) {
+    changeItinerary(itineraryIndex)
+}

visual-debugger/src/data-processing/planParsing.ts

@@ -1,8 +1,8 @@
-import {interpolatedQueryStore, planDatasetStore, currentPlanStore} from "../sveltestore.ts";
-import type {Query} from "./parsing-types/queryInterpolationTypes.ts";
-import type {Plan} from "./parsing-types/planParsingTypes.ts"
+import {interpolatedQueryStore, planDatasetStore, currentPlanStore} from "sveltestore";
+import type {Query} from "./type-declarations/queryTypes.ts";
+import type {Plan} from "./type-declarations/planTypes.ts"
 import axios from "axios";
-import {cssClasses} from "./parsing-types/cssClasses.ts";
+import {cssClasses} from "./styling/cssClasses.ts";
 
 /**
  * Base URL of the MOTIS API
@@ -42,6 +42,14 @@ export async function computePlan() {
         resetCssClassesForPlanEntries(plan)
     }
 
+    for (let plan of plans) {
+        let itineraryIndex =0
+        for (let itinerary of plan.itineraries) {
+            itinerary.index = itineraryIndex
+            itineraryIndex++
+        }
+    }
+
     // put computed plans into storage and set first plan as active
     planDatasetStore.set(plans)
     currentPlanStore.set(plans[0])
@@ -93,7 +101,7 @@ export function resetCssClassesForPlanEntries(plan: Plan) {
     let itineraries = plan.itineraries
 
     for (let itinerary of itineraries) {
-        itinerary.cssClass = new cssClasses().planEntryDefault
+        itinerary.cssClass = cssClasses.planEntryDefault
     }
 }
 

visual-debugger/src/data-processing/queryBuild.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import {interpolatedQueryStore} from "../sveltestore";
-import type {Location, Batch} from "./parsing-types/queryInterpolationTypes.ts"
+import type {Location, Batch} from "./type-declarations/queryTypes.ts"
 
 /**
  * Base URL of the MOTIS API

visual-debugger/src/data-processing/styling/cssClasses.ts

@@ -0,0 +1,10 @@
+/**
+ * Enum that holds all css classes for dynamic UI elements
+ */
+export enum cssClasses{
+    planEntryValid = 'border-green-600 bg-green-400',
+
+    planEntryInvalid = 'border-red-600 bg-red-400',
+
+    planEntryDefault = "border-black-500 bg-white-200"
+}

visual-debugger/src/data-processing/parsing-types/planParsingTypes.ts → visual-debugger/src/data-processing/type-declarations/planTypes.ts

@@ -1,3 +1,5 @@
+import {cssClasses} from "@data/styling/cssClasses.ts";
+
 /**
  *  Plan type used for parsing plan responses
  */
@@ -39,7 +41,9 @@ export class Itinerary {
     endTime: string = "";
     transfers: number = 0;
     legs: Leg[] = new Array<Leg>();
-    cssClass: string = "";
+    cssClass: string = cssClasses.planEntryDefault;
+    match: boolean = false;
+    index: number = 0;
 }
 
 /**
@@ -56,6 +60,8 @@ export class Leg {
     scheduledEndTime: string = "";
     realTime: boolean = true;
     legGeometry: EncodedPolyline = new EncodedPolyline();
+    headsign: string = "";
+    routeShortName: string = "";
 }
 
 /**

visual-debugger/src/lib/components/ui/DefaultItineraryOverview.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import {Itinerary, Leg} from "@data/type-declarations/planTypes.ts";
+    import {currentDefaultItineraryStore} from "sveltestore";
+    import {Separator} from "@/components/ui/separator";
+    import LegEntry from "@/components/ui/subcomponents/LegEntry.svelte";
+
+    let itinerary: Itinerary
+
+    let legs: Leg[]
+
+    // let queries be up-to-date with the store
+    currentDefaultItineraryStore.subscribe((data) => {
+            if (data == undefined) {
+                itinerary = new Itinerary()
+            } else {
+                itinerary = data
+                legs = data.legs
+            }
+        }
+    )
+
+</script>
+
+<div>
+    {#if itinerary == undefined}
+        <label> No itinerary currently selected</label>
+    {:else}
+        <div class="text-xl">
+            <span class="">Itinerary-Index: {itinerary.index}</span>
+        </div>
+        <Separator class="my-2"/>
+        {#each legs as leg}
+            <LegEntry leg={leg} />
+            <Separator class="my-2"/>
+        {/each}
+    {/if}
+
+</div>

visual-debugger/src/lib/components/ui/DefaultPlanOverview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import {currentDefaultPlanStore} from "../../../sveltestore.ts";
-    import type {Itinerary} from "../../../data-processing/parsing-types/planParsingTypes.ts";
+    import {currentDefaultPlanStore} from "sveltestore";
+    import type {Itinerary} from "@data/type-declarations/planTypes.ts";
     import PlanEntry from "$lib/components/ui/subcomponents/PlanEntry.svelte";
     import {ScrollArea} from "@/components/ui/scroll-area";
 
@@ -18,8 +18,7 @@
 
 <ScrollArea class="rounded-md border h-full">
     {#each itineraries as itinerary}
-        <PlanEntry cssClass="{itinerary.cssClass}" startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
-                    duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
+        <PlanEntry itinerary="{itinerary}"/>
     {/each}
 </ScrollArea>
 

visual-debugger/src/lib/components/ui/ItineraryOverview.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import {Itinerary, Leg} from "@data/type-declarations/planTypes.ts";
+    import {currentItineraryStore} from "sveltestore";
+    import {Separator} from "@/components/ui/separator";
+    import LegEntry from "@/components/ui/subcomponents/LegEntry.svelte";
+
+    let itinerary: Itinerary
+
+    let legs: Leg[]
+
+    // let queries be up-to-date with the store
+    currentItineraryStore.subscribe((data) => {
+            if (data == undefined) {
+                itinerary = new Itinerary()
+            } else {
+                itinerary = data
+                legs = data.legs
+            }
+        }
+    )
+
+</script>
+
+<div>
+    {#if itinerary == undefined}
+        <label> No itinerary currently selected</label>
+    {:else}
+        <div class="text-xl">
+            <span class="">Itinerary-Index: {itinerary.index}</span>
+        </div>
+        <Separator class="my-2"/>
+        {#each legs as leg}
+            <LegEntry leg={leg} />
+            <Separator class="my-2"/>
+        {/each}
+    {/if}
+
+</div>

visual-debugger/src/lib/components/ui/PlanOverview.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    import {currentPlanStore} from "../../../sveltestore.ts";
-    import type {Itinerary} from "../../../data-processing/parsing-types/planParsingTypes.ts";
+    import {currentPlanStore} from "sveltestore";
+    import type {Itinerary} from "@data/type-declarations/planTypes.ts";
     import PlanEntry from "$lib/components/ui/subcomponents/PlanEntry.svelte";
     import {ScrollArea} from "$lib/components/ui/scroll-area/index.js";
 
     let itineraries: Itinerary[]
 
     // let queries be up-to-date with the store
     currentPlanStore.subscribe((data) => {
-            if (data === undefined) {
-                alert("No plans found, please compute the queries before trying to switch between their data.")
-                return
+            if (data == undefined) {
+                itineraries = []
+                alert("No plans found. Please compute them first.")
+            } else {
+                itineraries = data.itineraries;
             }
-
-            itineraries = data.itineraries;
         }
     )
 
@@ -24,8 +24,7 @@
 <!-- Scroll area for the plan entries. Has to be styled a bit more to look good. -->
 <ScrollArea class="rounded-md border h-full">
     {#each itineraries as itinerary}
-        <PlanEntry cssClass="{itinerary.cssClass}" startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
-                   duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
+        <PlanEntry itinerary="{itinerary}"/>
     {/each}
 </ScrollArea>