From d918c6a0e99925087bf909bfbf225dbf579efce7 Mon Sep 17 00:00:00 2001 From: Benjamin Kane Date: Mon, 3 Jul 2023 19:26:35 -0600 Subject: [PATCH] remove next index ref, fix string filter is matching default (#3249) --- .../core/src/components/Grid/Grid.tsx | 3 +- .../core/src/components/Grid/usePage.ts | 112 +++++++++--------- .../state/src/recoil/pathFilters/string.ts | 56 ++++----- 3 files changed, 82 insertions(+), 89 deletions(-) diff --git a/app/packages/core/src/components/Grid/Grid.tsx b/app/packages/core/src/components/Grid/Grid.tsx index 81ffa79d5c..df44453700 100644 --- 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 index f607f73758..239885f317 100644 --- 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 -): [MutableRefObject, Get] => { - 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): Get => { + 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 index 988693900e..62dd7b450d 100644 --- 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; - }; - }, -}); \ No newline at end of file + 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; + }; + }, +});