refactor(queries): Improve queries performance and dependencies

frontend-nextjs/src/components/DraggableTimeFilterRange.tsx

@@ -4,7 +4,7 @@ import '@/styles/draggable-time-filter-range.css'
 import { cn } from '@/utility/classNames'
 import { dateToComparableDateItem } from '@/utility/comparableDateItemSchema'
 import { format } from '@/utility/dateUtil'
-import useEvents from '@/utility/useEvents'
+import { useAllEvents } from '@/utility/useEvents'
 import { isInSameAggregationUnit } from '@/utility/useTimeIntervals'
 import useDebounce from '@custom-react-hooks/use-debounce'
 import useElementSize from '@custom-react-hooks/use-element-size'
@@ -14,7 +14,7 @@ import RangeSlider from 'react-range-slider-input'
 import useTimelineEvents from './EventsTimeline/useTimelineEvents'
 
 function DraggableTimeFilterRange() {
-	const { isLoading } = useEvents()
+	const { isLoading } = useAllEvents()
 	const from = useFiltersStore(({ from }) => dateToComparableDateItem(from))
 	const to = useFiltersStore(({ to }) => dateToComparableDateItem(to))
 	const setDateRange = useFiltersStore(({ setDateRange }) => setDateRange)
@@ -147,10 +147,8 @@ const HandleTooptip = memo(
 const BackgroundVis = memo(() => {
 	const [parentRef, size] = useElementSize()
 	const { datasetStartDate, datasetEndDate } = useToday()
-	const { data } = useEvents()
 	const { eventColumns, columnsCount, sizeScale } = useTimelineEvents({
 		size,
-		data,
 		aggregationUnit: 'week',
 		config: {
 			eventMinHeight: 2,

frontend-nextjs/src/components/EventsTimeline/EventsTimeline.tsx

@@ -4,7 +4,12 @@ import { cn } from '@/utility/classNames'
 import { type ComparableDateItemType } from '@/utility/comparableDateItemSchema'
 import { format } from '@/utility/dateUtil'
 import { parseErrorMessage } from '@/utility/errorHandlingUtil'
-import useEvents, { type UseEventsReturnType } from '@/utility/useEvents'
+import { useAllEvents, useFilteredEvents } from '@/utility/useEvents'
+import {
+	useAllOrganisations,
+	useFilteredEventsOrganisations,
+	useSelectedOrganisations,
+} from '@/utility/useOrganisations'
 import { isInSameAggregationUnit } from '@/utility/useTimeIntervals'
 import useElementSize from '@custom-react-hooks/use-element-size'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
@@ -28,13 +33,15 @@ type DataSourceInsertionType = {
 	name: string
 }
 
-function EventsTimeline({ data }: { data: UseEventsReturnType['data'] }) {
+function EventsTimeline() {
 	const [parentRef, size] = useElementSize()
-	const { organisations, eventsByOrgs, selectedOrganisations } = data
 	const aggregationUnit = useAggregationUnit(size.width)
+	const { filteredEvents, isLoading } = useFilteredEvents()
+	const { organisations } = useAllOrganisations()
+	const { filteredEventsOrganisations } = useFilteredEventsOrganisations()
+	const { selectedOrganisations } = useSelectedOrganisations()
 	const { eventColumns, columnsCount, sizeScale } = useTimelineEvents({
 		size,
-		data,
 		aggregationUnit,
 	})
 	// const { today } = useToday();
@@ -54,7 +61,8 @@ function EventsTimeline({ data }: { data: UseEventsReturnType['data'] }) {
 		// 	name: "Press Releases by Last Generation",
 		// },
 	]
-	if (eventsByOrgs.length === 0) return <EmptyEventsTimeline />
+
+	if (!isLoading && filteredEvents.length === 0) return <EmptyEventsTimeline />
 
 	return (
 		<EventsTimelineWrapper organisations={organisations} ref={parentRef}>
@@ -119,7 +127,7 @@ function EventsTimeline({ data }: { data: UseEventsReturnType['data'] }) {
 												key={event.event_id}
 												event={event}
 												organisations={organisations}
-												selectedOrganisations={selectedOrganisations}
+												selectedOrganisations={filteredEventsOrganisations}
 												height={sizeScale(event.size_number ?? 0)}
 											/>
 										))}
@@ -129,7 +137,7 @@ function EventsTimeline({ data }: { data: UseEventsReturnType['data'] }) {
 											sumSize={sumSize}
 											height={Math.ceil(sizeScale(sumSize))}
 											organisations={combinedOrganizers}
-											selectedOrganisations={combinedSelectedOrganizers}
+											selectedOrganisations={filteredEventsOrganisations}
 											events={eventsWithSize}
 											aggregationUnit={aggregationUnit}
 										/>
@@ -147,18 +155,19 @@ function EventsTimeline({ data }: { data: UseEventsReturnType['data'] }) {
 			</EventsTimelineScrollWrapper>
 			<EventsTimelineLegend
 				sizeScale={sizeScale}
+				organisations={filteredEventsOrganisations}
 				selectedOrganisations={selectedOrganisations}
 			/>
 		</EventsTimelineWrapper>
 	)
 }
 
 function EventsTimelineWithData({ reset }: { reset?: () => void }) {
-	const { data, isFetching, isPending, error, isError } = useEvents()
+	const { allEvents, isFetching, isPending, error, isError } = useAllEvents()
 	if (isFetching || isPending) return <LoadingEventsTimeline />
 	if (isError)
 		return <ErrorEventsTimeline {...parseErrorMessage(error)} reset={reset} />
-	if (data?.events.length > 0) return <EventsTimeline data={data} />
+	if (allEvents.length > 0) return <EventsTimeline />
 	return <EmptyEventsTimeline />
 }
 export default function EventsTimelineWithErrorBoundary() {

frontend-nextjs/src/components/EventsTimeline/EventsTimelineLegend.tsx

@@ -13,6 +13,7 @@ import useAggregationUnit from './useAggregationUnit'
 
 export type LegendOrganisation = Omit<OrganisationType, 'count'> & {
 	count?: number
+	isActive?: boolean
 }
 
 const placeholderOrganisations: LegendOrganisation[] = [
@@ -105,9 +106,11 @@ const placeholderOrganisations: LegendOrganisation[] = [
 function EventsTimelineLegend({
 	sizeScale = scaleLinear().domain([10, 100000]).range([10, 193.397]),
 	selectedOrganisations = placeholderOrganisations,
+	organisations = placeholderOrganisations,
 }: {
 	sizeScale?: ScaleLinear<number, number, never>
 	selectedOrganisations?: LegendOrganisation[]
+	organisations?: LegendOrganisation[]
 }) {
 	const [parentRef, { width }] = useElementSize()
 	const aggregationUnit = useAggregationUnit(width)
@@ -126,7 +129,10 @@ function EventsTimelineLegend({
 						sizeScale={sizeScale}
 						aggragationUnit={aggregationUnit}
 					/>
-					<OrgsLegend organisations={selectedOrganisations} />
+					<OrgsLegend
+						organisations={organisations}
+						selectedOrganisations={selectedOrganisations}
+					/>
 				</div>
 			</CollapsableSection>
 			<DataCreditLegend

frontend-nextjs/src/components/EventsTimeline/useTimelineEvents.ts

@@ -1,6 +1,7 @@
 import { ComparableDateItemType } from "@/utility/comparableDateItemSchema";
 import type { OrganisationType, ParsedEventType } from "@/utility/eventsUtil";
-import type { UseEventsReturnType } from "@/utility/useEvents";
+import { useAllEvents } from "@/utility/useEvents";
+import { useAllOrganisations, useSelectedOrganisations } from "@/utility/useOrganisations";
 import useTimeIntervals, {
 	isInSameAggregationUnit,
 } from "@/utility/useTimeIntervals";
@@ -31,14 +32,12 @@ function combineOrganizers(
 
 function useTimelineEvents({
 	size,
-	data,
 	aggregationUnit,
 	config = defaultConfig,
 	from,
 	to,
 }: {
 	size: { width: number; height: number };
-	data: UseEventsReturnType["data"];
 	aggregationUnit: AggregationUnitType;
 	from?: Date;
 	to?: Date;
@@ -48,6 +47,9 @@ function useTimelineEvents({
 		aggregatedEventMaxHeight: number;
 	};
 }) {
+	const { allEvents } = useAllEvents();
+	const { organisations } = useAllOrganisations();
+	const { selectedOrganisations } = useSelectedOrganisations();
 	const intervals = useTimeIntervals({ aggregationUnit, from, to });
 	const columnsCount = intervals.length;
 	const isInSameUnit = useCallback(
@@ -57,11 +59,13 @@ function useTimelineEvents({
 	);
 
 	const eventColumnsWithoutOrgs = useMemo(() => {
-		if (!data?.allEvents) return [];
+		if (!allEvents) return [];
 		return intervals.map((comparableDateObject) => {
-			const columnEvents = data.allEvents.filter((evt) =>
-				isInSameUnit(evt, comparableDateObject),
-			);
+			const columnEvents = allEvents.filter((evt) => {
+				const isInUnit = isInSameUnit(evt, comparableDateObject)
+				if (!isInUnit || selectedOrganisations.length === 0) return false
+				return selectedOrganisations.find((org) => evt.organizers.find((x) => x.slug === org.slug))
+			});
 			const eventsWithSize = columnEvents.sort((a, b) => {
 				const aSize = a.size_number ?? 0;
 				const bSize = b.size_number ?? 0;
@@ -80,19 +84,19 @@ function useTimelineEvents({
 				columnEvents,
 			}
 		})
-	}, [data.allEvents, intervals, isInSameUnit])
+	}, [allEvents, selectedOrganisations, intervals, isInSameUnit])
 
 	const eventColumns = useMemo(() => {
-		if (!data?.organisations) return [];
+		if (!organisations) return [];
 		return eventColumnsWithoutOrgs.map((d) => ({
 			...d,
-			combinedOrganizers: combineOrganizers(d.columnEvents, data.organisations),
+			combinedOrganizers: combineOrganizers(d.columnEvents, organisations),
 			combinedSelectedOrganizers: combineOrganizers(
 				d.columnEvents,
-				data.selectedOrganisations,
+				selectedOrganisations,
 			),
 		}));
-	}, [data.organisations, data.selectedOrganisations, eventColumnsWithoutOrgs]);
+	}, [organisations, selectedOrganisations, eventColumnsWithoutOrgs]);
 
 	const sizeScale = useMemo(() => {
 		const displayedEvents = eventColumns.reduce((acc, day) => {

frontend-nextjs/src/components/ImpactChart/ImpactChartColumnDescriptions.tsx

@@ -11,7 +11,7 @@ import type {
 import type { ParsedMediaImpactItemType } from '@/utility/mediaImpactUtil'
 import { texts, titleCase } from '@/utility/textUtil'
 import { topicIsSentiment } from '@/utility/topicsUtil'
-import useEvents from '@/utility/useEvents'
+import { useAllEvents, useFilteredEvents } from '@/utility/useEvents'
 import { useOrganisation } from '@/utility/useOrganisations'
 import { scaleQuantize } from 'd3-scale'
 import {
@@ -38,20 +38,21 @@ const SelectedTimeframeTooltip = memo(
 	({ organisation }: { organisation?: OrganisationType }) => {
 		const from = useFiltersStore(({ from }) => format(from, 'LLLL d, yyyy'))
 		const to = useFiltersStore(({ to }) => format(to, 'LLLL d, yyyy'))
-		const { data } = useEvents()
+		const { allEvents } = useAllEvents()
+		const { filteredEvents } = useFilteredEvents()
 		const minPercentageConsideredGood = 40
 
 		const { color, percentageOfOrgsInTimeframe, showNotice } = useMemo(() => {
-			if (!data || !organisation)
+			if (!allEvents || !organisation)
 				return {
 					color: undefined,
 					percentageOfOrgsInTimeframe: undefined,
 					showNotice: false,
 				}
-			const allEventsFromOrg = data.allEvents.filter((e) =>
+			const allEventsFromOrg = allEvents.filter((e) =>
 				e.organizers.find((o) => o.slug === organisation.slug),
 			).length
-			const eventsFromOrgInTimeframe = data.events.filter((e) =>
+			const eventsFromOrgInTimeframe = filteredEvents.filter((e) =>
 				e.organizers.find((o) => o.slug === organisation.slug),
 			).length
 			const percentageOfOrgsInTimeframe =
@@ -68,7 +69,7 @@ const SelectedTimeframeTooltip = memo(
 				percentageOfOrgsInTimeframe,
 				showNotice: percentageOfOrgsInTimeframe < minPercentageConsideredGood,
 			}
-		}, [data, organisation])
+		}, [allEvents, filteredEvents, organisation])
 
 		return (
 			<Tooltip delayDuration={0}>