toast updates

voxel51 · Oct 22, 2024 · bda0d21 · bda0d21
1 parent 4a9704d
commit bda0d21
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 52 deletions.
diff --git a/app/packages/app/src/components/QueryPerformanceToast.tsx b/app/packages/app/src/components/QueryPerformanceToast.tsx
@@ -3,12 +3,10 @@ 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 React from "react";
 import { createPortal } from "react-dom";
 import { atom, useRecoilState } from "recoil";
 
-const TIMEOUT = 5000;
-
 const hideQueryPerformanceToast = atom({
   key: "hideQueryPerformanceToast",
   default: false,
@@ -20,70 +18,55 @@ const hideQueryPerformanceToast = atom({
 });
 
 const QueryPerformanceToast = () => {
-  const [shown, setShown] = useState(false);
   const [disabled, setDisabled] = useRecoilState(hideQueryPerformanceToast);
   const element = document.getElementById("queryPerformance");
 
   if (!element) {
     throw new Error("no query performance element");
   }
 
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | null = null;
-    const listen = () => {
-      timeout && clearTimeout(timeout);
-      setShown(true);
-
-      timeout = setTimeout(() => {
-        timeout = null;
-        setShown(false);
-      }, TIMEOUT);
-    };
-
-    window.addEventListener("queryperformance", listen);
-
-    return () => window.removeEventListener("queryperformance", listen);
-  }, []);
-
-  if (!shown || disabled) {
+  if (disabled) {
     return null;
   }
 
   return createPortal(
     <Toast
-      action={
-        <div>
+      duration={1000000}
+      primary={(setOpen) => {
+        return (
           <Button
             variant="contained"
             size="small"
-            onClick={() => open(QP_MODE, "_blank")?.focus()}
+            onClick={() => {
+              open(QP_MODE, "_blank")?.focus();
+              setOpen(false);
+            }}
             style={{ marginLeft: "auto" }} // Right align the button
           >
             View Documentation
           </Button>
-          <Button
-            variant="text"
-            color="secondary"
-            size="small"
-            onClick={() => setDisabled(true)}
-            style={{ marginLeft: "auto" }} // Right align the button
-          >
-            Don&apos;t show me again
-          </Button>
-        </div>
-      }
+        );
+      }}
+      secondary={(setOpen) => {
+        return (
+          <div>
+            <Button
+              variant="text"
+              color="secondary"
+              size="small"
+              onClick={() => {
+                setDisabled(true);
+                setOpen(false);
+              }}
+              style={{ marginLeft: "auto" }} // Right align the button
+            >
+              Don&apos;t show me again
+            </Button>
+          </div>
+        );
+      }}
       message={
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            border: "1px dashed #90caf9",
-            borderRadius: "4px",
-            padding: "8px",
-            width: "100%",
-          }}
-        >
+        <>
           <Box sx={{ display: "flex", alignItems: "center" }}>
             <Bolt sx={{ color: "#f5b700", marginRight: "8px" }} />
             <Typography
@@ -109,7 +92,7 @@ const QueryPerformanceToast = () => {
             Index the most critical fields for faster data loading and query
             performance.
           </Typography>
-        </Box>
+        </>
       }
     />,
     element

diff --git a/...ackages/core/src/components/Sidebar/Entries/FilterablePathEntry/FilterablePathEntries.tsx b/...ackages/core/src/components/Sidebar/Entries/FilterablePathEntry/FilterablePathEntries.tsx
@@ -15,9 +15,7 @@ class QueryPerformanceToast extends Event {
 
 const QueryPerformanceDispatcher = () => {
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      window.dispatchEvent(new QueryPerformanceToast());
-    }, 0);
+    window.dispatchEvent(new QueryPerformanceToast());
 
     return () => undefined;
   }, []);
@@ -32,7 +30,7 @@ const QueryPerformanceSubscriber = ({ path }: { path: string }) => {
 const QueryPerformance = ({ path }: { path: string }) => {
   const queryPerformance = useRecoilValue(fos.queryPerformance);
 
-  if (queryPerformance || path === LABEL_TAGS) {
+  if (queryPerformance || path === LABEL_TAGS || !path) {
     return null;
   }