Merge pull request #3954 from voxel51/main-merge

Merging main into develop

app/packages/core/src/components/Actions/GroupMediaVisibilityContainer.tsx

@@ -38,8 +38,17 @@ const GroupMediaVisibilityPopout = ({
   const [isMainVisible, setIsMainVisible] = useRecoilState(
     fos.groupMediaIsMainVisibleSetting
   );
+  const isNestedDynamicGroup = useRecoilValue(fos.isNestedDynamicGroup);
+  const shouldRenderImaVid = useRecoilValue(fos.shouldRenderImaVidLooker);
+  const dynamicGroupsViewMode = useRecoilValue(fos.dynamicGroupsViewMode);
+  const hasGroupSlices = useRecoilValue(fos.hasGroupSlices);
+
   const isSequentialAccessAllowed =
-    useRecoilValue(fos.nonNestedDynamicGroupsViewMode) === "carousel";
+    isNestedDynamicGroup ||
+    dynamicGroupsViewMode === "carousel" ||
+    hasGroupSlices;
+
+  const isImavidInNestedGroup = isNestedDynamicGroup && shouldRenderImaVid;
 
   const checkboxes = useMemo(() => {
     const toReturn: React.ReactNode[] = [];
@@ -50,7 +59,9 @@ const GroupMediaVisibilityPopout = ({
           key="checkbox-3d-viewer"
           name={"3D Viewer"}
           value={isSlotVisible}
-          muted={!isMainVisible && !isCarouselVisible}
+          muted={
+            isImavidInNestedGroup || (!isMainVisible && !isCarouselVisible)
+          }
           setValue={(value) => setIsSlotVisible(value)}
         />
       );
@@ -62,7 +73,10 @@ const GroupMediaVisibilityPopout = ({
           key="checkbox-carousel"
           name={"Carousel"}
           value={isCarouselVisible}
-          muted={!(isSlotVisible && pointCloudSliceExists) && !isMainVisible}
+          muted={
+            isImavidInNestedGroup ||
+            (!(isSlotVisible && pointCloudSliceExists) && !isMainVisible)
+          }
           setValue={(value) => setIsCarouselVisible(value)}
         />
       );
@@ -74,6 +88,7 @@ const GroupMediaVisibilityPopout = ({
         name={"Viewer"}
         value={isMainVisible}
         muted={
+          isImavidInNestedGroup ||
           toReturn.length === 0 ||
           (!(isSlotVisible && pointCloudSliceExists) && !isCarouselVisible)
         }

app/packages/core/src/components/Actions/Options.tsx

@@ -82,7 +82,7 @@ const MediaFields = ({ modal }) => {
   );
   const mediaFields = useRecoilValue(fos.mediaFields);
 
-  if (mediaFields.length <= 1) return null;
+  if (!mediaFields || mediaFields?.length <= 1) return null;
 
   return (
     <>
@@ -148,40 +148,56 @@ const SidebarMode = () => {
 };
 
 const DynamicGroupsViewMode = ({ modal }: { modal: boolean }) => {
-  const [mode, setMode] = useRecoilState(fos.nonNestedDynamicGroupsViewMode);
-  const isImaVidLookerAvailable = useRecoilValue(fos.isImaVidLookerAvailable);
+  const isOrderedDynamicGroup = useRecoilValue(fos.isOrderedDynamicGroup);
+  const hasGroupSlices = useRecoilValue(fos.hasGroupSlices);
+
+  const [mode, setMode] = useRecoilState(fos.dynamicGroupsViewMode);
+  const setIsCarouselVisible = useSetRecoilState(
+    fos.groupMediaIsCarouselVisibleSetting
+  );
+  const setIsMainVisible = useSetRecoilState(
+    fos.groupMediaIsMainVisibleSetting
+  );
 
   const tabOptions = useMemo(() => {
     const options = [
-      {
-        text: "carousel",
-        title: "Sequential Access",
-        onClick: () => setMode("carousel"),
-      },
       {
         text: "pagination",
         title: "Random Access",
         onClick: () => setMode("pagination"),
       },
     ];
 
-    if (isImaVidLookerAvailable) {
+    if (!hasGroupSlices) {
+      options.push({
+        text: "carousel",
+        title: "Sequential Access",
+        onClick: () => {
+          setMode("carousel");
+          setIsCarouselVisible(true);
+        },
+      });
+    }
+
+    if (isOrderedDynamicGroup) {
       options.push({
         text: "video",
         title: "Video",
-        onClick: () => setMode("video"),
+        onClick: () => {
+          setMode("video");
+          setIsMainVisible(true);
+        },
       });
     }
 
     return options;
-  }, [isImaVidLookerAvailable]);
+  }, [isOrderedDynamicGroup, hasGroupSlices]);
 
   return (
     <>
       <PopoutSectionTitle>Dynamic Groups Navigation</PopoutSectionTitle>
-      {modal ? (
-        <TabOption active={mode} options={tabOptions} />
-      ) : (
+      {modal && <TabOption active={mode} options={tabOptions} />}
+      {isOrderedDynamicGroup && !modal && (
         <Checkbox
           name={"Render frames as video"}
           value={mode === "video"}
@@ -307,13 +323,12 @@ type OptionsProps = {
 const Options = ({ modal, anchorRef }: OptionsProps) => {
   const isGroup = useRecoilValue(fos.isGroup);
   const isDynamicGroup = useRecoilValue(fos.isDynamicGroup);
-  const isNonNestedDynamicGroup = useRecoilValue(fos.isNonNestedDynamicGroup);
   const view = useRecoilValue(fos.view);
 
   return (
     <Popout modal={modal} fixed anchorRef={anchorRef}>
       {modal && <HideFieldSetting />}
-      {isNonNestedDynamicGroup && <DynamicGroupsViewMode modal={modal} />}
+      {isDynamicGroup && <DynamicGroupsViewMode modal={modal} />}
       {isGroup && !isDynamicGroup && <GroupStatistics modal={modal} />}
       <MediaFields modal={modal} />
       <Patches modal={modal} />

app/packages/core/src/components/Actions/Tagger.tsx

@@ -3,7 +3,12 @@ import {
   PopoutSectionTitle,
   useTheme,
 } from "@fiftyone/components";
-import { FrameLooker, ImageLooker, VideoLooker } from "@fiftyone/looker";
+import {
+  FrameLooker,
+  ImaVidLooker,
+  ImageLooker,
+  VideoLooker,
+} from "@fiftyone/looker";
 import * as fos from "@fiftyone/state";
 import { Lookers, groupId, groupStatistics, refresher } from "@fiftyone/state";
 import { getFetchFunction } from "@fiftyone/utilities";
@@ -320,13 +325,21 @@ const useTagCallback = (
     ...[
       useRecoilRefresher_UNSTABLE(tagStatistics({ modal, labels: false })),
       useRecoilRefresher_UNSTABLE(tagStatistics({ modal, labels: true })),
+      useRecoilRefresher_UNSTABLE(fos.activeModalSidebarSample),
     ],
   ];
 
   return useRecoilCallback(
     ({ snapshot, set, reset }) =>
       async ({ changes }) => {
         const isGroup = await snapshot.getPromise(fos.isGroup);
+        const isNonNestedDynamicGroup = await snapshot.getPromise(
+          fos.isNonNestedDynamicGroup
+        );
+        const isImaVidLookerActive = await snapshot.getPromise(
+          fos.isOrderedDynamicGroup
+        );
+
         const slices = await snapshot.getPromise(fos.currentSlices(modal));
         const { samples } = await getFetchFunction()("POST", "/tag", {
           ...tagParameters({
@@ -338,14 +351,15 @@ const useTagCallback = (
               modal ? fos.modalFilters : fos.filters
             ),
             hiddenLabels: await snapshot.getPromise(fos.hiddenLabelsArray),
-            groupData: isGroup
-              ? {
-                  id: modal ? await snapshot.getPromise(groupId) : null,
-                  slices,
-                  slice: await snapshot.getPromise(fos.groupSlice),
-                  mode: await snapshot.getPromise(groupStatistics(modal)),
-                }
-              : null,
+            groupData:
+              isGroup && !isNonNestedDynamicGroup
+                ? {
+                    id: modal ? await snapshot.getPromise(groupId) : null,
+                    slices,
+                    slice: await snapshot.getPromise(fos.groupSlice),
+                    mode: await snapshot.getPromise(groupStatistics(modal)),
+                  }
+                : null,
             modal,
             sampleId: modal
               ? await snapshot.getPromise(fos.sidebarSampleId)
@@ -373,6 +387,18 @@ const useTagCallback = (
         } else if (samples) {
           set(fos.refreshGroupQuery, (cur) => cur + 1);
           updateSamples(samples.map((sample) => [sample._id, sample]));
+
+          if (isImaVidLookerActive) {
+            // assuming we're working with only one sample
+            (
+              lookerRef?.current as unknown as ImaVidLooker
+            )?.frameStoreController.store?.updateSample(
+              samples[0]._id,
+              samples[0]
+            );
+
+            lookerRef?.current?.updateSample(samples[0]);
+          }
         }
 
         set(fos.anyTagging, false);

app/packages/core/src/components/Actions/similar/utils.ts

@@ -72,6 +72,7 @@ export const useSortBySimilarity = (close) => {
 
         const view = await snapshot.getPromise(fos.view);
         const subscription = await snapshot.getPromise(fos.stateSubscription);
+        const slice = await snapshot.getPromise(fos.sessionGroupSlice);
 
         const { query, ...commonParams } = parameters;
 
@@ -95,6 +96,7 @@ export const useSortBySimilarity = (close) => {
           subscription,
           filters,
           extended: toSnakeCase(combinedParameters),
+          slice,
         });
         set(fos.similarityParameters, combinedParameters);
         close();

app/packages/core/src/components/Modal/Group/DynamicGroup/NestedGroup/index.tsx

@@ -1,23 +1,33 @@
 import * as foq from "@fiftyone/relay";
+import * as fos from "@fiftyone/state";
 import React, { Suspense } from "react";
 import { PreloadedQuery } from "react-relay";
+import { useRecoilValue } from "recoil";
 import { GroupSuspense } from "../../GroupSuspense";
 import { GroupView } from "../../GroupView";
 import { GroupElementsLinkBar } from "../pagination";
 
 export const NestedGroup = ({
   queryRef,
 }: {
-  queryRef: PreloadedQuery<foq.paginateSamplesQuery>;
+  queryRef?: PreloadedQuery<foq.paginateSamplesQuery> | null;
 }) => {
+  const shouldRenderImaVid = useRecoilValue(fos.shouldRenderImaVidLooker);
+
+  if (!queryRef && !shouldRenderImaVid) {
+    throw new Error("no queryRef provided");
+  }
+
   return (
     <>
       <GroupSuspense>
         <GroupView />
       </GroupSuspense>
-      <Suspense>
-        <GroupElementsLinkBar queryRef={queryRef} />
-      </Suspense>
+      {!shouldRenderImaVid && queryRef && (
+        <Suspense>
+          <GroupElementsLinkBar queryRef={queryRef} />
+        </Suspense>
+      )}
     </>
   );
 };

app/packages/core/src/components/Modal/Group/DynamicGroup/NonNestedGroup/index.tsx

@@ -29,7 +29,7 @@ const ElementsContainer = styled.div`
 export const NonNestedDynamicGroup = ({
   queryRef,
 }: {
-  queryRef: PreloadedQuery<foq.paginateSamplesQuery>;
+  queryRef: PreloadedQuery<foq.paginateSamplesQuery> | null;
 }) => {
   const { lookerRefCallback } = useGroupContext();
   const lookerRef = useRef<fos.Lookers>();
@@ -38,7 +38,7 @@ export const NonNestedDynamicGroup = ({
   const [isBigLookerVisible, setIsBigLookerVisible] = useRecoilState(
     fos.groupMediaIsMainVisibleSetting
   );
-  const viewMode = useRecoilValue(fos.nonNestedDynamicGroupsViewMode);
+  const viewMode = useRecoilValue(fos.dynamicGroupsViewMode);
   const isCarouselVisible = useRecoilValue(
     fos.groupMediaIsCarouselVisibleSetting
   );
@@ -54,6 +54,10 @@ export const NonNestedDynamicGroup = ({
     return null;
   }
 
+  if (viewMode !== "video" && !queryRef) {
+    throw new Error("no queryRef provided");
+  }
+
   return (
     <RootContainer>
       {/* weird conditional rendering of the bar because lookerControls messes up positioning of the bar in firefox in inexplicable ways */}
@@ -81,7 +85,7 @@ export const NonNestedDynamicGroup = ({
             </GroupSuspense>
           )}
         </>
-        {viewMode === "pagination" && (
+        {viewMode === "pagination" && queryRef && (
           <GroupElementsLinkBar queryRef={queryRef} />
         )}
       </ElementsContainer>