remove next index ref, fix string filter is matching default (#3249)

voxel51 · Jul 4, 2023 · d918c6a · d918c6a
1 parent 9ea35d8
commit d918c6a
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 89 deletions.
diff --git a/app/packages/core/src/components/Grid/Grid.tsx b/app/packages/core/src/components/Grid/Grid.tsx
@@ -23,7 +23,7 @@ const Grid: React.FC<{}> = () => {
   const createLooker = fos.useCreateLooker(false, true, lookerOptions);
 
   const selected = useRecoilValue(fos.selectedSamples);
-  const [next, pager] = usePage(false, store);
+  const pager = usePage(false, store);
 
   const threshold = useRecoilValue(rowAspectRatioThreshold);
   const resize = useResize();
@@ -90,7 +90,6 @@ const Grid: React.FC<{}> = () => {
         return;
       }
 
-      next.current = 0;
       flashlight.reset();
       store.reset();
       freeVideos();

diff --git a/app/packages/core/src/components/Grid/usePage.ts b/app/packages/core/src/components/Grid/usePage.ts
@@ -1,75 +1,69 @@
 import { Get } from "@fiftyone/flashlight/src/state";
 import { zoomAspectRatio } from "@fiftyone/looker";
-import { Lookers, LookerStore, SampleData } from "@fiftyone/state";
+import { Lookers, LookerStore, ModalSampleData } from "@fiftyone/state";
 import { getFetchFunction } from "@fiftyone/utilities";
-import { MutableRefObject, useRef } from "react";
 import { useErrorHandler } from "react-error-boundary";
 import { useRecoilCallback } from "recoil";
 import { pageParameters } from "./recoil";
 
-const usePage = (
-  modal: boolean,
-  store: LookerStore<Lookers>
-): [MutableRefObject<number>, Get<number>] => {
-  const handleError = useErrorHandler();
-  const next = useRef(0);
-  return [
-    next,
-    useRecoilCallback(
-      ({ snapshot }) =>
-        async (page: number) => {
-          try {
-            const { zoom, ...params } = await snapshot.getPromise(
-              pageParameters(modal)
-            );
-            const { results, more } = await getFetchFunction()(
-              "POST",
-              "/samples",
-              {
-                ...params,
-                page,
-              }
-            );
-
-            const itemData: SampleData[] = results.map((result) => {
-              const data: SampleData = {
-                sample: result.sample,
-                aspectRatio: result.aspect_ratio,
-                frameRate: result.frame_rate,
-                frameNumber: result.sample.frame_number,
-                urls: Object.fromEntries(
-                  result.urls.map(({ field, url }) => [field, url])
-                ),
-              };
+const PAGE_SIZE = 20;
 
-              store.samples.set(result.sample._id, data);
-              store.indices.set(next.current, result.sample._id);
-              next.current++;
+const usePage = (modal: boolean, store: LookerStore<Lookers>): Get<number> => {
+  const handleError = useErrorHandler();
+  return useRecoilCallback(
+    ({ snapshot }) =>
+      async (page: number) => {
+        try {
+          const { zoom, ...params } = await snapshot.getPromise(
+            pageParameters(modal)
+          );
+          const { results, more } = await getFetchFunction()(
+            "POST",
+            "/samples",
+            {
+              ...params,
+              page,
+              page_length: PAGE_SIZE,
+            }
+          );
+          const offset = (page - 1) * PAGE_SIZE;
+          const itemData: ModalSampleData[] = results.map((result, i) => {
+            const data = {
+              sample: result.sample,
+              aspectRatio: result.aspect_ratio,
+              frameRate: result.frame_rate,
+              frameNumber: result.sample.frame_number,
+              urls: Object.fromEntries(
+                result.urls.map(({ field, url }) => [field, url])
+              ),
+            };
 
-              return data;
-            });
+            store.samples.set(result.sample._id, data);
+            store.indices.set(offset + i, result.sample._id);
 
-            const items = itemData.map(({ sample, aspectRatio }) => {
-              return {
-                id: sample._id,
-                aspectRatio: zoom
-                  ? zoomAspectRatio(sample, aspectRatio)
-                  : aspectRatio,
-              };
-            });
+            return data;
+          });
 
+          const items = itemData.map(({ sample, aspectRatio }) => {
             return {
-              items,
-              nextRequestKey: more ? page + 1 : null,
+              id: sample._id,
+              aspectRatio: zoom
+                ? zoomAspectRatio(sample, aspectRatio)
+                : aspectRatio,
             };
-          } catch (error) {
-            handleError(error);
-            throw error;
-          }
-        },
-      [modal]
-    ),
-  ];
+          });
+
+          return {
+            items,
+            nextRequestKey: more ? page + 1 : null,
+          };
+        } catch (error) {
+          handleError(error);
+          throw error;
+        }
+      },
+    [modal]
+  );
 };
 
 export default usePage;
diff --git a/app/packages/state/src/recoil/pathFilters/string.ts b/app/packages/state/src/recoil/pathFilters/string.ts
@@ -22,7 +22,7 @@ const getFilter = (
   return {
     values: [],
     exclude: false,
-    isMatching: false,
+    isMatching: true,
     onlyMatch: true,
     _CLS: "str",
     ...get(filterAtoms.filter({ modal, path })),
@@ -155,31 +155,31 @@ export const string = selectorFamily<
 });
 
 export const listString = selectorFamily<
-(value: string | null) => boolean,
-{ modal: boolean; path: string }
+  (value: string | null) => boolean,
+  { modal: boolean; path: string }
 >({
-key: "stringFilterForListField",
-get:
-  (params) =>
-  ({ get }) => {
-    if (!get(filterAtoms.filter(params))) {
-      return (value) => true;
-    }
-    const isMatching = get(isMatchingAtom(params));
-    if (isMatching) {
-      return (value) => true;
-    }
-
-    const exclude = get(stringExcludeAtom(params));
-    const values = get(stringSelectedValuesAtom({ ...params }));
-    const none = values.includes(null);
-
-    return (value) => {
-      const c1 = values.every(v => value?.includes(v));
-      const c2 = (none && NONE.has(value));
-      const c3 = value;
-      const r = (c1 || c2) && c3;
-      return exclude ? !r : r;
-    };
-  },
-});
+  key: "stringFilterForListField",
+  get:
+    (params) =>
+    ({ get }) => {
+      if (!get(filterAtoms.filter(params))) {
+        return (value) => true;
+      }
+      const isMatching = get(isMatchingAtom(params));
+      if (isMatching) {
+        return (value) => true;
+      }
+
+      const exclude = get(stringExcludeAtom(params));
+      const values = get(stringSelectedValuesAtom({ ...params }));
+      const none = values.includes(null);
+
+      return (value) => {
+        const c1 = values.every((v) => value?.includes(v));
+        const c2 = none && NONE.has(value);
+        const c3 = value;
+        const r = (c1 || c2) && c3;
+        return exclude ? !r : r;
+      };
+    },
+});