cleanup

voxel51 · Apr 26, 2023 · 4b20a9e · 4b20a9e
1 parent 824cb69
commit 4b20a9e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 61 deletions.
diff --git a/...ackages/core/src/components/Modal/Group/DynamicGroup/NestedGroup/GroupElementsLinkBar.tsx b/...ackages/core/src/components/Modal/Group/DynamicGroup/NestedGroup/GroupElementsLinkBar.tsx
@@ -17,6 +17,7 @@ const BarContainer = styled.div`
   margin: 0.5em;
   display: flex;
   align-items: center;
+  justify-content: center;
 
   & input::before {
     content: none;
@@ -63,7 +64,9 @@ export const GroupElementsLinkBar = React.memo(() => {
   const [dynamicGroupCurrentElementIndex, setDynamicGroupCurrentElementIndex] =
     useRecoilState(fos.dynamicGroupCurrentElementIndex(atomFamilyKey));
 
-  const elementsCount = 100; //useRecoilValue( fos.dynamicGroupsElementCount({ groupByValue: groupByFieldValue! }));
+  const elementsCount = useRecoilValue(
+    fos.dynamicGroupsElementCount({ groupByValue: groupByFieldValue! })
+  );
 
   const [isTextBoxEmpty, setIsTextBoxEmpty] = useState(false);
 
@@ -74,6 +77,7 @@ export const GroupElementsLinkBar = React.memo(() => {
       if (nextSample) {
         setSample(nextSample);
       } else {
+        // todo: load
         // loadNext(1);
         throw new Error("Not implemented");
       }
@@ -123,23 +127,13 @@ export const GroupElementsLinkBar = React.memo(() => {
     ]
   );
 
-  // const samples = useMemo(() => {
-  //   if (!data) {
-  //     return [];
-  //   }
-
-  //   const hasNext_ = hasNext;
-  //   const groupByFieldValue_ = groupByFieldValue;
-
-  //   debugger;
-  //   return [];
-  // }, [data, hasNext, groupByFieldValue]);
-
   return (
     <BarContainer>
       {/* note: pagination renders in contracted form when >= 10 elements */}
       <Pagination
         count={elementsCount}
+        siblingCount={2}
+        boundaryCount={2}
         page={dynamicGroupCurrentElementIndex}
         onChange={onPageChange as PaginationProps["onChange"]}
         shape="rounded"

diff --git a/app/packages/core/src/components/Modal/Group/DynamicGroup/NestedGroup/index.tsx b/app/packages/core/src/components/Modal/Group/DynamicGroup/NestedGroup/index.tsx
@@ -1,26 +1,15 @@
 import React from "react";
+import { GroupSuspense } from "../../GroupSuspense";
 import { GroupView } from "../../GroupView";
 import { GroupElementsLinkBar } from "./GroupElementsLinkBar";
 
 export const NestedGroup = () => {
-  // const { groupByFieldValue } = useGroupContext();
-
-  // const { data: sampleIdList, hasNext, loadNext } = usePaginationFragment(
-  //   foq.paginateDynamicGroupSampleIdsFragment,
-  //   useRecoilValue(
-  //     fos.dynamicGroupPaginationFragment({
-  //       fieldOrExpression: groupByFieldValue!,
-  //       fetchIdsOnly: true,
-  //     })
-  //   )
-  // );
-
-  // const prefetchSamples = useRecoilCallback(
-  //   ({ snapshot }) => async () => {
-  //     // const;
-  //   },
-  //   []
-  // );
-
-  return <GroupView subBar={<GroupElementsLinkBar />} />;
+  return (
+    <GroupSuspense>
+      <GroupSuspense>
+        <GroupView />
+      </GroupSuspense>
+      <GroupElementsLinkBar />
+    </GroupSuspense>
+  );
 };
diff --git a/.../core/src/components/Modal/Group/DynamicGroup/carousel/DynamicGroupsFlashlightWrapper.tsx b/.../core/src/components/Modal/Group/DynamicGroup/carousel/DynamicGroupsFlashlightWrapper.tsx
@@ -167,9 +167,7 @@ export const DynamicGroupsFlashlightWrapper = () => {
         const nextSample = store.samples.get(nextSampleId);
         nextSample && setSample(nextSample);
 
-        console.log("current sample inde is ", currentSampleIndex);
-
-        // todo: temp ideation
+        // todo: very unstable, just ideating auto scroll based on quickstart groups params
         if (flashlightRef.current) {
           const newLeft = isPrevious
             ? flashlightRef.current?.element.scrollLeft - 325 * 3
@@ -193,8 +191,8 @@ export const DynamicGroupsFlashlightWrapper = () => {
       elementId: DYNAMIC_GROUPS_FLASHLIGHT_ELEMENT_ID,
       enableKeyNavigation: {
         navigationCallback,
-        previousKey: "[",
-        nextKey: "]",
+        previousKey: "<",
+        nextKey: ">",
       },
       initialRequestKey: 0,
       onItemClick: (next, id, items) => {
@@ -290,25 +288,6 @@ export const DynamicGroupsFlashlightWrapper = () => {
     useRecoilValue(fos.selectedSamples),
   ]);
 
-  // const groupNavigationHandler = useCallback((e: KeyboardEvent) => {
-  //   const active = document.activeElement;
-  //   if (active?.tagName === "INPUT") {
-  //     if ((active as HTMLInputElement).type === "text") {
-  //       return;
-  //     }
-  //   }
-
-  //   if (e.key === "[") {
-  //     console.log("next");
-  //     // loadNext();
-  //   } else if (e.key === "]") {
-  //     //
-  //     console.log("previous");
-  //   }
-  // }, []);
-
-  // useEventHandler(document, "keydown", groupNavigationHandler);
-
   return (
     <div
       style={{

diff --git a/app/packages/flashlight/src/index.ts b/app/packages/flashlight/src/index.ts
@@ -70,8 +70,6 @@ export default class Flashlight<K> {
 
     document.addEventListener("visibilitychange", () => this.render());
 
-    console.log("in constructor");
-
     if (config.enableKeyNavigation) {
       const keyDownEventListener = (e) => {
         if (!this.isAttached()) {

diff --git a/app/packages/state/src/recoil/groups.ts b/app/packages/state/src/recoil/groups.ts
@@ -24,9 +24,9 @@ import {
   pinned3DSample,
 } from "./atoms";
 import { RelayEnvironmentKey } from "./relay";
+import { fieldSchema } from "./schema";
 import { datasetName } from "./selectors";
 import { dynamicGroupViewQuery, view } from "./view";
-import { fieldSchema } from "./schema";
 
 export type SliceName = string | undefined | null;
 
@@ -214,14 +214,17 @@ export const dynamicGroupCandidateFields = selector<string[]>({
   key: "dynamicGroupFields",
   get: ({ get }) => {
     const fieldSchemaValue = get(fieldSchema({ space: null }));
+
     return Object.entries(fieldSchemaValue)
       .filter(
         ([_, { name, ftype }]) =>
           name !== "filepath" &&
           name !== "id" &&
           (ftype === "fiftyone.core.fields.IntField" ||
             ftype === "fiftyone.core.fields.FloatField" ||
-            ftype === "fiftyone.core.fields.StringField")
+            ftype === "fiftyone.core.fields.StringField" ||
+            ftype === "fiftyone.core.fields.FrameNumberField" ||
+            ftype === "fiftyone.core.fields.ObjectIdField")
       )
       .map(([_, { name }]) => name);
   },
@@ -321,6 +324,7 @@ export const dynamicGroupSamplesStoreMap = atomFamily<
   string
 >({
   key: "dynamicGroupSamplesStoreMap",
+  // todo: use map with LRU cache
   default: new Map<number, SampleData>(),
 });