* MS timelines playing panel loads *much* faster, by just using the t…

…imeline-steps data already loaded from the group query, rather than making a separate query for each one.

Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/PlayingSubpanel.tsx

@@ -110,15 +110,15 @@ export class PlayingSubpanel extends BaseComponent<{map: Map}, {}, { messageArea
 			const steps = GetTimelineSteps(timeline.id);
 			//const stepTimesFromStart = steps.map(step=>GetTimelineStepTimeFromStart(step.id));
 			const firstNormalStep = steps[1];
-			const targetStep = steps.Skip(1).LastOrX(a=>a && DoesTimelineStepMarkItselfActiveAtTimeX(a.id, this.targetTime)) ?? firstNormalStep!;
+			const targetStep = steps.Skip(1).LastOrX(a=>a && DoesTimelineStepMarkItselfActiveAtTimeX(a, this.targetTime)) ?? firstNormalStep!;
 			if (targetStep) {
 				targetStepIndex = steps.indexOf(targetStep);
 				//const postTargetStepIndex = targetStepIndex + 1 < steps.length ? targetStepIndex + 1 : -1;
 				const postTargetStepIndex = (targetStepIndex + 1).KeepAtMost(steps.length - 1); // if on last step, we want arrow to stop there, so consider last-step both the current-step and next-step (for arrow positioning)
 				const postTargetStep: TimelineStep|n = steps[postTargetStepIndex];
 
-				const targetStepTimeFromStart = GetTimelineStepTimeFromStart(targetStep.id);
-				const postTargetStepTimeFromStart = GetTimelineStepTimeFromStart(postTargetStep?.id);
+				const targetStepTimeFromStart = GetTimelineStepTimeFromStart(targetStep);
+				const postTargetStepTimeFromStart = GetTimelineStepTimeFromStart(postTargetStep);
 
 				// const targetStep_rect = this.stepRects[targetStepIndex];
 				/* const targetStep_comp = this.stepComps[targetStepIndex];
@@ -196,7 +196,7 @@ export class PlayingSubpanel extends BaseComponent<{map: Map}, {}, { messageArea
 			const steps = GetTimelineSteps(timeline.id);
 			const firstStep = steps[0];
 
-			const targetStep = steps.LastOrX(a=>a && DoesTimelineStepMarkItselfActiveAtTimeX(a.id, this.targetTime)) ?? firstStep;
+			const targetStep = steps.LastOrX(a=>a && DoesTimelineStepMarkItselfActiveAtTimeX(a, this.targetTime)) ?? firstStep;
 			if (targetStep) {
 				const newCurrentStepIndex = steps.indexOf(targetStep);
 				//const newAppliedStepIndex = newCurrentStepIndex.KeepAtLeast(oldAppliedStepIndex);

Packages/client/Source/UI/@Shared/Timelines/TimelinePanel/PlayingSubpanel/StepUI.tsx

@@ -27,7 +27,7 @@ export class StepUI extends BaseComponentPlus(
 	render() {
 		const {index, last, map, timeline, steps, step, player} = this.props;
 		const {showNodeReveals, editorOpen} = this.state;
-		const timeFromStart = GetTimelineStepTimeFromStart(step?.id);
+		const timeFromStart = GetTimelineStepTimeFromStart(step);
 
 		let margin: string|undefined;
 		if (step.groupID == PositionOptionsEnum.center) margin = "0 30px";

Packages/js-common/Source/DB/timelineSteps.ts

@@ -7,6 +7,11 @@ import {GetNode, GetNodeChildren} from "./nodes.js";
 export const GetTimelineStep = CreateAccessor((id: string|n): TimelineStep|n=>{
 	return GetDoc({}, a=>a.timelineSteps.get(id!));
 });
+/** In most cases, this is more efficient than GetTimelineStep, since it makes (and caches) only one backend query. */
+export const GetTimelineStep_Batched = CreateAccessor((id: string|n, timelineID: string): TimelineStep|n=>{
+	const steps = GetTimelineSteps(timelineID);
+	return steps.find(a=>a.id == id);
+});
 export const GetTimelineSteps = CreateAccessor((timelineID: string, orderByOrderKeys = true): TimelineStep[]=>{
 	let result = GetDocs({
 		params: {filter: {
@@ -17,8 +22,8 @@ export const GetTimelineSteps = CreateAccessor((timelineID: string, orderByOrder
 	return result;
 });
 
-export const GetTimelineStepTimeFromStart = CreateAccessor((stepID: string|n): number|null=>{
-	const step = GetTimelineStep(stepID);
+export const GetTimelineStepTimeFromStart = CreateAccessor((step: TimelineStep|n): number|null=>{
+	//const step = GetTimelineStep(stepID);
 	if (step == null) return null;
 	// quick route: if step's time is specified absolutely, just return that
 	if (step.timeFromStart != null) return step.timeFromStart;
@@ -51,8 +56,8 @@ export const GetTimelineStepsReachedByTimeX = CreateAccessor((timelineID: string
 	const stepTimes = GetTimelineStepTimesFromStart(steps);
 	return steps.filter((_, i)=>stepTimes[i] <= timeX);
 });
-export const DoesTimelineStepMarkItselfActiveAtTimeX = CreateAccessor((stepID: string, timeX: number)=>{
-	const timeFromStart = GetTimelineStepTimeFromStart(stepID);
+export const DoesTimelineStepMarkItselfActiveAtTimeX = CreateAccessor((step: TimelineStep|n, timeX: number)=>{
+	const timeFromStart = GetTimelineStepTimeFromStart(step);
 	if (timeFromStart == null) return false;
 	return timeFromStart <= timeX;
 });