feat: compare plans (#32)

* feat: add validity array building

* feat: add plan comparation, css adjustments

* feat: add mismatched default plan

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

@@ -0,0 +1,73 @@
+import type {Plan} from "./parsing-types/planParsingTypes.ts";
+import {
+    currentDefaultPlanStore,
+    currentPlanStore,
+    defaultPlanDatasetStore,
+    planDatasetStore
+} from "../sveltestore.ts";
+import {cssClasses} from "./parsing-types/cssClasses.ts";
+import {resetCssClassesForPlanEntries} from "./planParsing.ts";
+
+/**
+ * Compares the computed results of the queries with the uploaded default plan and sets colors of the matches/mismatches
+ */
+export function comparePlans() {
+    let plans: Plan[] = [];
+    let defaultPlans: Plan[] = [];
+
+    planDatasetStore.subscribe(data => {
+        plans = data
+    })
+
+    defaultPlanDatasetStore.subscribe(data => {
+        defaultPlans = data
+    })
+
+    //reset css classes
+    for (let i = 0; i < plans.length; i++) {
+        resetCssClassesForPlanEntries(plans[i]);
+        resetCssClassesForPlanEntries(defaultPlans[i]);
+    }
+
+    // find if one plan has more entries than the other
+    if (plans.length != defaultPlans.length) {
+        if (plans.length >= defaultPlans.length) {
+            alert("Error: There are more queries in the batch than in the default plans.")
+            return
+        } else {
+            alert("Error: There are more queries in the default plan than in the batch.")
+            return
+        }
+    }
+
+    // iterate over all plans
+    for (let planIndex = 0; planIndex < plans.length; planIndex++) {
+
+        let currentPlan: Plan = plans[planIndex];
+        let currentDefaultPlan: Plan = defaultPlans[planIndex];
+
+        // iterate over all itineraries of a plan
+        for (let itineraryIndex = 0; itineraryIndex < currentPlan.itineraries.length; itineraryIndex++) {
+
+            let currentItinerary = currentPlan.itineraries[itineraryIndex];
+            let currentDefaultItinerary = currentDefaultPlan.itineraries[itineraryIndex];
+
+            // 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
+
+            } else {
+                // itineraries are not equal
+                plans[planIndex].itineraries[itineraryIndex].cssClass = new cssClasses().planEntryInvalid
+                defaultPlans[planIndex].itineraries[itineraryIndex].cssClass = new cssClasses().planEntryInvalid
+            }
+
+        }
+
+        // update the current stores to show the matches/mismatches
+        currentPlanStore.set(plans[0])
+        currentDefaultPlanStore.set(defaultPlans[0])
+    }
+}

visual-debugger/src/data-processing/parsing-types/cssClasses.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ */
+export class cssClasses{
+    planEntryValid: string = "w-full my-2 border-green-500 bg-green-200"
+
+    planEntryInvalid: string = "w-full my-2 border-red-500 bg-red-200"
+
+    planEntryDefault: string = "w-full my-2 border-white-500 bg-white-200"
+}

visual-debugger/src/data-processing/parsing-types/planParsingTypes.ts

@@ -39,6 +39,7 @@ export class Itinerary {
     endTime: string = "";
     transfers: number = 0;
     legs: Leg[] = new Array<Leg>();
+    cssClass: string = "";
 }
 
 /**

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

@@ -2,6 +2,7 @@ import {interpolatedQueryStore, planDatasetStore, currentPlanStore} from "../sve
 import type {Query} from "./parsing-types/queryInterpolationTypes.ts";
 import type {Plan} from "./parsing-types/planParsingTypes.ts"
 import axios from "axios";
+import {cssClasses} from "./parsing-types/cssClasses.ts";
 
 /**
  * Base URL of the MOTIS API
@@ -36,6 +37,11 @@ export async function computePlan() {
         index++;
     }
 
+    // set default (white) css classes for itineraries
+    for (let plan of plans) {
+        resetCssClassesForPlanEntries(plan)
+    }
+
     // put computed plans into storage and set first plan as active
     planDatasetStore.set(plans)
     currentPlanStore.set(plans[0])
@@ -79,4 +85,16 @@ export function downloadPlans(): void {
     fileElement.click();
 }
 
+/**
+ * Sets the cssClass for all itineraries of the plan to the default plan entry class
+ * @param plan the plan to reset the CSS-Classes for
+ */
+export function resetCssClassesForPlanEntries(plan: Plan) {
+    let itineraries = plan.itineraries
+
+    for (let itinerary of itineraries) {
+        itinerary.cssClass = new cssClasses().planEntryDefault
+    }
+}
+
 

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

@@ -18,7 +18,7 @@
 
 <ScrollArea class="rounded-md border h-full">
     {#each itineraries as itinerary}
-        <PlanEntry startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
+        <PlanEntry cssClass="{itinerary.cssClass}" startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
                     duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
     {/each}
 </ScrollArea>

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

@@ -8,22 +8,19 @@
 
     // let queries be up-to-date with the store
     currentPlanStore.subscribe((data) => {
-            if (data == undefined) {
-                itineraries = []
-            } else {
-                itineraries = data.itineraries;
-            }
+            itineraries = data.itineraries;
         }
     )
-</script>
 
 
+</script>
+
 
 <!-- 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 startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
-                duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
+        <PlanEntry cssClass="{itinerary.cssClass}" startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
+                   duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
     {/each}
 </ScrollArea>
 

visual-debugger/src/lib/components/ui/subcomponents/PlanEntry.svelte

@@ -5,11 +5,12 @@
     export let endTime: String;
     export let duration: String;
     export let transfers: String;
+    export let cssClass: String;
 
 </script>
 
 <div class="text-2xl">
-    <Button variant="outline" class="w-full my-2 border-green-500 bg-green-200">
+    <Button variant="outline" class="{cssClass}">
         <span class="text-left w-full">StartTime:{startTime}, EndTime:{endTime}</span>
     </Button>
 </div>