From 16d85bf08a4266bef027c56b5d5e4b28a3ca9a61 Mon Sep 17 00:00:00 2001 From: minhtuevo Date: Mon, 14 Oct 2024 15:11:39 -0700 Subject: [PATCH 1/5] Refactored Lightning Mode to QP mode --- app/packages/core/src/components/Actions/Options.tsx | 8 ++++---- .../core/src/components/FieldLabelAndInfo/index.tsx | 4 ++-- .../Sidebar/Entries/FilterablePathEntry/Arrow.tsx | 4 ++-- .../Sidebar/Entries/FilterablePathEntry/Tune.tsx | 4 ++-- app/packages/core/src/utils/links.ts | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/packages/core/src/components/Actions/Options.tsx b/app/packages/core/src/components/Actions/Options.tsx index b92a509e6b..efdd8af90a 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"; @@ -226,9 +226,9 @@ const Lightning = () => { return ( <> { options={["disable", "enable"].map((value) => ({ text: value, title: value, - dataCy: `lightning-mode-${value}`, + dataCy: `qd-mode-${value}`, onClick: () => setThreshold(value === "disable" ? null : config ?? count), }))} 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/"; From 0d039fcbff774d66e8bfb1bc1d257a0147eaa712 Mon Sep 17 00:00:00 2001 From: minhtuevo Date: Tue, 15 Oct 2024 00:00:46 -0700 Subject: [PATCH 2/5] Added condition for checking deploy vars --- app/packages/core/src/components/Actions/Options.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/packages/core/src/components/Actions/Options.tsx b/app/packages/core/src/components/Actions/Options.tsx index efdd8af90a..fe65f7e008 100644 --- a/app/packages/core/src/components/Actions/Options.tsx +++ b/app/packages/core/src/components/Actions/Options.tsx @@ -216,7 +216,7 @@ 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); @@ -239,7 +239,7 @@ const Lightning = () => { svgStyles={{ height: "1rem", marginTop: 7.5 }} /> ({ text: value, title: value, @@ -372,7 +372,7 @@ const Options = ({ modal, anchorRef }: OptionsProps) => { {isGroup && !isDynamicGroup && } - {!view?.length && } + {!view?.length && } {!modal && } From 36348289e1ab7a1b1e9642952b0b742f7afb596e Mon Sep 17 00:00:00 2001 From: minhtuevo Date: Tue, 15 Oct 2024 01:19:21 -0700 Subject: [PATCH 3/5] Disabled toggle and export env vars --- app/packages/core/src/components/Actions/Options.tsx | 5 +++-- app/packages/state/src/recoil/lightning.ts | 10 ++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/app/packages/core/src/components/Actions/Options.tsx b/app/packages/core/src/components/Actions/Options.tsx index fe65f7e008..b9369df4d5 100644 --- a/app/packages/core/src/components/Actions/Options.tsx +++ b/app/packages/core/src/components/Actions/Options.tsx @@ -222,8 +222,9 @@ const QueryPerformance = () => { const reset = useResetRecoilState(fos.lightningThreshold); const count = useRecoilValue(fos.datasetSampleCount); const theme = useTheme(); + const enableQpMode = useRecoilValue(fos.enableQueryPerformanceConfig) && useRecoilValue(fos.defaultQueryPerformanceConfig); - return ( + if (enableQpMode) return ( <> { svgStyles={{ height: "1rem", marginTop: 7.5 }} /> ({ text: value, title: value, 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, From 3231978b318ab3e5bc28da97c5c5fbd09c03be34 Mon Sep 17 00:00:00 2001 From: minhtuevo Date: Tue, 15 Oct 2024 13:18:24 -0700 Subject: [PATCH 4/5] Updated tests --- app/packages/core/src/components/Actions/Options.tsx | 4 ++-- e2e-pw/src/oss/poms/action-row/display-options.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/packages/core/src/components/Actions/Options.tsx b/app/packages/core/src/components/Actions/Options.tsx index b9369df4d5..023c6999ca 100644 --- a/app/packages/core/src/components/Actions/Options.tsx +++ b/app/packages/core/src/components/Actions/Options.tsx @@ -227,7 +227,7 @@ const QueryPerformance = () => { if (enableQpMode) return ( <> { options={["disable", "enable"].map((value) => ({ text: value, title: value, - dataCy: `qd-mode-${value}`, + dataCy: `qp-mode-${value}`, onClick: () => setThreshold(value === "disable" ? null : config ?? count), }))} 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(); } From 8beadb059660fda4175767aa8e5dce8e5c2a0a3d Mon Sep 17 00:00:00 2001 From: minhtuevo Date: Tue, 15 Oct 2024 14:28:54 -0700 Subject: [PATCH 5/5] Addressed feedback --- app/packages/core/src/components/Actions/Options.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/packages/core/src/components/Actions/Options.tsx b/app/packages/core/src/components/Actions/Options.tsx index 023c6999ca..36dc1de288 100644 --- a/app/packages/core/src/components/Actions/Options.tsx +++ b/app/packages/core/src/components/Actions/Options.tsx @@ -222,7 +222,9 @@ const QueryPerformance = () => { const reset = useResetRecoilState(fos.lightningThreshold); const count = useRecoilValue(fos.datasetSampleCount); const theme = useTheme(); - const enableQpMode = useRecoilValue(fos.enableQueryPerformanceConfig) && useRecoilValue(fos.defaultQueryPerformanceConfig); + const enableQueryPerformanceConfig = useRecoilValue(fos.enableQueryPerformanceConfig); + const defaultQueryPerformanceConfig = useRecoilValue(fos.defaultQueryPerformanceConfig); + const enableQpMode = enableQueryPerformanceConfig && defaultQueryPerformanceConfig; if (enableQpMode) return ( <>