integrating, boxes input

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

@@ -1,13 +1,27 @@
 import { Toast } from "@fiftyone/components";
+import { QP_MODE } from "@fiftyone/core";
+import { getBrowserStorageEffectForKey } from "@fiftyone/state";
 import { Box, Button, Typography } from "@material-ui/core";
 import { Bolt } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+import { atom, useRecoilState } from "recoil";
 
 const TIMEOUT = 5000;
 
+const hideQueryPerformanceToast = atom({
+  key: "hideQueryPerformanceToast",
+  default: false,
+  effects: [
+    getBrowserStorageEffectForKey("hideQueryPerformanceToast", {
+      valueClass: "boolean",
+    }),
+  ],
+});
+
 const QueryPerformanceToast = () => {
   const [shown, setShown] = useState(false);
+  const [disabled, setDisabled] = useRecoilState(hideQueryPerformanceToast);
   const element = document.getElementById("queryPerformance");
 
   if (!element) {
@@ -31,7 +45,7 @@ const QueryPerformanceToast = () => {
     return () => window.removeEventListener("queryperformance", listen);
   }, []);
 
-  if (!shown) {
+  if (!shown || disabled) {
     return null;
   }
 
@@ -42,19 +56,19 @@ const QueryPerformanceToast = () => {
           <Button
             variant="contained"
             size="small"
-            onClick={}
+            onClick={() => open(QP_MODE, "_blank")?.focus()}
             style={{ marginLeft: "auto" }} // Right align the button
           >
-            Create an index
+            View Documentation
           </Button>
           <Button
             variant="text"
             color="secondary"
             size="small"
-            onClick={}
+            onClick={() => setDisabled(true)}
             style={{ marginLeft: "auto" }} // Right align the button
           >
-            Don't show me again
+            Don&apos;t show me again
           </Button>
         </div>
       }

app/packages/app/src/pages/datasets/DatasetPage.tsx

@@ -10,6 +10,7 @@ import { usePreloadedQuery } from "react-relay";
 import { useRecoilValue } from "recoil";
 import { graphql } from "relay-runtime";
 import Nav from "../../components/Nav";
+import QueryPerformanceToast from "../../components/QueryPerformanceToast";
 import type { Route } from "../../routing";
 import style from "../index.module.css";
 import type { DatasetPageQuery } from "./__generated__/DatasetPageQuery.graphql";
@@ -115,6 +116,7 @@ const DatasetPage: Route<DatasetPageQuery> = ({ prepared }) => {
         )}
       </div>
       <Snackbar />
+      <QueryPerformanceToast />
     </Nav>
   );
 };

app/packages/core/src/components/Common/CountSubcount.tsx

@@ -33,7 +33,7 @@ const EntryCounts = ({
     return <span data-cy="entry-count-all">{count?.toLocaleString()}</span>;
   }
 
-  if (countAtom) {
+  if (countAtom !== CONST_SELECTOR) {
     return (
       <span style={{ whiteSpace: "nowrap" }} data-cy="entry-count-part">
         {subcount?.toLocaleString()} of {count?.toLocaleString()}

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

@@ -1,7 +1,45 @@
+import { Selector, useTheme } from "@fiftyone/components";
+import { pathColor } from "@fiftyone/state";
 import React from "react";
+import { useRecoilValue } from "recoil";
+import styled from "styled-components";
 
-const Boxes = () => {
-  return <>Boxes</>;
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  column-gap: 1rem;
+  background: ${({ theme }) => theme.background.level2};
+  border: 1px solid var(--fo-palette-divider);
+  border-radius: 2px;
+  color: ${({ theme }) => theme.text.secondary};
+  margin-top: 0.25rem;
+  padding: 0.25rem 0.5rem;
+`;
+
+const Box = ({ path, placeholder }: { path: string; placeholder: string }) => {
+  const color = useRecoilValue(pathColor(path));
+  const theme = useTheme();
+  return (
+    <Selector
+      placeholder={placeholder}
+      inputStyle={{
+        color: theme.text.secondary,
+        fontSize: "1rem",
+        width: "100%",
+      }}
+      onSelect={() => alert("E")}
+      containerStyle={{ borderBottomColor: color, zIndex: 1000 }}
+    />
+  );
+};
+
+const Boxes = ({ path }: { path: string }) => {
+  return (
+    <Container>
+      <Box path={path} placeholder={"min"} />
+      <Box path={path} placeholder={"max"} />
+    </Container>
+  );
 };
 
 export default Boxes;

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

@@ -3,6 +3,7 @@ import React from "react";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import FieldLabelAndInfo from "../../FieldLabelAndInfo";
+import Boxes from "./Boxes";
 import RangeSlider from "./RangeSlider";
 import * as state from "./state";
 
@@ -53,7 +54,7 @@ const NumericFieldFilter = ({ color, modal, named = true, path }: Props) => {
         />
       )}
       {boxes ? (
-        "Boxes"
+        <Boxes path={path} />
       ) : (
         <RangeSlider color={color} modal={modal} path={path} />
       )}

app/packages/core/src/components/Sidebar/Entries/EntryCounts.tsx

@@ -44,7 +44,7 @@ export const PathEntryCounts = ({ modal, path }: PathEntryCountsProps) => {
   const queryPerformance = useRecoilValue(fos.queryPerformance);
   const shown = useRecoilValue(showEntryCounts({ modal, path }));
 
-  return (!queryPerformance || hasFilters) && shown ? (
+  return (!queryPerformance || hasFilters || !path) && shown ? (
     <SuspenseEntryCounts
       countAtom={queryPerformance ? undefined : getAtom(false)}
       subcountAtom={getAtom(true)}

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

@@ -1,9 +1,48 @@
-import { pathColor } from "@fiftyone/state";
-import React from "react";
+import * as fos from "@fiftyone/state";
+import { count, pathColor } from "@fiftyone/state";
+import React, { Suspense, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import FilterItem from "./FilterItem";
 import useFilterData from "./useFilterData";
 
+const LABEL_TAGS = "_label_tags";
+
+class QueryPerformanceToast extends Event {
+  constructor() {
+    super("queryperformance");
+  }
+}
+
+const QueryPerformanceDispatcher = () => {
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      window.dispatchEvent(new QueryPerformanceToast());
+    }, 0);
+
+    return () => undefined;
+  }, []);
+  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) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={<QueryPerformanceDispatcher />}>
+      <QueryPerformanceSubscriber path={path} />
+    </Suspense>
+  );
+};
+
 const FilterablePathEntries = ({
   modal,
   path,
@@ -16,11 +55,15 @@ const FilterablePathEntries = ({
 }) => {
   const { data } = useFilterData(modal, path);
   const color = useRecoilValue(pathColor(path));
+
   return (
     <>
-      {data.map(({ color: _, ...props }) => (
-        <FilterItem key={props.path} color={color} {...events} {...props} />
-      ))}
+      {!modal && <QueryPerformance path={path} />}
+      <>
+        {data.map(({ color: _, ...props }) => (
+          <FilterItem key={props.path} color={color} {...events} {...props} />
+        ))}
+      </>
     </>
   );
 };

app/packages/core/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./components";
-export * from "./plugins";
 export * from "./hooks";
+export * from "./plugins";
+export * from "./utils/links";

app/packages/state/src/recoil/pathData/counts.ts

@@ -11,14 +11,6 @@ import * as viewAtoms from "../view";
 import { booleanCountResults } from "./boolean";
 import { gatherPaths } from "./utils";
 
-class QueryPerformanceToast extends Event {
-  constructor() {
-    super("queryperformance");
-  }
-}
-
-let QP_TIMEOUT: ReturnType<typeof setTimeout> | null = null;
-
 export const count = selectorFamily({
   key: "count",
   get:
@@ -102,13 +94,6 @@ export const count = selectorFamily({
         return get(counts(params))[value] || 0;
       }
 
-      if (QP_TIMEOUT === null) {
-        console.log("HELLO");
-        QP_TIMEOUT = setTimeout(() => {
-          window.dispatchEvent(new QueryPerformanceToast());
-        }, 1000);
-      }
-
       return get(aggregation(params))?.count as number;
     },
 });