Skip to content

Commit

Permalink
integrating, boxes input
Browse files Browse the repository at this point in the history
  • Loading branch information
benjaminpkane committed Oct 22, 2024
1 parent 7d4451a commit bb14ff5
Show file tree
Hide file tree
Showing 9 changed files with 115 additions and 31 deletions.
24 changes: 19 additions & 5 deletions app/packages/app/src/components/QueryPerformanceToast.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -31,7 +45,7 @@ const QueryPerformanceToast = () => {
return () => window.removeEventListener("queryperformance", listen);
}, []);

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

Expand All @@ -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>
}
Expand Down
2 changes: 2 additions & 0 deletions app/packages/app/src/pages/datasets/DatasetPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -115,6 +116,7 @@ const DatasetPage: Route<DatasetPageQuery> = ({ prepared }) => {
)}
</div>
<Snackbar />
<QueryPerformanceToast />
</Nav>
);
};
Expand Down
2 changes: 1 addition & 1 deletion app/packages/core/src/components/Common/CountSubcount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -53,7 +54,7 @@ const NumericFieldFilter = ({ color, modal, named = true, path }: Props) => {
/>
)}
{boxes ? (
"Boxes"
<Boxes path={path} />
) : (
<RangeSlider color={color} modal={modal} path={path} />
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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} />
))}
</>
</>
);
};
Expand Down
3 changes: 2 additions & 1 deletion app/packages/core/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from "./components";
export * from "./plugins";
export * from "./hooks";
export * from "./plugins";
export * from "./utils/links";
15 changes: 0 additions & 15 deletions app/packages/state/src/recoil/pathData/counts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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;
},
});
Expand Down

0 comments on commit bb14ff5

Please sign in to comment.