♻️ Don´t overwrite store.passages structure during its update by the addPassage method

frontend/src/businessData.tsx

@@ -61,7 +61,20 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
 	}
 
 	const addPassages = (passages: Passages): void => {
-		setStore('passages', passages);
+		const storePassages = store.passages;
+		for (const lineId of Object.keys(passages)) {
+			const newLinePassages = passages[lineId];
+			const linePassages = storePassages[lineId];
+			if (linePassages === undefined) {
+				setStore('passages', lineId, newLinePassages);
+			}
+			else {
+				for (const destination of Object.keys(newLinePassages)) {
+					const newLinePassagesDestination = newLinePassages[destination];
+					setStore('passages', lineId, destination, newLinePassagesDestination);
+				}
+			}
+		}
 	}
 
 	const clearPassages = (): void => {

frontend/src/passagesDisplay.tsx

@@ -173,9 +173,8 @@ export const PassagesDisplay: ParentComponent = () => {
 							chunkSize += byLinePassagesKeys.length;
 						}
 						else {
-							const [store] = createStore(chunk);
 							const panelid = index++;
-							const panel = <PassagesPanel show={panelid == displayedPanelId()} passages={store} />;
+							const panel = <PassagesPanel show={panelid == displayedPanelId()} passages={chunk} />;
 							newPanels.push(panel);
 							positioneds.push({ position: panelid, panel: panel });
 
@@ -186,8 +185,7 @@ export const PassagesDisplay: ParentComponent = () => {
 					}
 					if (chunkSize) {
 						const panelId = index++;
-						const [store] = createStore(chunk);
+						const panel = <PassagesPanel show={panelId == displayedPanelId()} passages={chunk} />;
-						const panel = <PassagesPanel show={panelId == displayedPanelId()} passages={store} />;
 						newPanels.push(panel);
 						positioneds.push({ position: panelId, panel: panel });
 					}

frontend/src/passagesPanel.tsx

@@ -1,4 +1,4 @@
-import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
+import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
 import { createDateNow, getTime } from '@solid-primitives/date';
 import { AnimationOptions } from '@motionone/types';
 import { Motion } from "@motionone/solid";
@@ -123,18 +123,17 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
 	return (
 		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
 			<Show when={lines() !== undefined} >
-				{() => {
+				<For each={lines()}>
-					const ret = [];
+					{(line) =>
-					for (const line of lines()) {
+						<Show when={props.passages[line.id]}>
-						const byLinePassages = props.passages[line.id];
+							<For each={Object.keys(props.passages[line.id])}>
-						if (byLinePassages !== undefined) {
+								{(destination) =>
-							for (const destination of Object.keys(byLinePassages)) {
+									<DestinationPassages passages={props.passages[line.id][destination]} line={line} destination={destination} />
-								ret.push(<DestinationPassages passages={byLinePassages[destination]} line={line} destination={destination} />);
+								}
-							}
+							</For>
-						}
+						</Show>
 					}
-					return ret;
+				</For>
-				}}
 			</Show>
 		</div >
 	);