Skip to content

Commit

Permalink
refactor qp toast to be used in teams
Browse files Browse the repository at this point in the history
  • Loading branch information
CamronStaley committed Oct 30, 2024
1 parent ed9d3c2 commit 2875071
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 2 deletions.
3 changes: 1 addition & 2 deletions app/packages/app/src/pages/datasets/DatasetPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dataset, Snackbar, Starter } from "@fiftyone/core";
import { Dataset, Snackbar, Starter, QueryPerformanceToast } from "@fiftyone/core";
import "@fiftyone/embeddings";
import "@fiftyone/map";
import { OperatorCore } from "@fiftyone/operators";
Expand All @@ -10,7 +10,6 @@ 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";
Expand Down
128 changes: 128 additions & 0 deletions app/packages/core/src/components/QueryPerformanceToast.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { Toast } from "@fiftyone/components";
import { QP_MODE } 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 { useTheme } from "@fiftyone/components";

const SHOWN_FOR = 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");
const theme = useTheme();
useEffect(() => {
const listen = () => {
setShown(true);
};
window.addEventListener("queryperformance", listen);
return () => window.removeEventListener("queryperformance", listen);
}, []);

if (!element) {
throw new Error("no query performance element");
}

if (!shown || disabled) {
return null;
}

return createPortal(
<Toast
duration={SHOWN_FOR}
layout={{
bottom: "100px",
vertical: "bottom",
horizontal: "center",
backgroundColor: theme.custom.toastBackgroundColor,
}}
primary={(setOpen) => {
return (
<Button
variant="contained"
size="small"
onClick={() => {
open(QP_MODE, "_blank")?.focus();
setOpen(false);
}}
sx={{
marginLeft: "auto",
backgroundColor: theme.primary.main,
color: theme.text.primary,
boxShadow: 0,
}} // Right align the button
>
View Documentation
</Button>
);
}}
secondary={(setOpen) => {
return (
<div>
<Button
variant="text"
color="secondary"
size="small"
onClick={() => {
setDisabled(true);
setOpen(false);
}}
style={{ marginLeft: "auto", color: theme.text.secondary }} // Right align the button
>
Dismiss
</Button>
</div>
);
}}
message={
<>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Bolt sx={{ color: theme.custom.lightning, marginRight: "8px" }} />
<Typography
variant="subtitle1"
sx={{
fontWeight: 500,
marginRight: "8px",
color: theme.text.primary,
}}
>
Query Performance is Available!
</Typography>
<Typography
variant="caption"
sx={{
color: theme.custom.lightning,
borderRadius: "2px",
padding: "2px 4px",
fontSize: "1rem",
}}
>
NEW
</Typography>
</Box>
<Typography variant="body2" sx={{ color: theme.text.secondary }}>
Index the most critical fields for faster data loading and query
performance.
</Typography>
</>
}
/>,
element
);
};

export default QueryPerformanceToast;
1 change: 1 addition & 0 deletions app/packages/core/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export * from "./Sidebar";
export { default as Snackbar } from "./Snackbar";
export { default as ViewBar, rollbackViewBar } from "./ViewBar/ViewBar";
export * from "./Starter";
export { default as QueryPerformanceToast } from "./QueryPerformanceToast";

0 comments on commit 2875071

Please sign in to comment.