Fix dynamic groups carousel bug

app/packages/core/src/components/Modal/Group/DynamicGroup/carousel/DynamicGroupCarousel.tsx

@@ -2,13 +2,13 @@ import { useTheme } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
 import { useBrowserStorage } from "@fiftyone/state";
 import { Resizable } from "re-resizable";
-import React from "react";
-import { useRecoilValue } from "recoil";
+import React, { useEffect, useState } from "react";
+import { useRecoilCallback, useRecoilValue } from "recoil";
 import { DynamicGroupsFlashlightWrapper } from "./DynamicGroupsFlashlightWrapper";
 
 const MAX_CAROUSEL_HEIGHT = 600;
 
-export const DynamicGroupCarousel = () => {
+export const DynamicGroupCarousel = React.memo(() => {
   const [height, setHeight] = useBrowserStorage(
     "dynamic-group-carousel-height",
     150
@@ -17,6 +17,36 @@ export const DynamicGroupCarousel = () => {
   const theme = useTheme();
   const isMainVisible = useRecoilValue(fos.groupMediaIsMainVisibleSetting);
 
+  /**
+   * BIG HACK: TODO: FIX ME
+   *
+   * Problem = flashlight is not re-rendering when group by field changes.
+   * Solution was to key it by groupByValue, but when the component
+   * subscribes to the groupByFieldValue using useRecoilValue(fos.groupByFieldValue),
+   * while it solves the problem, it causes flashlight to behave weirdly.
+   * (try scrolling carousel and selecting samples, flashlight will reset to the front)
+   *
+   */
+  const getGroupByFieldValue = useRecoilCallback(({ snapshot }) => () => {
+    const groupByField = snapshot.getLoadable(fos.groupByFieldValue).getValue();
+    return groupByField;
+  });
+
+  const [groupByValue, setGroupByValue] = useState(getGroupByFieldValue());
+  const groupByValueRef = React.useRef(groupByValue);
+  groupByValueRef.current = groupByValue;
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      const groupByFieldValue = getGroupByFieldValue();
+      if (groupByFieldValue !== groupByValueRef.current) {
+        setGroupByValue(groupByFieldValue);
+      }
+    }, 50);
+
+    return () => window.clearInterval(intervalId);
+  }, []);
+
   return (
     <Resizable
       size={{ height, width: "100%" }}
@@ -41,7 +71,7 @@ export const DynamicGroupCarousel = () => {
       }}
       data-cy={"group-carousel"}
     >
-      <DynamicGroupsFlashlightWrapper />
+      <DynamicGroupsFlashlightWrapper key={groupByValue} />
     </Resizable>
   );
-};
+});

app/packages/core/src/components/Modal/Group/DynamicGroup/carousel/DynamicGroupsFlashlightWrapper.tsx

@@ -3,7 +3,7 @@ import { Sample, freeVideos } from "@fiftyone/looker";
 import * as fos from "@fiftyone/state";
 import { selectedSamples } from "@fiftyone/state";
 import { get } from "lodash";
-import {
+import React, {
   useCallback,
   useEffect,
   useId,
@@ -46,7 +46,7 @@ const pageParams = selector({
   },
 });
 
-export const DynamicGroupsFlashlightWrapper = () => {
+export const DynamicGroupsFlashlightWrapper = React.memo(() => {
   const id = useId();
 
   const store = fos.useLookerStore();
@@ -175,4 +175,4 @@ export const DynamicGroupsFlashlightWrapper = () => {
       id={id}
     ></div>
   );
-};
+});