Skip to content

Commit

Permalink
feat: Disable certain elements from being screenshotted
Browse files Browse the repository at this point in the history
  • Loading branch information
bprusinowski committed Dec 3, 2024
1 parent 90c905f commit ebdd3c6
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 2 deletions.
6 changes: 5 additions & 1 deletion app/charts/table/table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { TableChartState } from "@/charts/table/table-state";
import Flex from "@/components/flex";
import { Input, Switch } from "@/components/form";
import { Observation } from "@/domain/data";
import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";

const MOBILE_VIEW_THRESHOLD = 384;

Expand Down Expand Up @@ -299,7 +300,10 @@ export const Table = () => {
return (
<>
{showSearch && (
<Box sx={{ mb: 4, width: "min(100%, 300px)" }}>
<Box
sx={{ mb: 4, width: "min(100%, 300px)" }}
{...DISABLE_SCREENSHOT_ATTR}
>
<Input
type="text"
name="search-input"
Expand Down
9 changes: 9 additions & 0 deletions app/components/chart-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters";
import { useTransitionStore } from "@/stores/transition";
import { useTheme } from "@/themes";
import { createSnapCornerToCursor } from "@/utils/dnd";
import { DISABLE_SCREENSHOT_ATTR_KEY } from "@/utils/use-screenshot";

export const ChartPreview = ({ dataSource }: { dataSource: DataSource }) => {
const [state] = useConfiguratorState(hasChartConfigs);
Expand Down Expand Up @@ -474,6 +475,10 @@ const ChartPreviewInner = ({
})
: undefined
}
{...{
[DISABLE_SCREENSHOT_ATTR_KEY]:
!chartConfig.meta.title[locale],
}}
/>
) : (
// We need to have a span here to keep the space between the
Expand Down Expand Up @@ -507,6 +512,10 @@ const ChartPreviewInner = ({
}
: undefined
}
{...{
[DISABLE_SCREENSHOT_ATTR_KEY]:
!chartConfig.meta.description[locale],
}}
/>
) : (
// We need to have a span here to keep the space between the
Expand Down
2 changes: 2 additions & 0 deletions app/components/chart-shared.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { getChartIcon } from "@/icons";
import SvgIcMore from "@/icons/components/IcMore";
import { useLocale } from "@/src";
import { createChartId } from "@/utils/create-chart-id";
import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";

/** Generic styles shared between `ChartPreview` and `ChartPublished`. */
export const useChartStyles = makeStyles<Theme, { disableBorder?: boolean }>(
Expand Down Expand Up @@ -136,6 +137,7 @@ export const ChartMoreButton = ({
color="secondary"
onClick={(ev) => setAnchor(ev.currentTarget)}
sx={{ height: "fit-content" }}
{...DISABLE_SCREENSHOT_ATTR}
>
<SvgIcMore />
</IconButton>
Expand Down
8 changes: 7 additions & 1 deletion app/components/debug-panel/DebugPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import SvgIcChevronRight from "@/icons/components/IcChevronRight";
import { useLocale } from "@/src";
import { useInteractiveFiltersGetState } from "@/stores/interactive-filters";
import useEvent from "@/utils/use-event";
import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";

const DebugInteractiveFilters = () => {
const getInteractiveFiltersState = useInteractiveFiltersGetState();
Expand Down Expand Up @@ -200,7 +201,12 @@ const DebugPanel = (props: DebugPanelProps) => {
const classes = useStyles();

return (
<Accordion disableGutters className={classes.debugPanel} square>
<Accordion
disableGutters
className={classes.debugPanel}
square
{...DISABLE_SCREENSHOT_ATTR}
>
<AccordionSummary
expandIcon={
<Box p={2}>
Expand Down
2 changes: 2 additions & 0 deletions app/components/metadata-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ import { assert } from "@/utils/assert";
import { useEventEmitter } from "@/utils/eventEmitter";
import { makeDimensionValueSorters } from "@/utils/sorting-values";
import useEvent from "@/utils/use-event";
import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";

import Flex from "./flex";
import { JoinByChip } from "./JoinByChip";
Expand Down Expand Up @@ -370,6 +371,7 @@ const ToggleButton = ({ onClick }: { onClick: () => void }) => {
color="primary"
size="small"
onClick={onClick}
{...DISABLE_SCREENSHOT_ATTR}
>
<Typography variant="body2">
<Trans id="controls.metadata-panel.metadata">Details</Trans>
Expand Down

0 comments on commit ebdd3c6

Please sign in to comment.