+
+
+
+
+
+
+ );
+}
diff --git a/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/InteractiveScreenshot.module.css b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/InteractiveScreenshot.module.css
new file mode 100644
index 000000000..74df2b6a7
--- /dev/null
+++ b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/InteractiveScreenshot.module.css
@@ -0,0 +1,40 @@
+.interactive-container {
+ overflow: hidden;
+ user-select: none;
+ touch-action: none;
+ display: flex;
+ justify-content: center;
+ align-items: start;
+}
+
+.unified-container {
+ transform-origin: top left;
+ position: relative;
+}
+
+.screenshot {
+ pointer-events: none;
+ max-height: 100%;
+ max-width: 100%;
+ outline: var(--color-neutral-300) solid 1px;
+}
+
+.screenshot-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+html, body {
+ /* This is needed to prevent back/forward swipes in Chrome and other browsers */
+ overscroll-behavior-x: none;
+}
+
+.toolbar {
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.interactive-container:hover .toolbar {
+ opacity: 1;
+}
diff --git a/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/InteractiveScreenshot.tsx b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/InteractiveScreenshot.tsx
new file mode 100644
index 000000000..bc7bf03bd
--- /dev/null
+++ b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/InteractiveScreenshot.tsx
@@ -0,0 +1,239 @@
+import classNames from 'classnames';
+import React, {ReactNode, useCallback, useRef, useState, useEffect} from 'react';
+import {useViewportContext} from '../hooks/useSyncedViewport';
+import {ScreenshotDisplayData} from '../types';
+import {InteractiveActionsToolbar} from './InteractiveActionsToolbar';
+import {calculateZoomAtPoint} from './utils';
+import styles from './InteractiveScreenshot.module.css';
+import {MIN_SCALE, MAX_SCALE, EXPONENTIAL_ZOOM_FACTOR, PAN_SENSITIVITY, InteractiveFitMode} from './constants';
+
+interface InteractiveScreenshotProps {
+ image: ScreenshotDisplayData;
+ unifiedDimensions: {width: number; height: number};
+ containerClassName?: string;
+ defaultFitMode?: InteractiveFitMode;
+ overlayImage?: ScreenshotDisplayData;
+ showOverlay?: boolean;
+}
+
+export function InteractiveScreenshot(props: InteractiveScreenshotProps): ReactNode {
+ const {viewport, updateViewport, fitMode, setFitMode} = useViewportContext();
+ const containerRef = useRef
+
+ );
+}
diff --git a/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/constants.ts b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/constants.ts
new file mode 100644
index 000000000..f250f4fad
--- /dev/null
+++ b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/constants.ts
@@ -0,0 +1,11 @@
+export const MIN_SCALE = 0.1;
+export const MAX_SCALE = 50;
+export const ZOOM_STEP = 0.2;
+
+export const EXPONENTIAL_ZOOM_FACTOR = 0.015;
+export const PAN_SENSITIVITY = 1;
+
+export enum InteractiveFitMode {
+ FitView = 'fit-view',
+ FitWidth = 'fit-width'
+}
diff --git a/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/index.module.css b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/index.module.css
new file mode 100644
index 000000000..4a0098f2a
--- /dev/null
+++ b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/index.module.css
@@ -0,0 +1,31 @@
+.two-up-interactive-mode {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ min-height: 400px;
+}
+
+.image-panel {
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+ background: var(--color-neutral-100);
+ border: 1px solid var(--color-neutral-200);
+ border-radius: 5px;
+}
+
+.divider {
+ width: 10px;
+}
+
+.side-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.image-container {
+ width: 100%;
+ height: 100%;
+}
diff --git a/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/index.tsx b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/index.tsx
new file mode 100644
index 000000000..d7c1b97a6
--- /dev/null
+++ b/lib/static/new-ui/components/DiffViewer/TwoUpInteractiveMode/index.tsx
@@ -0,0 +1,102 @@
+import React, {ReactNode, useMemo, useEffect} from 'react';
+import {useSelector} from 'react-redux';
+import {ViewportContext, useSyncedViewport} from '../hooks/useSyncedViewport';
+import {InteractiveScreenshot} from './InteractiveScreenshot';
+import {InteractiveFitMode} from './constants';
+import styles from './index.module.css';
+import {ImageLabel} from '../../ImageLabel';
+import {getImageDisplayedSize} from '../../../utils';
+import {ImageFile} from '@/types';
+import {getDisplayedDiffPercentValue, getDisplayedDiffPixelsCountValue} from '../utils';
+import {TwoUpFitMode} from '@/constants';
+
+interface TwoUpInteractiveModeProps {
+ expected: ImageFile;
+ actual: ImageFile;
+ diff?: ImageFile;
+ differentPixels?: number;
+ diffRatio?: number;
+}
+
+interface TwoUpInteractiveModePureProps extends TwoUpInteractiveModeProps {
+ is2UpDiffVisible: boolean;
+ globalTwoUpFitMode: TwoUpFitMode;
+}
+
+export function TwoUpInteractiveModePure(props: TwoUpInteractiveModePureProps): ReactNode {
+ const viewportContextValue = useSyncedViewport();
+
+ const defaultFitMode = props.globalTwoUpFitMode === TwoUpFitMode.FitToView
+ ? InteractiveFitMode.FitView
+ : InteractiveFitMode.FitWidth;
+
+ const diffInfo = props.differentPixels && props.diffRatio
+ ? ` ⋅ ${getDisplayedDiffPixelsCountValue(props.differentPixels)} ${props.differentPixels > 1 ? 'are' : 'is'} different (${getDisplayedDiffPercentValue(props.diffRatio)}%)`
+ : '';
+ const actualImageSubtitle = getImageDisplayedSize(props.actual) + diffInfo;
+
+ const unifiedDimensions = useMemo(() => {
+ return {
+ width: Math.max(props.expected.size.width, props.actual.size.width),
+ height: Math.max(props.expected.size.height, props.actual.size.height)
+ };
+ }, [props.expected.size, props.actual.size]);
+
+ useEffect(() => {
+ if (props.globalTwoUpFitMode === TwoUpFitMode.FitToView) {
+ viewportContextValue.setFitMode(InteractiveFitMode.FitView);
+ } else if (props.globalTwoUpFitMode === TwoUpFitMode.FitToWidth) {
+ viewportContextValue.setFitMode(InteractiveFitMode.FitWidth);
+ }
+ viewportContextValue.updateViewport({
+ scale: 1,
+ translateX: 0,
+ translateY: 0
+ });
+ }, [props.globalTwoUpFitMode]);
+
+ return (
+
+ 
1 ? 'pixelated' : 'auto'
+ }}
+ />
+ {props.overlayImage && props.showOverlay && (
+ 
1 ? 'pixelated' : 'auto'
+ }}
+ />
+ )}
+
+ 1 ? 'pixelated' : 'auto'
+ }}
+ />
+ {props.overlayImage && props.showOverlay && (
+
+
+
+
+
+
+
+
+
+
+
+
+ return (
+ ({browser, buttonProps, buttonText}, ref) => {
+ const isRunning = useSelector(state => state.running);
- const analytics = useAnalytics();
- const dispatch = useDispatch();
- const isRunTestsAvailable = useSelector(state => state.app.availableFeatures)
- .find(feature => feature.name === RunTestsFeature.name);
+ const analytics = useAnalytics();
+ const dispatch = useDispatch();
+ const isRunTestsAvailable = isFeatureAvailable(RunTestsFeature);
- const isPlayerAvailable = useSelector(isTimeTravelPlayerAvailable);
+ const onRetryTestHandler = (): void => {
+ if (browser) {
+ analytics?.trackFeatureUsage({featureName: 'Retry test button click in test control panel'});
+ dispatch(thunkRunTest({test: {testName: browser.parentId, browserName: browser.name}}));
+ }
+ };
- const onRetryTestHandler = (): void => {
- if (browser) {
- analytics?.trackFeatureUsage({featureName: 'Retry test button click in test control panel'});
- dispatch(thunkRunTest({test: {testName: browser.parentId, browserName: browser.name}}));
+ if (!isRunTestsAvailable) {
+ return null;
}
- };
- const onTogglePlayerVisibility = (): void => {
- analytics?.trackFeatureUsage({featureName: 'Toggle time travel player visibility'});
- dispatch(toggleTimeTravelPlayerVisibility(!isPlayerVisible));
- };
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ return ;
+ }
+);
- const showRetryButton = Boolean(isRunTestsAvailable);
- const showPlayerButton = isPlayerAvailable && showPlayer;
- const showDivider = showRetryButton && showPlayerButton;
-
- return (
-
- {Object.values(DiffModes).map(diffMode =>
+ {getAvailableDiffModes('suites').map(diffMode =>
)}
@@ -164,7 +165,7 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
)}
+
);
}
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx
index fc24c0a92..2810f617b 100644
--- a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx
+++ b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx
@@ -1,5 +1,5 @@
-import {ArrowUturnCcwLeft, Check, ListCheck} from '@gravity-ui/icons';
-import {Button, Divider, Icon, Select, Flex} from '@gravity-ui/uikit';
+import {ArrowRightArrowLeft, ArrowUturnCcwLeft, Check, LayersVertical, ListCheck, SquareDashed, ChevronsExpandToLines} from '@gravity-ui/icons';
+import {Button, Divider, Icon, Select, Flex, Tooltip} from '@gravity-ui/uikit';
import React, {ReactNode, useEffect, useRef} from 'react';
import {useDispatch, useSelector} from 'react-redux';
@@ -13,12 +13,15 @@ import {
import {SuiteTitle} from '@/static/new-ui/components/SuiteTitle';
import styles from './index.module.css';
import {CompactAttemptPicker} from '@/static/new-ui/components/CompactAttemptPicker';
-import {DiffModeId, DiffModes, EditScreensFeature} from '@/constants';
+import {DiffModeId, EditScreensFeature, RunTestsFeature, TwoUpFitMode} from '@/constants';
+import {getAvailableDiffModes} from '@/static/new-ui/utils/diffModes';
import {
- setDiffMode,
staticAccepterStageScreenshot,
- staticAccepterUnstageScreenshot
+ staticAccepterUnstageScreenshot,
+ toggle2UpDiffVisibility,
+ set2UpFitMode
} from '@/static/modules/actions';
+import {setVisualChecksDiffMode} from '@/static/modules/actions/visual-checks-page';
import {isAcceptable, isScreenRevertable} from '@/static/modules/utils';
import {AssertViewStatus} from '@/static/new-ui/components/AssertViewStatus';
import {thunkAcceptImages, thunkRevertImages} from '@/static/modules/actions/screenshots';
@@ -26,7 +29,8 @@ import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
import {preloadImageEntity} from '../../../../../modules/utils/imageEntity';
import {useNavigate} from 'react-router-dom';
-import {RunTest} from '../../../../components/RunTest';
+import {RunTestButton} from '../../../../components/RunTest';
+import {IconButton} from '../../../../components/IconButton';
interface VisualChecksStickyHeaderProps {
currentNamedImage: NamedImageEntity | null;
@@ -72,9 +76,20 @@ export function VisualChecksStickyHeader({currentNamedImage, visibleNamedImageId
usePreloadImages(currentNamedImageIndex, visibleNamedImageIds);
- const diffMode = useSelector(state => state.view.diffMode);
+ const diffMode = useSelector(state => state.app.visualChecksPage.diffMode);
+ const is2UpDiffVisible = useSelector(state => state.ui.visualChecksPage.is2UpDiffVisible);
+ const twoUpFitMode = useSelector(state => state.ui.visualChecksPage.twoUpFitMode);
const onChangeHandler = (diffModeId: DiffModeId): void => {
- dispatch(setDiffMode({diffModeId}));
+ dispatch(setVisualChecksDiffMode(diffModeId));
+ };
+ const onToggle2UpDiffVisibility = (): void => {
+ analytics?.trackFeatureUsage({featureName: 'Toggle 2-up diff visibility'});
+ dispatch(toggle2UpDiffVisibility(!is2UpDiffVisible));
+ };
+ const onToggle2UpFitMode = (): void => {
+ const newFitMode = twoUpFitMode === TwoUpFitMode.FitToView ? TwoUpFitMode.FitToWidth : TwoUpFitMode.FitToView;
+ analytics?.trackFeatureUsage({featureName: 'Toggle 2-up fit mode'});
+ dispatch(set2UpFitMode(newFitMode));
};
const isStaticImageAccepterEnabled = useSelector(state => state.staticImageAccepter.enabled);
@@ -114,6 +129,9 @@ export function VisualChecksStickyHeader({currentNamedImage, visibleNamedImageId
const isLastResult = Boolean(currentResultId && currentBrowser && currentResultId === currentBrowser.resultIds[currentBrowser.resultIds.length - 1]);
const isUndoAvailable = isScreenRevertable({gui: isGui, image: currentImage ?? {}, isLastResult, isStaticImageAccepterEnabled});
+ const isRunTestsAvailable = Boolean(useSelector(state => state.app.availableFeatures)
+ .find(feature => feature.name === RunTestsFeature.name));
+
const onSuites = (): void => {
if (currentNamedImage) {
navigate('/' + [
@@ -145,22 +163,44 @@ export function VisualChecksStickyHeader({currentNamedImage, visibleNamedImageId
{title}
{subtitle && {subtitle}}
;
diff --git a/lib/static/new-ui/components/RunTest/index.module.css b/lib/static/new-ui/components/RunTest/index.module.css
index 533071a9f..d26aa4c62 100644
--- a/lib/static/new-ui/components/RunTest/index.module.css
+++ b/lib/static/new-ui/components/RunTest/index.module.css
@@ -1,14 +1,3 @@
-.buttons-container {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-left: auto;
-}
-
-.divider {
- height: 24px;
-}
-
.retry-button {
composes: regular-button from global, action-button from global;
}
diff --git a/lib/static/new-ui/components/RunTest/index.tsx b/lib/static/new-ui/components/RunTest/index.tsx
index 648192a97..7f53624c7 100644
--- a/lib/static/new-ui/components/RunTest/index.tsx
+++ b/lib/static/new-ui/components/RunTest/index.tsx
@@ -1,66 +1,45 @@
-import React, {ReactNode} from 'react';
+import React, {forwardRef} from 'react';
import styles from './index.module.css';
-import {IconButton} from '@/static/new-ui/components/IconButton';
-import {Button, Divider, Icon, Spin} from '@gravity-ui/uikit';
-import {ArrowRotateRight, CirclePlay} from '@gravity-ui/icons';
+import {Button, ButtonProps, Icon, Spin} from '@gravity-ui/uikit';
+import {ArrowRotateRight} from '@gravity-ui/icons';
import {thunkRunTest} from '@/static/modules/actions';
-import {toggleTimeTravelPlayerVisibility} from '@/static/modules/actions/snapshots';
import {useDispatch, useSelector} from 'react-redux';
-import {isTimeTravelPlayerAvailable} from '../../features/suites/selectors';
import {RunTestsFeature} from '@/constants';
import {useAnalytics} from '../../hooks/useAnalytics';
import type {BrowserEntity} from '@/static/new-ui/types/store';
+import {isFeatureAvailable} from '../../utils/features';
interface RunTestProps {
- showPlayer?: boolean;
browser: BrowserEntity | null;
+ buttonText?: string | null;
+ buttonProps?: ButtonProps;
}
-export const RunTest = ({showPlayer = true, browser}: RunTestProps): ReactNode => {
- const isPlayerVisible = useSelector(state => state.ui.suitesPage.isSnapshotsPlayerVisible);
- const isRunning = useSelector(state => state.running);
+export const RunTestButton = forwardRef
- {showPlayerButton && (
- }
- onClick={onTogglePlayerVisibility}
- view='outlined'
- selected={isPlayerVisible}
- />
- )}
- {showDivider && }
- {showRetryButton && (
-
- )}
-
- );
-};
+RunTestButton.displayName = 'RunTestButton';
diff --git a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
index 7fefe09e0..498869877 100644
--- a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
+++ b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
@@ -1,11 +1,12 @@
-import {ArrowUturnCcwLeft, Check, Eye} from '@gravity-ui/icons';
+import {ArrowRightArrowLeft, ArrowUturnCcwLeft, Check, Eye} from '@gravity-ui/icons';
import {Button, Icon, SegmentedRadioGroup as RadioButton, Select, Flex} from '@gravity-ui/uikit';
import React, {ReactNode, createRef, useEffect, useRef} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {AssertViewResult} from '@/static/new-ui/components/AssertViewResult';
import {ImageEntity} from '@/static/new-ui/types/store';
-import {DiffModeId, DiffModes, EditScreensFeature, TestStatus} from '@/constants';
+import {DiffModeId, EditScreensFeature, TestStatus} from '@/constants';
+import {getAvailableDiffModes} from '@/static/new-ui/utils/diffModes';
import {
setDiffMode,
staticAccepterStageScreenshot,
@@ -109,17 +110,17 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
{isDiffModeSwitcherVisible && (
Attempts
@@ -45,7 +66,19 @@ export function TestControlPanel(props: TestControlPanelProps): ReactNode { /> ))}
+ {isPlayerAvailable && (
+ }
+ onClick={onTogglePlayerVisibility}
+ view='outlined'
+ selected={isPlayerVisible}
+ />
+ )}
+ {showDivider && }
+
+
-
)}
diff --git a/lib/static/new-ui/types/store.ts b/lib/static/new-ui/types/store.ts
index 88553ca9a..798abc450 100644
--- a/lib/static/new-ui/types/store.ts
+++ b/lib/static/new-ui/types/store.ts
@@ -1,5 +1,5 @@
import {CoordBounds} from 'looks-same';
-import {BrowserFeature, DiffModeId, Feature, TestStatus, ViewMode} from '@/constants';
+import {BrowserFeature, DiffModeId, Feature, TestStatus, ViewMode, TwoUpFitMode} from '@/constants';
import {
Attachment,
BrowserItem,
@@ -285,6 +285,7 @@ export interface State {
useMatchCaseFilter: boolean;
viewMode: ViewMode;
filteredBrowsers: BrowserItem[];
+ diffMode: DiffModeId;
};
loading: {
/** @note Determines whether the loading bar is visible */
@@ -332,6 +333,8 @@ export interface State {
sectionSizes: number[];
// Used to restore the previous sections sizes after collapsing the tree with a button
backupSectionSizes: number[];
+ is2UpDiffVisible: boolean;
+ twoUpFitMode: TwoUpFitMode;
};
staticImageAccepterToolbar: {
offset: Point;
diff --git a/lib/static/new-ui/utils/assert-view-status.tsx b/lib/static/new-ui/utils/assert-view-status.tsx
index 95fdf94d6..679cd13fe 100644
--- a/lib/static/new-ui/utils/assert-view-status.tsx
+++ b/lib/static/new-ui/utils/assert-view-status.tsx
@@ -1,12 +1,11 @@
import {ImageEntity, ImageEntityError} from '@/static/new-ui/types/store';
import {Icon} from '@gravity-ui/uikit';
import {
- ArrowRightArrowLeft,
- CircleCheck,
FileArrowUp, FileCheck,
FileExclamation,
FileLetterX,
FilePlus,
+ FileXmark,
SquareExclamation,
SquareXmark
} from '@gravity-ui/icons';
@@ -29,15 +28,15 @@ export const getAssertViewStatusIcon = (image: ImageEntity | null, color = false
switch (image.status) {
case TestStatus.SUCCESS:
- return