I admit this is a going to be a beefy one, so I will offer a bonus 100 (via bounty) points to whoever can answer it. I have started to work on this codebase, and haven’t used RxJS before, though I think more the issue here is how the dependencies are working, rather than a RxJS issue.
THe line that causes the looping to be triggered is in SelectorColumn and here:
const { reduxSelector, unwrappedItems, mapper, emptyMessage } = hydrator(
columnData.item,
columnIndex,
);
I am not sure if the hydrator is a concept in RxJS but I could not find anything on it. I have then tried to go backwards through components to see where the rerendering is being triggered. But without any real state that I can see, I get lost.
LocationSelector
export const LocationSelector = () => {
const currentLocationId = 2;
const dispatch = useAppDispatch();
const [locationSelectorState, setSelectorStateFromObservable] = useState<
Map<ItemId, ItemCheckedStateTree>
>(locationSelectorState$.getValue());
useEffect(() => {
const subscription = locationSelectorState$.subscribe(
setSelectorStateFromObservable,
);
return () => subscription.unsubscribe();
}, []);
const handleSelectorDone = (state: Map<ItemId, ItemCheckedStateTree>) => {
setLocationSelectorState(state);
setLocationSelectorVisible(false);
};
const handleSelectorCancel = () => setLocationSelectorVisible(false);
// TODO Bit of an issue with the Selector in general – it is not reactive.
// If the state of this LocationSelector component changes, for example,
// this hydrator is not re-invoked. This means that the Selector will not
// re-render. A small knot in the logic which we have worked around here, but
// a 'useSelectorHydrator' hook would be a good idea.
const hydrator = (
location?: SelectorItem,
columnIndex?: number,
): SelectorHydrator => {
const locationToSelectId = location?.id ?? currentLocationId;
if (columnIndex === 0 && locationToSelectId) {
dispatch(
locationEndpoints.getLocationDetails.initiate({
locationId: locationToSelectId,
}),
);
return {
reduxSelector: locationEndpoints.getLocationDetails.select({
locationId: locationToSelectId,
}),
mapper: locationDetailMapper,
};
}
const query = {
immediateChildrenOnly: true,
locationId: locationToSelectId ? +locationToSelectId : undefined,
};
dispatch(locationEndpoints.getLocations.initiate(query));
return {
reduxSelector: locationEndpoints.getLocations.select(query),
mapper: locationMapper,
};
};
return (
<Selector
hydrator={hydrator}
state={locationSelectorState}
title=" Location Selector"
icon={faCrosshairs}
onCancel={handleSelectorCancel}
onDone={handleSelectorDone}
/>
);
};
MetricsBuildQuery
interface Props {
isShowingResults: boolean;
setShowingResults: Function;
}
const dateFormatString = "yyyy-MM-dd HH:mm:ss:SSS";
export const MetricsBuildQuery = ({
isShowingResults,
setShowingResults,
}: Props) => {
const currentLocationId = 2;
const dispatch = useAppDispatch();
const { data: locationDetail, error } = useGetLocationDetailsQuery({
locationId: currentLocationId,
});
const [selectedLocations, setSelectedLocations] = useState<SelectorItem[]>(
[],
);
useEffect(() => {
const subscription = selectedLocations$.subscribe(setSelectedLocations);
return () => subscription.unsubscribe();
}, []);
// Set the query metric for API call =========================================
const [selectedPointIds, setSelectedPointIdsFromObservable] = useState<
number[]
>([]);
useEffect(() => {
const subscription = selectedPointIds$.subscribe(
setSelectedPointIdsFromObservable,
);
return () => subscription.unsubscribe();
}, []);
// Pre-fetch the assets for the selected locations ===========================
useEffect(() => {
selectedLocations.forEach((option) =>
dispatch(
assetsEndpoints.getAssets.initiate({
locationId: option?.id as number,
}),
),
);
setPointSelectorState(new Map());
}, [selectedLocations, dispatch]);
// Set first location as selected ============================================
useEffect(() => {
if (currentLocationId && locationDetail) {
const currentLocationSelectorItem = locationDetailMapper(locationDetail);
setLocationSelectorState(
createCheckedItem(currentLocationSelectorItem[0]),
);
}
}, [currentLocationId, locationDetail]);
// Time range ================================================================
const [timeRange, setTimeRange] = useState<TimeRange | undefined>();
useEffect(() => {
const subscription = timeRange$.subscribe(setTimeRange);
return () => subscription.unsubscribe();
}, []);
// Location Selector visibility ==============================================
const [locationSelectorVisible, setLocationSelectorVisible] =
useState<boolean>(false);
useEffect(() => {
const subscription = locationSelectorVisible$.subscribe(
setLocationSelectorVisible,
);
return () => subscription.unsubscribe();
}, []);
// Point Selector visibility =================================================
const [pointSelectorVisible, setPointSelectorVisible] =
useState<boolean>(false);
useEffect(() => {
const subscription = pointSelectorVisible$.subscribe(
setPointSelectorVisible,
);
return () => subscription.unsubscribe();
}, []);
const [hasPoints, setHasPoints] = useState(false);
useEffect(() => {
const subscription = hasPoints$.subscribe(setHasPoints);
return () => subscription.unsubscribe();
}, []);
const handleRunQuery = () => {
setPointQueryPointIds(selectedPointIds.join(","));
if (timeRange) {
setPointQueryTimeRange(
format(timeRange.customStartTime, dateFormatString),
format(timeRange.customEndTime, dateFormatString),
);
}
setShowingResults(true);
};
const ChooseLocationsMemo = React.memo(ChooseLocations);
const PointSelectorMemo = React.memo(PointSelector);
const LocationSelectorMemo = React.memo(LocationSelector);
return (
<>
{/* TODO Need to memoise these components */}
{locationSelectorVisible && <LocationSelectorMemo />}
{pointSelectorVisible && <PointSelectorMemo />}
<Paper
noPadding={true}
header={
<PaperHeader
title="Build Query"
icon={CalendarTodayOutlinedIcon}
toolbar={
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Button onClick={() => handleRunQuery()} disabled={!hasPoints}>
{isShowingResults ? "Re-run Query" : "Run Query"}
</Button>
</Stack>
}
/>
}
>
<div tw="flex m-4 gap-6">
<div tw="flex flex-col gap-4 flex-1">
{/* TODO Need to memoise these components */}
<ChooseRangeOption />
<ChooseLocationsMemo />
<ChoosePoints />
</div>
<ChooseRange />
</div>
</Paper>
</>
);
};
SelectorColumn
const dummySelector = createSelector(() => null);
const defaultStyle = {
width: 224,
height: 400,
};
export const SelectorColumn = ({
hydrator,
onItemsFetched,
checkedState,
onDilateItem,
onCheckedChange,
columnIndex,
columnData,
highlightedItemId,
leavesOnly,
}: Props) => {
const [items, setItems] = useState<SelectorItem[]>([]);
const [itemsAvailable, setItemsAvailable] = useState(false);
const [filterInput, setFilterInput] = useState("");
const filteredList = useMemo(
() => {
return items.filter((item) =>
item.description
.toLocaleLowerCase()
.includes(filterInput.toLocaleLowerCase()),
)},
[items, filterInput],
);
let isLoading = !itemsAvailable;
let data;
const [springs, api] = useSpring(() => {
return {
from: { left: columnIndex === 0 ? 0 : -defaultStyle.width },
config: {
duration: 200,
},
}});
useEffect(() => {
if (!isLoading && items.length) {
api.start({ to: { left: 0 } });
}
}, [isLoading, items]);
const { reduxSelector, unwrappedItems, mapper, emptyMessage } = hydrator(
columnData.item,
columnIndex,
);
const selectorResult = useAppSelector(reduxSelector ?? dummySelector) as {
isLoading: boolean;
data: any;
};
if (selectorResult && isLoading) {
isLoading = selectorResult.isLoading;
data = selectorResult.data;
}
if (unwrappedItems) {
if (unwrappedItems.length && !itemsAvailable) {
setItems(unwrappedItems);
setItemsAvailable(true);
onItemsFetched(unwrappedItems);
}
} else if (data && !itemsAvailable) {
const fetchedItems = mapper ? mapper(data) : data || []; // Fallback to empty array if data is undefined
setItems(fetchedItems);
setItemsAvailable(true);
onItemsFetched(fetchedItems);
}
const transRef = useSpringRef();
useEffect(() => {
if (!isLoading) {
transRef.start();
}
}, [isLoading]);
const renderSelectorItem = (props: ListChildComponentProps) => {
const { index, style } = props;
const selectorItem = filteredList[index];
// Safer to use item ID rather than index here?
// I mean, the index is as unique as the ID, so perhaps it doesn't matter
const handleCheckboxChange = () => {
onCheckedChange(columnIndex, selectorItem);
};
return (
<div
key={selectorItem.id}
css={[
tw`flex h-10 justify-between items-center px-4 border-b border-component-dark-1 w-full gap-1`,
highlightedItemId === selectorItem.id && tw`bg-ctrl-bg`,
]}
style={style}
>
<div tw="flex gap-8 w-full overflow-hidden">
<Checkbox
label={selectorItem.description}
checked={!!checkedState?.get(selectorItem.id)}
indeterminate={checkedState?.get(selectorItem.id) === CheckedState.Indeterminate}
onChange={handleCheckboxChange}
disabled={leavesOnly && !!selectorItem.childIds}
/>
</div>
<div>
{selectorItem.childIds?.length && (
<FontAwesomeIcon
icon={faAngleRight}
tw="text-black text-sm cursor-pointer"
onClick={() => onDilateItem(selectorItem)}
/>
)}
</div>
</div>
);
};
const handleFilterChange = (event: ChangeEvent<HTMLInputElement>) => {
setFilterInput(event.target.value || ""); // Fallback to empty string if undefined or null
};
const handleFilterClearClicked = () => {
setFilterInput("");
};
return (
<div tw="relative overflow-hidden h-[400px] w-[224px] border-r border-component-dark-3">
{isLoading ? (
<div tw="flex items-center justify-center h-full w-full">
<Spinner />
</div>
) : items.length ? (
<div tw="flex flex-col w-full h-full">
<div tw="grow">
<animated.div
tw="absolute top-0 left-0"
css={[tw`absolute h-full shadow-selector`]}
id="test"
style={springs}
>
<FixedSizeList
height={355}
width={defaultStyle.width}
itemSize={46}
itemCount={filteredList.length}
overscanCount={3}
>
{/*
// @ts-ignore */}
{renderSelectorItem}
</FixedSizeList>
</animated.div>
</div>
<SelectorFilterInput
value={filterInput}
onChange={handleFilterChange}
onClearClicked={handleFilterClearClicked}
/>
</div>
) : (
<div tw="flex items-center justify-center h-full w-full">
<Text variant="noResult" tw="w-7/12 text-center">
{emptyMessage}
</Text>
</div>
)}
</div>
);
};
