Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

⚡️ Reduce the refresh on passages update to the TtwPassage component

Browse Source
This commit is contained in:
Adrien
2023-02-12 19:01:32 +01:00
parent 3913209b28
commit 5c08780f98
3 changed files with 121 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/businessData.tsx
View File

@@ -1,4 +1,4 @@
import { createContext, createSignal, JSX } from 'solid-js';
import { batch, createContext, createSignal, JSX } from 'solid-js';
import { createStore } from 'solid-js/store';
import { Line, Lines, Passage, Passages, Stop, Stops } from './types';
@@ -7,8 +7,11 @@ import { Line, Lines, Passage, Passages, Stop, Stops } from './types';
export interface BusinessDataStore {
getLine: (lineId: string) => Promise<Line>;
getLinePassages: (lineId: string) => Record<string, Passage[]>;
getLineDestinations: (lineId: string) => string[];
getDestinationPassages: (lineId: string, destination: string) => Passage[];
passages: () => Passages;
getPassagesLineIds: () => string[];
refreshPassages: (stopId: number) => Promise<void>;
addPassages: (passages: Passages) => void;
clearPassages: () => void;
@@ -46,12 +49,24 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
const getLinePassages = (lineId: string): Record<string, Passage[]> => {
return store.passages[lineId];
};
}
const getLineDestinations = (lineId: string): string[] => {
return Object.keys(store.passages[lineId]);
}
const getDestinationPassages = (lineId: string, destination: string): Passage[] => {
return store.passages[lineId][destination];
}
const passages = (): Passages => {
return store.passages;
}
const getPassagesLineIds = (): string[] => {
return Object.keys(store.passages);
}
const _cleanupPassages = (passages: Passages): void => {
const deadline = Math.floor(Date.now() / 1000) - 60;
for (const linePassages of Object.values(passages)) {
@@ -64,7 +79,6 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
}
}
linePassages[destination] = cleaned;
}
}
}
@@ -79,20 +93,45 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
}
const addPassages = (passages: Passages): void => {
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);
batch(() => {
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];
const linePassagesDestination = linePassages[destination];
if (linePassagesDestination === undefined) {
setStore('passages', lineId, destination, newLinePassagesDestination);
}
else {
if (linePassagesDestination.length - newLinePassagesDestination.length != 0) {
console.log(`Server provides ${newLinePassagesDestination.length} passages, \
${linePassagesDestination.length} here... refresh all them.`);
setStore('passages', lineId, destination, newLinePassagesDestination);
}
else {
linePassagesDestination.forEach((passage, index) => {
const newPassage = newLinePassagesDestination[index];
if (passage.expectedDepartTs != newPassage.expectedDepartTs) {
console.log(`Refresh expectedDepartTs (${passage.expectedDepartTs} -> ${newPassage.expectedDepartTs}`);
setStore('passages', lineId, destination, index, 'expectedDepartTs', newPassage.expectedDepartTs);
}
if (passage.expectedArrivalTs != newPassage.expectedArrivalTs) {
console.log(`Refresh expectedArrivalTs (${passage.expectedArrivalTs} -> ${newPassage.expectedArrivalTs}`);
setStore('passages', lineId, destination, index, 'expectedArrivalTs', newPassage.expectedArrivalTs);
}
});
}
}
}
}
}
}
});
}
const clearPassages = (): void => {
@@ -124,7 +163,8 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
return (
<BusinessDataContext.Provider value={{
getLine, getLinePassages, passages, refreshPassages, addPassages, clearPassages, getStop, searchStopByName
getLine, getLinePassages, getLineDestinations, getDestinationPassages, passages, getPassagesLineIds,
refreshPassages, addPassages, clearPassages, getStop, searchStopByName
}}>
{props.children}
</BusinessDataContext.Provider>

28
frontend/src/passagesDisplay.tsx
View File

@@ -202,7 +202,7 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe
return <div />;
}
const { getLinePassages, passages, clearPassages, refreshPassages } = businessDataStore;
const { getLinePassages, getLineDestinations, passages, getPassagesLineIds, clearPassages, refreshPassages } = businessDataStore;
const { isPassagesRefreshEnabled, getDisplayedPanelId, setDisplayedPanelId, getPanels, setPanels } = passagesDisplayStore;
const { getDisplayedStops } = searchStore;
@@ -253,31 +253,29 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe
let positioneds: PositionnedPanel[] = [];
let index = 0;
let chunk: Record<string, Record<string, Passage[]>> = {};
let chunkSize = 0;
let lineIds: string[] = [];
let destinationsNb = 0;
for (const lineId of Object.keys(passages())) {
const byLinePassages = getLinePassages(lineId);
const byLinePassagesKeys = Object.keys(byLinePassages);
for (const lineId of getPassagesLineIds()) {
const lineDestinations = getLineDestinations(lineId);
if (byLinePassagesKeys.length <= props.maxPassagesPerPanel - chunkSize) {
chunk[lineId] = byLinePassages;
chunkSize += byLinePassagesKeys.length;
if (lineDestinations.length <= props.maxPassagesPerPanel - destinationsNb) {
lineIds.push(lineId);
destinationsNb += lineDestinations.length;
}
else {
const panelid = index++;
const panel = <PassagesPanel show={panelid == getDisplayedPanelId()} passages={chunk} />;
const panel = <PassagesPanel stopId={getDisplayedStops()[0].id} lineIds={lineIds} show={panelid == getDisplayedPanelId()} />;
newPanels.push(panel);
positioneds.push({ position: panelid, panel: panel });
chunk = {};
chunk[lineId] = byLinePassages;
chunkSize = byLinePassagesKeys.length;
lineIds = [lineId];
destinationsNb = lineDestinations.length;
}
}
if (chunkSize) {
if (destinationsNb) {
const panelId = index++;
const panel = <PassagesPanel show={panelId == getDisplayedPanelId()} passages={chunk} />;
const panel = <PassagesPanel stopId={getDisplayedStops()[0].id} lineIds={lineIds} show={panelId == getDisplayedPanelId()} />;
newPanels.push(panel);
positioneds.push({ position: panelId, panel: panel });
}

103
frontend/src/passagesPanel.tsx
View File

@@ -1,41 +1,15 @@
import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
import { VoidComponent, createResource, 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";
import { Line, Passage, Passages, TrafficStatus } from './types';
import { Line, TrafficStatus } from './types';
import { renderLineTransportMode, renderLinePicto } from './utils';
import { BusinessDataContext, BusinessDataStore } from "./businessData";
import styles from './passagesPanel.module.css';
const TtwPassage: VoidComponent<{ passage: Passage, style: string, fontSize: number }> = (props) => {
const [dateNow] = createDateNow(5000);
const refTs = props.passage.expectedDepartTs !== null ? props.passage.expectedDepartTs : props.passage.expectedArrivalTs;
const ttwSec = refTs - (getTime(dateNow()) / 1000);
const isApproaching = ttwSec <= 60;
const transition: AnimationOptions = { duration: 3, repeat: Infinity };
return (
<div class={props.style}>
<svg viewBox={`0 0 215 ${props.fontSize}`}>
<Motion.text
x="100%" y="55%"
dominant-baseline="middle" text-anchor="end"
font-size={props.fontSize} style={{ fill: "#000000" }}
initial={isApproaching ? undefined : false}
animate={{ opacity: [1, 0, 1] }}
transition={transition}>
{Math.floor(ttwSec / 60)} min
</Motion.text>
</svg>
</div>
);
}
const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
const textStyle = { fill: "#000000" };
@@ -50,8 +24,47 @@ const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
);
}
const TtwPassage: VoidComponent<{ line: Line, destination: string, index: number, style: string, fontSize: number, fallbackStyle: string }> = (props) => {
const businessDataContext: BusinessDataStore | undefined = useContext(BusinessDataContext);
if (businessDataContext === undefined)
return <div />;
const { getDestinationPassages } = businessDataContext;
const [dateNow] = createDateNow(10000);
const transition: AnimationOptions = { duration: 3, repeat: Infinity };
return (() => {
const passage = getDestinationPassages(props.line.id, props.destination)[props.index];
const refTs = passage !== undefined ? (passage.expectedDepartTs !== null ? passage.expectedDepartTs : passage.expectedArrivalTs) : 0;
const ttwSec = refTs - (getTime(dateNow()) / 1000);
const isApproaching = ttwSec <= 60;
return (
<Show when={passage !== undefined} fallback=<UnavailablePassage style={props.fallbackStyle} />>
<div class={props.style}>
<svg viewBox={`0 0 215 ${props.fontSize}`}>
<Motion.text
x="100%" y="55%"
dominant-baseline="middle" text-anchor="end"
font-size={props.fontSize} style={{ fill: "#000000" }}
initial={isApproaching ? undefined : false}
animate={{ opacity: [1, 0, 1] }}
transition={transition}>
{Math.floor(ttwSec / 60)} min
</Motion.text>
</svg>
</div>
</Show>
);
});
}
/* TODO: Manage end of service */
const DestinationPassages: VoidComponent<{ passages: Passage[], line: Line, destination: string }> = (props) => {
const DestinationPassages: VoidComponent<{ line: Line, destination: string }> = (props) => {
/* TODO: Find where to get data to compute traffic status. */
const trafficStatusColor = new Map<TrafficStatus, string>([
@@ -62,10 +75,6 @@ const DestinationPassages: VoidComponent<{ passages: Passage[], line: Line, dest
[TrafficStatus.BYPASSED, "#ffffff"]
]);
const passagesLength = props.passages.length;
const firstPassage = passagesLength > 0 ? props.passages[0] : undefined;
const secondPassage = passagesLength > 1 ? props.passages[1] : undefined;
// TODO: Manage traffic status
// const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
const trafficStatusStyle = { fill: trafficStatusColor.get(TrafficStatus.UNKNOWN) };
@@ -88,17 +97,15 @@ const DestinationPassages: VoidComponent<{ passages: Passage[], line: Line, dest
<circle cx="50%" cy="50%" r="24" stroke="#231f20" stroke-width="3" style={trafficStatusStyle} />
</svg>
</div>
<Show when={firstPassage !== undefined} fallback=<UnavailablePassage style={styles.unavailableFirstPassage} />>
<TtwPassage style={styles.firstPassage} passage={firstPassage} fontSize={50} />
</Show>
<Show when={secondPassage !== undefined} fallback=<UnavailablePassage style={styles.unavailableSecondPassage} />>
<TtwPassage style={styles.secondPassage} passage={secondPassage} fontSize={45} />
</Show>
<TtwPassage line={props.line} destination={props.destination} index={0} style={styles.firstPassage}
fontSize={50} fallbackStyle={styles.unavailableFirstPassage} />
<TtwPassage line={props.line} destination={props.destination} index={1} style={styles.secondPassage}
fontSize={45} fallbackStyle={styles.unavailableSecondPassage} />
</div >
);
}
export type PassagesPanelComponentProps = ParentProps & { passages: Passages, show: boolean };
export type PassagesPanelComponentProps = ParentProps & { stopId: number, lineIds: string[], show: boolean };
export type PassagesPanelComponent = ParentComponent<PassagesPanelComponentProps>;
export const PassagesPanel: PassagesPanelComponent = (props) => {
@@ -106,29 +113,23 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
if (businessDataContext === undefined)
return <div />;
const { getLine } = businessDataContext;
const { getLine, getLineDestinations } = businessDataContext;
const getLines = async (lineIds: string[]): Promise<Line[]> => {
const lines = await Promise.all<Promise<Line>[]>(lineIds.map((lineId) => getLine(lineId)));
return lines;
}
const [lineIds, setLinesIds] = createSignal<string[]>([]);
const [lines] = createResource<Line[], string[]>(lineIds, getLines);
createEffect(async () => {
setLinesIds(Object.keys(props.passages));
});
const [lines] = createResource<Line[], string[]>(props.lineIds, getLines);
return (
<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
<Show when={lines() !== undefined} >
<For each={lines()}>
{(line) =>
<Show when={props.passages[line.id]}>
<For each={Object.keys(props.passages[line.id])}>
<Show when={getLineDestinations(line.id) !== undefined}>
<For each={getLineDestinations(line.id)}>
{(destination) =>
<DestinationPassages passages={props.passages[line.id][destination]} line={line} destination={destination} />
<DestinationPassages line={line} destination={destination} />
}
</For>
</Show>