Bug fixes for Query Performance Toast

app/packages/core/src/components/Filters/NumericFieldFilter/NumericFieldFilter.tsx

@@ -48,7 +48,9 @@ const NumericFieldFilter = ({ color, modal, named = true, path }: Props) => {
   const [showRange, setShowRange] = React.useState(!isGroup);
   const field = fos.useAssertedRecoilValue(fos.field(path));
   const queryPerformance = useRecoilValue(fos.queryPerformance);
-  const hasBounds = useRecoilValue(state.hasBounds({ path, modal }));
+  const hasBounds = useRecoilValue(
+    state.hasBounds({ path, modal, shouldCalculate: !queryPerformance })
+  );
 
   if (!queryPerformance && named && !hasBounds) {
     return null;
@@ -87,6 +89,7 @@ const NumericFieldFilter = ({ color, modal, named = true, path }: Props) => {
               color: theme.text.secondary,
               borderRadius: "8px",
               border: "1px solid " + theme.secondary.main,
+              height: "30px",
             }}
           >
             Filter by {name}

app/packages/core/src/components/Filters/NumericFieldFilter/state.ts

@@ -7,9 +7,12 @@ export const FLOAT_NONFINITES: Nonfinite[] = ["inf", "ninf", "nan"];
 export const hasBounds = selectorFamily({
   key: "hasBounds",
   get:
-    (params: { path: string; modal: boolean }) =>
+    (params: { path: string; modal: boolean; shouldCalculate: boolean }) =>
     ({ get }) => {
-      return Boolean(get(boundsAtom(params))?.every((b) => b !== null));
+      const shouldCalculate = params.shouldCalculate ?? true;
+      return shouldCalculate
+        ? Boolean(get(boundsAtom(params))?.every((b) => b !== null))
+        : Boolean(false);
     },
 });
 

app/packages/core/src/components/QueryPerformanceToast.tsx

@@ -1,39 +1,48 @@
 import { Toast } from "@fiftyone/components";
-import { QP_MODE } from "@fiftyone/core";
+import { QP_MODE, QP_MODE_SUMMARY } from "@fiftyone/core";
 import { getBrowserStorageEffectForKey } from "@fiftyone/state";
 import { Box, Button, Typography } from "@mui/material";
 import { Bolt } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { atom, useRecoilState } from "recoil";
+import { atom, useRecoilState, useRecoilValue } from "recoil";
 import { useTheme } from "@fiftyone/components";
+import * as atoms from "@fiftyone/state/src/recoil/atoms";
 
-const SHOWN_FOR = 5000;
+const SHOWN_FOR = 10000;
 
 const hideQueryPerformanceToast = atom({
   key: "hideQueryPerformanceToast",
   default: false,
   effects: [
     getBrowserStorageEffectForKey("hideQueryPerformanceToast", {
       valueClass: "boolean",
+      sessionStorage: true,
     }),
   ],
 });
 
 const QueryPerformanceToast = ({
-  onClick = () => window.open(QP_MODE, "_blank")?.focus(),
+  onClick = (isFrameFilter: boolean) => {
+    const link = isFrameFilter ? QP_MODE_SUMMARY : QP_MODE;
+    window.open(link, "_blank")?.focus();
+  },
   onDispatch = (event) => {
     console.debug(event);
   },
   text = "View Documentation",
 }) => {
+  const [path, setPath] = useState("");
   const [shown, setShown] = useState(false);
   const [disabled, setDisabled] = useRecoilState(hideQueryPerformanceToast);
   const element = document.getElementById("queryPerformance");
   const theme = useTheme();
+  const frameFields = useRecoilValue(atoms.frameFields);
+
   useEffect(() => {
     const listen = (event) => {
       onDispatch(event);
+      setPath(event.path);
       setShown(true);
     };
     window.addEventListener("queryperformance", listen);
@@ -57,14 +66,18 @@ const QueryPerformanceToast = ({
         horizontal: "center",
         backgroundColor: theme.custom.toastBackgroundColor,
       }}
-      primary={(setOpen) => {
+      primary={() => {
         return (
           <Button
             variant="contained"
             size="small"
             onClick={() => {
-              onClick();
-              setOpen(false);
+              onClick(
+                frameFields.some((frame) =>
+                  path.includes(`frames.${frame.path}`)
+                )
+              );
+              setShown(false);
             }}
             sx={{
               marginLeft: "auto",
@@ -77,7 +90,7 @@ const QueryPerformanceToast = ({
           </Button>
         );
       }}
-      secondary={(setOpen) => {
+      secondary={() => {
         return (
           <div>
             <Button
@@ -87,7 +100,7 @@ const QueryPerformanceToast = ({
               size="small"
               onClick={() => {
                 setDisabled(true);
-                setOpen(false);
+                setShown(false);
               }}
               style={{ marginLeft: "auto", color: theme.text.secondary }} // Right align the button
             >

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

@@ -1,51 +1,9 @@
-import * as fos from "@fiftyone/state";
-import { count, pathColor } from "@fiftyone/state";
-import React, { Suspense, useEffect } from "react";
+import { pathColor } from "@fiftyone/state";
+import React from "react";
 import { useRecoilValue } from "recoil";
 import FilterItem from "./FilterItem";
 import useFilterData from "./useFilterData";
 
-const LABEL_TAGS = "_label_tags";
-const TIMEOUT = 5000;
-
-class QueryPerformanceToast extends Event {
-  path?: string;
-  constructor(path?: string) {
-    super("queryperformance");
-    this.path = path;
-  }
-}
-
-const QueryPerformanceDispatcher = ({ path }: { path: string }) => {
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      window.dispatchEvent(new QueryPerformanceToast(path));
-    }, TIMEOUT);
-
-    return () => clearTimeout(timeout);
-  }, [path]);
-  return null;
-};
-
-const QueryPerformanceSubscriber = ({ path }: { path: string }) => {
-  useRecoilValue(count({ extended: false, modal: false, path }));
-  return null;
-};
-
-const QueryPerformance = ({ path }: { path: string }) => {
-  const queryPerformance = useRecoilValue(fos.queryPerformance);
-
-  if (queryPerformance || path === LABEL_TAGS || !path) {
-    return null;
-  }
-
-  return (
-    <Suspense fallback={<QueryPerformanceDispatcher path={path} />}>
-      <QueryPerformanceSubscriber path={path} />
-    </Suspense>
-  );
-};
-
 const FilterablePathEntries = ({
   modal,
   path,
@@ -61,12 +19,9 @@ const FilterablePathEntries = ({
 
   return (
     <>
-      {!modal && <QueryPerformance path={path} />}
-      <>
-        {data.map(({ color: _, ...props }) => (
-          <FilterItem key={props.path} color={color} {...events} {...props} />
-        ))}
-      </>
+      {data.map(({ color: _, ...props }) => (
+        <FilterItem key={props.path} color={color} {...events} {...props} />
+      ))}
     </>
   );
 };

app/packages/core/src/utils/links.ts

@@ -16,6 +16,9 @@ export const FRAME_FILTERING_DISABLED =
 export const QP_MODE =
   "https://docs.voxel51.com/user_guide/app.html#query-performance";
 
+export const QP_MODE_SUMMARY =
+  "https://docs.voxel51.com/user_guide/using_datasets.html#summary-fields";
+
 export const NAME_COLORSCALE = "https://plotly.com/python/colorscales/";
 
 export const OBJECT_PATCHES =