diff --git a/app/packages/core/src/components/Actions/Options.tsx b/app/packages/core/src/components/Actions/Options.tsx index b92a509e6b..36dc1de288 100644 --- a/app/packages/core/src/components/Actions/Options.tsx +++ b/app/packages/core/src/components/Actions/Options.tsx @@ -17,7 +17,7 @@ import { useResetRecoilState, useSetRecoilState, } from "recoil"; -import { LIGHTNING_MODE, SIDEBAR_MODE } from "../../utils/links"; +import { QP_MODE, SIDEBAR_MODE } from "../../utils/links"; import Checkbox from "../Common/Checkbox"; import RadioGroup from "../Common/RadioGroup"; import { Button } from "../utils"; @@ -216,19 +216,22 @@ const DynamicGroupsViewMode = ({ modal }: { modal: boolean }) => { ); }; -const Lightning = () => { +const QueryPerformance = () => { const [threshold, setThreshold] = useRecoilState(fos.lightningThreshold); const config = useRecoilValue(fos.lightningThresholdConfig); const reset = useResetRecoilState(fos.lightningThreshold); const count = useRecoilValue(fos.datasetSampleCount); const theme = useTheme(); + const enableQueryPerformanceConfig = useRecoilValue(fos.enableQueryPerformanceConfig); + const defaultQueryPerformanceConfig = useRecoilValue(fos.defaultQueryPerformanceConfig); + const enableQpMode = enableQueryPerformanceConfig && defaultQueryPerformanceConfig; - return ( + if (enableQpMode) return ( <> { svgStyles={{ height: "1rem", marginTop: 7.5 }} /> ({ text: value, title: value, - dataCy: `lightning-mode-${value}`, + dataCy: `qp-mode-${value}`, onClick: () => setThreshold(value === "disable" ? null : config ?? count), }))} @@ -372,7 +375,7 @@ const Options = ({ modal, anchorRef }: OptionsProps) => { {isGroup && !isDynamicGroup && } - {!view?.length && } + {!view?.length && } {!modal && } diff --git a/app/packages/core/src/components/FieldLabelAndInfo/index.tsx b/app/packages/core/src/components/FieldLabelAndInfo/index.tsx index 08646a1a12..348863fbd0 100644 --- a/app/packages/core/src/components/FieldLabelAndInfo/index.tsx +++ b/app/packages/core/src/components/FieldLabelAndInfo/index.tsx @@ -20,7 +20,7 @@ import { } from "recoil"; import styled from "styled-components"; import { ExternalLink } from "../../utils/generic"; -import { LIGHTNING_MODE } from "../../utils/links"; +import { QP_MODE } from "../../utils/links"; import { activeColorEntry } from "../ColorModal/state"; const selectedFieldInfo = atom({ @@ -345,7 +345,7 @@ const Lightning: React.FunctionComponent = ({ color, path }) => { Lightning indexed diff --git a/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Arrow.tsx b/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Arrow.tsx index b635a7c7f4..2d385d314e 100644 --- a/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Arrow.tsx +++ b/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Arrow.tsx @@ -7,7 +7,7 @@ import { RecoilState, useRecoilState } from "recoil"; import { useTheme } from "styled-components"; import { FRAME_FILTERING_DISABLED, - LIGHTNING_MODE, + QP_MODE, } from "../../../../utils/links"; import DisabledReason from "./DisabledReason"; @@ -60,7 +60,7 @@ export default ({ if (unindexed && !unlocked) { return ( } + text={} placement="top-center" > {arrow} diff --git a/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Tune.tsx b/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Tune.tsx index 66c3ac3db1..e1bba84dc8 100644 --- a/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Tune.tsx +++ b/app/packages/core/src/components/Sidebar/Entries/FilterablePathEntry/Tune.tsx @@ -3,7 +3,7 @@ import { Tune } from "@mui/icons-material"; import React from "react"; import type { RecoilState } from "recoil"; import { useSetRecoilState } from "recoil"; -import { LIGHTNING_MODE } from "../../../../utils/links"; +import { QP_MODE } from "../../../../utils/links"; import DisabledReason from "./DisabledReason"; export default ({ @@ -54,7 +54,7 @@ export default ({ if (disabled) { return ( } + text={} placement="top-center" > {children} diff --git a/app/packages/core/src/utils/links.ts b/app/packages/core/src/utils/links.ts index f3087713e8..68490756a6 100644 --- a/app/packages/core/src/utils/links.ts +++ b/app/packages/core/src/utils/links.ts @@ -13,7 +13,7 @@ export const FIELD_METADATA = export const FRAME_FILTERING_DISABLED = "https://docs.voxel51.com/user_guide/using_datasets.html#disable-frame-filtering"; -export const LIGHTNING_MODE = +export const QP_MODE = "https://docs.voxel51.com/user_guide/app.html#lightning-mode"; export const NAME_COLORSCALE = "https://plotly.com/python/colorscales/"; diff --git a/app/packages/state/src/recoil/lightning.ts b/app/packages/state/src/recoil/lightning.ts index e206fcde47..0c0ad7950a 100644 --- a/app/packages/state/src/recoil/lightning.ts +++ b/app/packages/state/src/recoil/lightning.ts @@ -200,6 +200,16 @@ export const lightningThresholdConfig = selector({ get: ({ get }) => get(config).lightningThreshold, }); +export const enableQueryPerformanceConfig = selector({ + key: "enableQueryPerformanceConfig", + get: ({ get }) => get(config).enableQueryPerformance, +}); + +export const defaultQueryPerformanceConfig = selector({ + key: "defaultQueryPerformanceConfig", + get: ({ get }) => get(config).defaultQueryPerformance, +}); + const lightningThresholdAtom = atomFamily({ key: "lightningThresholdAtom", default: undefined, diff --git a/e2e-pw/src/oss/poms/action-row/display-options.ts b/e2e-pw/src/oss/poms/action-row/display-options.ts index 3f229e2df7..57cef8d9d9 100644 --- a/e2e-pw/src/oss/poms/action-row/display-options.ts +++ b/e2e-pw/src/oss/poms/action-row/display-options.ts @@ -13,7 +13,7 @@ export class DisplayOptionsPom { } async setLightningMode(mode: LightningMode) { - const selector = this.page.getByTestId(`lightning-mode-${mode}`); + const selector = this.page.getByTestId(`qp-mode-${mode}`); return selector.click(); }