From ea71a7c5773da2fee7cdee3b2a2bb7c8fddcc305 Mon Sep 17 00:00:00 2001
From: Benjamin Kane <ben@voxel51.com>
Date: Tue, 11 Jun 2024 14:02:57 -0400
Subject: [PATCH 1/2] add slice test for dynamic groups paging

---
 .../state/src/recoil/dynamicGroups.test.ts    | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/packages/state/src/recoil/dynamicGroups.test.ts b/app/packages/state/src/recoil/dynamicGroups.test.ts
index f27c0c68b9..5fb95240fa 100644
--- a/app/packages/state/src/recoil/dynamicGroups.test.ts
+++ b/app/packages/state/src/recoil/dynamicGroups.test.ts
@@ -2,10 +2,14 @@ import { describe, expect, it, vi } from "vitest";
 vi.mock("recoil");
 vi.mock("recoil-relay");
 
-import { setMockAtoms, TestSelector } from "../../../../__mocks__/recoil";
+import {
+  setMockAtoms,
+  TestSelector,
+  TestSelectorFamily,
+} from "../../../../__mocks__/recoil";
 import * as dynamicGroups from "./dynamicGroups";
 
-describe("handles non-nested dynamic groups", () => {
+describe("handles dynamic groups", () => {
   const testNesting = <
     TestSelector<typeof dynamicGroups.isNonNestedDynamicGroup>
   >(<unknown>dynamicGroups.isNonNestedDynamicGroup);
@@ -25,4 +29,31 @@ describe("handles non-nested dynamic groups", () => {
     });
     expect(testNesting()).toBe(false);
   });
+
+  const modalPageSelector = <
+    TestSelectorFamily<typeof dynamicGroups.dynamicGroupPageSelector>
+  >(<unknown>(
+    dynamicGroups.dynamicGroupPageSelector({ value: "test", modal: true })
+  ));
+  const pageSelector = <
+    TestSelectorFamily<typeof dynamicGroups.dynamicGroupPageSelector>
+  >(<unknown>(
+    dynamicGroups.dynamicGroupPageSelector({ value: "test", modal: false })
+  ));
+
+  it("uses correct slice", () => {
+    setMockAtoms({
+      datasetName: "dataset",
+      dynamicGroupViewQuery: () => [],
+      groupSlice: "main",
+      modalGroupSlice: "modal",
+    });
+
+    expect(pageSelector()(0, 1).filter).toStrictEqual({
+      group: { slice: "main" },
+    });
+    expect(modalPageSelector()(0, 1).filter).toStrictEqual({
+      group: { slice: "modal" },
+    });
+  });
 });

From 60f86d6f7d749eb0a287f496a66edee413edcc98 Mon Sep 17 00:00:00 2001
From: Benjamin Kane <ben@voxel51.com>
Date: Tue, 11 Jun 2024 14:03:11 -0400
Subject: [PATCH 2/2] add slice to imavid paging

---
 app/packages/state/src/hooks/useCreateLooker.ts |  8 +++++---
 app/packages/state/src/recoil/dynamicGroups.ts  | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/packages/state/src/hooks/useCreateLooker.ts b/app/packages/state/src/hooks/useCreateLooker.ts
index ecd1974a1b..9d135dc6b8 100644
--- a/app/packages/state/src/hooks/useCreateLooker.ts
+++ b/app/packages/state/src/hooks/useCreateLooker.ts
@@ -188,9 +188,10 @@ export default <T extends AbstractLooker<BaseState>>(
           );
           const page = snapshot
             .getLoadable(
-              dynamicGroupAtoms.dynamicGroupPageSelector(
-                groupByFieldValueTransformed
-              )
+              dynamicGroupAtoms.dynamicGroupPageSelector({
+                value: groupByFieldValueTransformed,
+                modal: isModal,
+              })
             )
             .valueMaybe();
 
@@ -257,6 +258,7 @@ export default <T extends AbstractLooker<BaseState>>(
       highlight,
       isClip,
       isFrame,
+      isModal,
       shouldRenderImaVidLooker,
       isPatch,
       mediaField,
diff --git a/app/packages/state/src/recoil/dynamicGroups.ts b/app/packages/state/src/recoil/dynamicGroups.ts
index 509d179d54..fcb5e5c37d 100644
--- a/app/packages/state/src/recoil/dynamicGroups.ts
+++ b/app/packages/state/src/recoil/dynamicGroups.ts
@@ -6,7 +6,12 @@ import {
   LIST_FIELD,
 } from "@fiftyone/utilities";
 import { atom, atomFamily, selector, selectorFamily } from "recoil";
-import { currentSlice, hasGroupSlices } from "./groups";
+import {
+  currentSlice,
+  groupSlice,
+  hasGroupSlices,
+  modalGroupSlice,
+} from "./groups";
 import { modalLooker } from "./modal";
 import { dynamicGroupsViewMode } from "./options";
 import { fieldPaths } from "./schema";
@@ -70,25 +75,25 @@ export const dynamicGroupPageSelector = selectorFamily<
     after: string | null;
     count: number;
     dataset: string;
-    filter: Record<string, never>;
+    filter: { group: { slice?: string } };
     view: State.Stage[];
   },
-  string
+  { modal: boolean; value: string }
 >({
   key: "paginateDynamicGroupVariables",
   get:
-    (value) =>
+    ({ modal, value }) =>
     ({ get }) => {
       const params = {
         dataset: get(datasetName),
         view: get(dynamicGroupViewQuery(value)),
+        filter: { group: { slice: get(modal ? modalGroupSlice : groupSlice) } },
       };
 
       return (cursor: number, pageSize: number) => ({
         ...params,
         after: cursor ? String(cursor) : null,
         count: pageSize,
-        filter: {},
       });
     },
 });