Merge pull request #4271 from voxel51/merge/v0.23.8_to_main

Merge/v0.23.8 to main

Author: kevin-dimichel

.github/workflows/build-desktop.yml

@@ -12,7 +12,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       fail-fast: false
       matrix:

.github/workflows/e2e.yml

@@ -12,6 +12,7 @@ jobs:
       FIFTYONE_DATABASE_NAME: playwright
       ELECTRON_EXTRA_LAUNCH_ARGS: "--disable-gpu"
       PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/ms-playwright
+      FIFTYONE_PLUGINS_DIR: ${{ github.workspace }}/e2e-pw/src/shared/assets/plugins
     defaults:
       run:
         shell: bash

app/__mocks__/recoil.ts

@@ -2,7 +2,7 @@ import * as recoil from "recoil";
 export * from "recoil";
 
 export let mockValues = {};
-export let mockValuesStore = {};
+export const mockValuesStore = {};
 export let mockDefaults = {};
 export function setMockAtoms(newMockValues: { [key: string]: any }) {
   mockValues = {
@@ -15,8 +15,8 @@ export function setMockAtoms(newMockValues: { [key: string]: any }) {
 export const getValue = (atom) => {
   if (mockValuesStore[atom.key]) {
     const str = JSON.stringify(atom.params);
-    if (mockValuesStore[atom.key].hasOwnProperty(str)) {
-      return mockValuesStore[atom.key][JSON.stringify[str]];
+    if (Object.hasOwn(mockValuesStore[atom.key], str)) {
+      return mockValuesStore[atom.key][str];
     }
   }
 

app/packages/app/src/pages/IndexPage.tsx

@@ -1,11 +1,10 @@
-import { Snackbar } from "@fiftyone/core";
+import { Snackbar, Starter } from "@fiftyone/core";
 import React from "react";
 import { usePreloadedQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 import Nav from "../components/Nav";
 import { Route } from "../routing";
 import { IndexPageQuery } from "./__generated__/IndexPageQuery.graphql";
-import { Starter } from "@fiftyone/core";
 
 const IndexPageQueryNode = graphql`
   query IndexPageQuery($search: String = "", $count: Int, $cursor: String) {
@@ -16,17 +15,15 @@ const IndexPageQueryNode = graphql`
       multicolorKeypoints
       showSkeletons
     }
-    allDatasets: datasets(search: "") {
-      total
-    }
+    allDatasets: estimatedDatasetCount
     ...NavFragment
     ...configFragment
   }
 `;
 
 const IndexPage: Route<IndexPageQuery> = ({ prepared }) => {
   const queryRef = usePreloadedQuery(IndexPageQueryNode, prepared);
-  const totalDatasets = queryRef?.allDatasets?.total;
+  const totalDatasets = queryRef.allDatasets;
 
   return (
     <>

app/packages/app/src/pages/__generated__/IndexPageQuery.graphql.ts

@@ -114,7 +114,6 @@ export default function Selection(props: SelectionProps) {
         defaultValue={selectedId}
         sx={{
           width: "100%",
-          zIndex: 999,
           background: theme.background.level3,
         }}
         renderValue={() => {

app/packages/components/src/components/Selection/Selection.tsx

@@ -210,6 +210,15 @@ let theme = extendMuiTheme({
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          "&:hover": {
+            backgroundColor: "unset",
+          },
+        },
+      },
+    },
   },
   fontFamily: {
     body: "Palanquin, sans-serif",

app/packages/components/src/components/ThemeProvider/index.tsx

@@ -368,6 +368,9 @@ const useTagCallback = (
             selectedSamples: await snapshot.getPromise(fos.selectedSamples),
             targetLabels,
             view: await snapshot.getPromise(fos.view),
+            extended: !modal
+              ? await snapshot.getPromise(fos.extendedStages)
+              : null,
           }),
           current_frame: lookerRef?.current?.frameNumber,
           changes,
@@ -418,7 +421,9 @@ const useLabelPlaceHolder = (
   return (): [number, string] => {
     const selectedSamples = useRecoilValue(fos.selectedSamples).size;
     const selectedLabels = useRecoilValue(fos.selectedLabelIds).size;
-    const selectedLabelCount = useRecoilValue(numItemsInSelection(true));
+    const selectedLabelCount = useRecoilValue(
+      numItemsInSelection({ labels: true, modal })
+    );
     const totalLabelCount = useRecoilValue(
       fos.labelCount({ modal, extended: true })
     );

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

@@ -92,17 +92,21 @@ export const tagStatistics = selectorFamily<
           selectedLabels: get(fos.selectedLabels),
           targetLabels: countLabels,
           view: get(fos.view),
+          extended: !modal ? get(fos.extendedStages) : null,
         })
       );
     },
 });
 
-export const numItemsInSelection = selectorFamily<number, boolean>({
+export const numItemsInSelection = selectorFamily<
+  number,
+  { modal: boolean; labels: boolean }
+>({
   key: "numLabelsInSelectedSamples",
   get:
-    (labels) =>
+    ({ modal = false, labels }) =>
     ({ get }) => {
-      return get(tagStatistics({ modal: false, labels })).count;
+      return get(tagStatistics({ modal, labels })).count;
     },
 });
 

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

@@ -140,6 +140,25 @@ const useValues = ({
   };
 };
 
+const useGetCount = (modal: boolean, path: string) => {
+  const isFilterMode = useRecoilValue(fos.isSidebarFilterMode);
+  const keypoints = useRecoilValue(isInKeypointsField(path));
+  const lightning = useRecoilValue(fos.isLightningPath(path));
+  return (count: number | null, value: string | null) => {
+    // show no count for the 'points' field of a Keypoint, and visibility mode
+    if (!isFilterMode || keypoints) {
+      return undefined;
+    }
+
+    // request subcount for non-lightning paths
+    if (typeof count !== "number" && !lightning) {
+      return pathSearchCount({ modal, path, value: value as string });
+    }
+
+    return count ?? undefined;
+  };
+};
+
 const Checkboxes = ({
   results,
   selectedAtom,
@@ -150,7 +169,6 @@ const Checkboxes = ({
 }: CheckboxesProps) => {
   const [selected, setSelected] = useRecoilState(selectedAtom);
   const color = useRecoilValue(fos.pathColor(path));
-  const isFilterMode = useRecoilValue(fos.isSidebarFilterMode);
 
   const { loading, name, selectedSet, sorting, values } = useValues({
     modal,
@@ -160,8 +178,7 @@ const Checkboxes = ({
   });
 
   const show = useRecoilValue(showSearchSelector({ modal, path }));
-  const keypoints = useRecoilValue(isInKeypointsField(path));
-  const lightning = useRecoilValue(fos.isLightningPath(path));
+  const getCount = useGetCount(modal, path);
 
   if (loading) {
     return <LoadingDots text={"Loading"} />;
@@ -186,13 +203,7 @@ const Checkboxes = ({
             forceColor={value === null}
             name={value === null ? "None" : value}
             loading={loading}
-            count={
-              (typeof count !== "number" || !isFilterMode || keypoints) &&
-              !lightning
-                ? // only string and id fields use pathSearchCount
-                  pathSearchCount({ modal, path, value: value as string })
-                : count
-            }
+            count={getCount(count, value)}
             setValue={(checked: boolean) => {
               if (checked) {
                 selectedSet.add(value);

app/packages/core/src/components/Filters/StringFilter/Checkboxes.tsx

@@ -8,28 +8,37 @@ import { useTheme } from "styled-components";
 import AddIndex from "./AddIndex";
 
 export default ({
+  id,
   color,
+  disabled,
   expanded,
-  id,
   unindexed,
 }: {
+  id: string;
   color?: string;
-  unindexed?: boolean;
+  disabled?: boolean;
   expanded: RecoilState<boolean>;
-  id: string;
+  unindexed?: boolean;
 }) => {
   const [isExpanded, setExpanded] = useRecoilState(expanded);
   const Arrow = isExpanded ? KeyboardArrowUp : KeyboardArrowDown;
   const theme = useTheme();
   const unlocked = useLightningUnlocked();
+  const arrow = (
+    <Arrow
+      data-cy={`sidebar-field-arrow-disabled-${id}`}
+      style={{ margin: 0, color: theme.text.secondary }}
+    />
+  );
+
+  if (disabled) {
+    return arrow;
+  }
 
   if (unindexed && !unlocked) {
     return (
       <Tooltip text={<AddIndex />} placement="top-center">
-        <Arrow
-          data-cy={`sidebar-field-arrow-disabled-${id}`}
-          style={{ margin: 0, color: theme.text.secondary }}
-        />
+        {arrow}
       </Tooltip>
     );
   }

app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Arrow.tsx

@@ -19,14 +19,17 @@ const Lightning = ({ path }: { path: string }) => {
 };
 
 const IconWrapper = ({ modal, path }: { modal: boolean; path: string }) => {
-  const lightning = useRecoilValue(fos.lightning);
+  const disabled = useRecoilValue(fos.isDisabledPath(path));
   const expandedPath = useRecoilValue(fos.expandPath(path));
+  const lightning = useRecoilValue(fos.lightning);
+
   if (lightning && !modal) {
     return <Lightning path={path} />;
   }
 
   return (
     <Arrow
+      disabled={disabled}
       expanded={fos.sidebarExpanded({ modal, path: expandedPath })}
       id={path}
     />