Merge pull request #82 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/timetable/TimeTable.tsx

@@ -194,7 +194,7 @@ export interface LPTimeTableProps<
 
 	/**
 	 * renderBatch tells how many groups are calculated in one step and rendered. This is useful for large time tables, where the rendering takes a long time.
-	 * @default 10
+	 * @default 1
 	 */
 	renderBatch?: number
 }
@@ -217,7 +217,7 @@ export default function LPTimeTable<
 	)
 }
 
-export let timeTableGroupRenderBatchSize = 10
+export let timeTableGroupRenderBatchSize = 1
 
 /**
  * The LPTimeTable depends on the localization messages. It needs to be wrapped in an

library/src/components/timetable/TimeTableRows.tsx

@@ -41,7 +41,7 @@ import {
 } from "./TimeTableSelectionStore"
 import type { ItemRowEntry } from "./useGoupRows"
 import { getLeftAndWidth } from "./timeTableUtils"
-import { useDebounceHelper, useRateLimitHelper } from "../../utils"
+import { useDebounceHelper, useIdleRateLimitHelper } from "../../utils"
 
 interface TimeTableRowsProps<
 	G extends TimeTableGroup,
@@ -67,7 +67,7 @@ interface TimeTableRowsProps<
 }
 
 const intersectionStackDelay = 1
-const rateLimiting = 1
+export const renderIdleTimeout = 84 // ~12 fps
 const rowsMargin = 1
 
 /**
@@ -137,8 +137,8 @@ export default function TimeTableRows<
 		allPlaceholderRendered.current = false
 	}
 
-	const rateLimiterIntersection = useRateLimitHelper(rateLimiting)
-	const rateLimiterRendering = useRateLimitHelper(rateLimiting)
+	const rateLimiterIntersection = useIdleRateLimitHelper(renderIdleTimeout)
+	const rateLimiterRendering = useIdleRateLimitHelper(renderIdleTimeout)
 	const debounceIntersection = useDebounceHelper(intersectionStackDelay)
 
 	// handle intersection is called after intersectionStackDelay ms to avoid too many calls
@@ -597,6 +597,28 @@ function TableCell<G extends TimeTableGroup, I extends TimeSlotBooking>({
 					timeSlotMinutes,
 				)
 
+				if (left < 0) {
+					console.error(
+						"TimeTable - left is negative, this should not happen",
+						i,
+						it,
+						left,
+						currentLeft,
+						slotsArray,
+					)
+				}
+
+				if (width < 0) {
+					console.error(
+						"TimeTable - width is negative, this should not happen",
+						i,
+						it,
+						left,
+						currentLeft,
+						slotsArray,
+					)
+				}
+
 				const leftUsed = left - currentLeft
 				if (leftUsed < 0) {
 					console.error(
@@ -606,8 +628,11 @@ function TableCell<G extends TimeTableGroup, I extends TimeSlotBooking>({
 						leftUsed,
 						left,
 						currentLeft,
+						slotsArray,
+						bookingItemsBeginningInCell,
 					)
 				}
+
 				currentLeft = left + width
 
 				const gridTemplateColumnWidth =

library/src/components/timetable/index.ts

@@ -18,15 +18,10 @@ export type { TimeTableItemProps } from "./ItemWrapper"
 export type { TimeTablePlaceholderItemProps } from "./PlaceholderItem"
 import type { TimeFrameDay as _TimeFrameDay } from "./TimeTableConfigStore"
 
-import {
-	getLeftAndWidth,
-	getStartAndEndSlot,
-	itemsOutsideOfDayRangeORSameStartAndEnd,
-} from "./timeTableUtils"
+import { getLeftAndWidth, getStartAndEndSlot } from "./timeTableUtils"
 export const timeTableUtils = {
 	getLeftAndWidth,
 	getStartAndEndSlot,
-	itemsOutsideOfDayRangeORSameStartAndEnd,
 }
 
 //const memoized = React.memo(TimeTable) as typeof TimeTable

library/src/components/timetable/timeTableUtils.ts

@@ -546,7 +546,13 @@ export function getStartAndEndSlot(
 		}
 	}
 
-	let startSlot = slotsArray.findIndex((slot) => slot.isAfter(item.startDate))
+	let startSlot = -1
+	for (let i = 0; i < slotsArray.length; i++) {
+		if (slotsArray[i].isAfter(item.startDate)) {
+			startSlot = i
+			break
+		}
+	}
 	if (startSlot > 0) {
 		// if the item starts in the middle of a slot, we need to go back one slot to get the start slot
 		// but only if the time slot before is on the same day, else it means that the booking starts before the time frame range of the day
@@ -561,10 +567,17 @@ export function getStartAndEndSlot(
 		}
 	}
 	if (startSlot === -1) {
+		//startSlot = slotsArray.length - 1
 		startSlot = slotsArray.length - 1
 	}
 
-	let endSlot = slotsArray.findIndex((slot) => slot.isAfter(item.endDate))
+	let endSlot = -1
+	for (let i = startSlot; i < slotsArray.length; i++) {
+		if (slotsArray[i].isAfter(item.endDate)) {
+			endSlot = i
+			break
+		}
+	}
 	if (endSlot === -1) {
 		endSlot = slotsArray.length - 1
 	} else {
@@ -606,39 +619,3 @@ export function getStartAndEndSlot(
 
 	return { startSlot, endSlot, status: "in" }
 }
-
-export function itemsOutsideOfDayRangeORSameStartAndEnd<
-	I extends TimeSlotBooking,
->(
-	items: I[],
-	slotsArray: readonly Dayjs[],
-	timeFrameDay: TimeFrameDay,
-	timeSlotMinutes: number,
-	viewType: TimeTableViewType,
-) {
-	const itemsWithSameStartAndEnd: I[] = []
-	const itemsOutsideRange = items.filter((it) => {
-		if (it.startDate.isSame(it.endDate)) {
-			itemsWithSameStartAndEnd.push(it)
-			return false
-		}
-		if (slotsArray.length === 0) {
-			console.info(
-				"timeTableUtils - itemsOutsideOfDayRange - no slotsArray",
-			)
-			return false
-		}
-		const startAndEndSlot = getStartAndEndSlot(
-			it,
-			slotsArray,
-			timeFrameDay,
-			timeSlotMinutes,
-			viewType,
-		)
-		return (
-			startAndEndSlot.status === "after" ||
-			startAndEndSlot.status === "before"
-		)
-	})
-	return { itemsOutsideRange, itemsWithSameStartAndEnd }
-}

library/src/components/timetable/useGoupRows.ts

@@ -11,13 +11,10 @@ import {
 	useTTCViewType,
 } from "./TimeTableConfigStore"
 import { useTimeTableIdent } from "./TimeTableIdentContext"
-import {
-	getStartAndEndSlot,
-	isOverlapping,
-	itemsOutsideOfDayRangeORSameStartAndEnd,
-} from "./timeTableUtils"
+import { getStartAndEndSlot, isOverlapping } from "./timeTableUtils"
 import { useCallback, useRef, useState } from "react"
-import { useRateLimitHelper } from "../../utils"
+import { useIdleRateLimitHelper } from "../../utils"
+import { renderIdleTimeout } from "./TimeTableRows"
 
 /**
  * Contains the items of one group row (one row within one group)
@@ -29,8 +26,6 @@ export type ItemRowEntry<I extends TimeSlotBooking = TimeSlotBooking> = {
 	status: "before" | "after" | "in" // before: starts and ends before the time slot, after: starts and ends after the time slot, in: overlaps the time slot
 }
 
-const rateLimiting = 1
-
 export function useGroupRows<
 	G extends TimeTableGroup,
 	I extends TimeSlotBooking,
@@ -138,38 +133,29 @@ export function useGroupRows<
 
 			// calculate the new group rows
 			const {
+				itemRows,
 				itemsOutsideRange,
 				itemsWithSameStartAndEnd: _itemsWithSameStartAndEnd,
-			} = itemsOutsideOfDayRangeORSameStartAndEnd(
+			} = getGroupItemStack(
 				entry.items,
 				slotsArray,
 				timeFrameDay,
 				timeSlotMinutes,
 				viewType,
 			)
+
 			if (itemsOutsideRange.length) {
 				itemsOutsideOfDayRange.current = updatedItemsOutsideOfDayRange
 				itemsOutsideOfDayRange.current[entry.group.id] =
 					itemsOutsideRange
 			}
+
 			if (_itemsWithSameStartAndEnd.length) {
 				itemsWithSameStartAndEnd.current =
 					updatedItemsWithSameStartAndEnd
 				updatedItemsWithSameStartAndEnd[entry.group.id] =
 					_itemsWithSameStartAndEnd
 			}
-			const groupItems = entry.items.filter(
-				(it) => !_itemsWithSameStartAndEnd.includes(it),
-			)
-			//.filter((it) => !itemsOutsideRange.includes(it))
-
-			const itemRows = getGroupItemStack(
-				groupItems,
-				slotsArray,
-				timeFrameDay,
-				timeSlotMinutes,
-				viewType,
-			)
 
 			const oldRowCount =
 				groupRowsState.current[entry.group.id]?.length || 0
@@ -198,7 +184,7 @@ export function useGroupRows<
 		setCalcBatch((prev) => (prev > 10 ? prev - 1 : prev + 1))
 	}, [slotsArray, timeFrameDay, timeSlotMinutes, viewType])
 
-	const rateLimiterCalc = useRateLimitHelper(rateLimiting)
+	const rateLimiterCalc = useIdleRateLimitHelper(renderIdleTimeout)
 
 	if (requireNewGroupRows) {
 		currentEntries.current = entries
@@ -288,15 +274,20 @@ function getGroupItemStack<I extends TimeSlotBooking>(
 	timeFrameDay: TimeFrameDay,
 	timeSlotMinutes: number,
 	viewType: TimeTableViewType,
-): ItemRowEntry<I>[][] {
+) {
 	const itemRows: ItemRowEntry<I>[][] = []
+	const itemsOutsideRange: I[] = []
+	const itemsWithSameStartAndEnd: I[] = []
 
 	if (!slotsArray || slotsArray.length === 0) {
 		console.info("TimeTable - no slots array, returning empty item rows")
-		return itemRows
+		return { itemRows, itemsOutsideRange, itemsWithSameStartAndEnd }
 	}
 	for (const item of groupItems) {
-		let added = false
+		if (item.startDate.isSame(item.endDate)) {
+			itemsWithSameStartAndEnd.push(item)
+			continue
+		}
 
 		const startEndSlots = getStartAndEndSlot(
 			item,
@@ -306,36 +297,19 @@ function getGroupItemStack<I extends TimeSlotBooking>(
 			viewType,
 		)
 
-		const ret = {
-			...startEndSlots,
-			item,
-		}
-
 		if (
-			item.startDate.startOf("day") === item.endDate.startOf("day") &&
-			(item.endDate.hour() < timeFrameDay.startHour ||
-				(item.endDate.hour() === timeFrameDay.startHour &&
-					item.endDate.minute() < timeFrameDay.startMinute))
+			startEndSlots.status === "before" ||
+			startEndSlots.status === "after"
 		) {
-			if (itemRows.length === 0) {
-				itemRows.push([ret])
-			} else {
-				itemRows[0].push(ret)
-			}
+			itemsOutsideRange.push(item)
 			continue
 		}
 
-		if (
-			item.startDate.hour() > timeFrameDay.endHour ||
-			(item.startDate.hour() === timeFrameDay.endHour &&
-				item.startDate.minute() > timeFrameDay.endMinute)
-		) {
-			if (itemRows.length === 0) {
-				itemRows.push([ret])
-			} else {
-				itemRows[0].push(ret)
-			}
-			continue
+		let added = false
+
+		const ret = {
+			...startEndSlots,
+			item,
 		}
 
 		for (let r = 0; r < itemRows.length; r++) {
@@ -360,5 +334,5 @@ function getGroupItemStack<I extends TimeSlotBooking>(
 		row.sort((a, b) => a.item.startDate.diff(b.item.startDate))
 	}
 
-	return itemRows
+	return { itemRows, itemsOutsideRange, itemsWithSameStartAndEnd }
 }

library/src/utils/idleRateLimit.ts

@@ -0,0 +1,62 @@
+import { useRef } from "react"
+
+/**
+ * The idleRateLimitHelper returns a function, which you can call to execute a callback function.
+ * However, the callback function will only be executed if the time elapsed since the last call is greater than the specified minimum distance and by using the requestIdleCallback function of the browser.
+ * @param minDistanceMS the minimal elapsed time between two calls.
+ * @param executeAfter if true, the callback will be executed using a timeout after the minimum distance has passed, to make sure it is executed.
+ * @returns a function that takes a callback function as a parameter.
+ */
+export function idleRateLimitHelper(
+	timeoutMS: number | undefined,
+	executeAfter = true,
+) {
+	let lastTime = 0
+	let timeoutRunning = 0
+	if (timeoutMS !== undefined && timeoutMS <= 0) {
+		throw new Error("minDistanceMS must be positive and above 0")
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	return (cb: (...args: any[]) => any, ...args: any[]) => {
+		const now = Date.now()
+
+		if (timeoutMS !== undefined && now - lastTime > timeoutMS) {
+			cb(...args)
+			lastTime = now
+		} else {
+			if (timeoutRunning) {
+				cancelIdleCallback(timeoutRunning)
+			}
+			if (executeAfter) {
+				timeoutRunning = window.requestIdleCallback(
+					() => {
+						cb(...args)
+						lastTime = Date.now()
+					},
+					{
+						timeout: timeoutMS,
+					},
+				)
+			}
+		}
+	}
+}
+
+/**
+ * The idleRateLimitHelper just in a hook:
+ * The idleRateLimitHelper returns a function, which you can call to execute a callback function.
+ * However, the callback function will only be executed if the time elapsed since the last call is greater than the specified minimum distance.
+ * @param minDistanceMS the minimal elapsed time between two calls.
+ * @returns a function that takes a callback function as a parameter.
+ */
+export function useIdleRateLimitHelper(
+	minDistanceMS: number,
+	executeAfter = true,
+) {
+	const rateLimitHelperRef = useRef(
+		idleRateLimitHelper(minDistanceMS, executeAfter),
+	)
+	return rateLimitHelperRef.current
+}