Lightning mode refactor and disable/enable qp mode toggle (#4928)

* Refactored Lightning Mode to QP mode
* Added condition for checking to deploy vars
* Updated tests

---------

Co-authored-by: minhtuevo <minhtuev@voxel51.com>

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 (
     <>
       <ActionOption
-        id="lightning-mode"
+        id="qp-mode"
         text="Query Performance mode"
-        href={LIGHTNING_MODE}
+        href={QP_MODE}
         title={"More on Query Performance mode"}
         style={{
           background: "unset",
@@ -239,11 +242,11 @@ const Lightning = () => {
         svgStyles={{ height: "1rem", marginTop: 7.5 }}
       />
       <TabOption
-        active={threshold === null ? "disable" : "enable"}
+        active={(threshold === null) ? "disable" : "enable"}
         options={["disable", "enable"].map((value) => ({
           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 && <GroupStatistics modal={modal} />}
       <MediaFields modal={modal} />
       <Patches modal={modal} />
-      {!view?.length && <Lightning />}
+      {!view?.length && <QueryPerformance />}
       {!modal && <SidebarMode />}
       <SortFilterResults modal={modal} />
     </Popout>

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<string | null>({
@@ -345,7 +345,7 @@ const Lightning: React.FunctionComponent<LightningProp> = ({ color, path }) => {
             <ContentValue>
               <ExternalLink
                 style={{ color: theme.text.primary }}
-                href={LIGHTNING_MODE}
+                href={QP_MODE}
               >
                 Lightning indexed
               </ExternalLink>

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 (
       <Tooltip
-        text={<DisabledReason text={"add an index"} href={LIGHTNING_MODE} />}
+        text={<DisabledReason text={"add an index"} href={QP_MODE} />}
         placement="top-center"
       >
         {arrow}

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 (
       <Tooltip
-        text={<DisabledReason href={LIGHTNING_MODE} text={"add an index"} />}
+        text={<DisabledReason href={QP_MODE} text={"add an index"} />}
         placement="top-center"
       >
         {children}

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/";

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<string, string>({
   key: "lightningThresholdAtom",
   default: undefined,

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();
   }