Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Oct 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions app/packages/core/src/components/Actions/Options.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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",
Expand All @@ -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),
}))}
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions app/packages/core/src/components/FieldLabelAndInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>({
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 ({
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/packages/core/src/utils/links.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/";
Expand Down
10 changes: 10 additions & 0 deletions app/packages/state/src/recoil/lightning.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion e2e-pw/src/oss/poms/action-row/display-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand Down
Loading