@syngrisi/syngrisi 2.2.1

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/RelatedChecks/RelatedChecksItems.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable no-underscore-dangle,indent */
+import * as React from 'react';
+import { RelatedCheckItem } from './RelatedCheckItem';
+
+interface Props {
+    infinityQuery: any
+    relatedActiveCheckId: any
+    setRelatedActiveCheckId: any
+}
+
+export function RelatedChecksItems({ infinityQuery, relatedActiveCheckId, setRelatedActiveCheckId }: Props) {
+    return infinityQuery.data
+        ? (infinityQuery.data.pages.map(
+                (page: any) => (
+                    page.results.map(
+                        // eslint-disable-next-line no-unused-vars
+                        (item: any, index: number) => (
+                            <RelatedCheckItem
+                                checkData={item}
+                                activeCheckId={relatedActiveCheckId}
+                                setRelatedActiveCheckId={setRelatedActiveCheckId}
+                                key={item._id}
+                                index={index}
+                            />
+                        ),
+                    )
+                ),
+            )
+        )
+        : [];
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/RelatedChecks/RelatedChecksSkeleton.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Group, Skeleton, Stack } from '@mantine/core';
+import { useInView } from 'react-intersection-observer';
+import { useEffect } from 'react';
+
+interface Props {
+    num: number
+    infinityQuery: any
+}
+
+export function RelatedChecksSkeleton({ num, infinityQuery }: Props) {
+    const { ref, inView } = useInView();
+
+    useEffect(() => {
+        if (inView && infinityQuery) {
+            infinityQuery.fetchNextPage();
+        }
+    }, [inView]);
+
+    return (
+        <Stack ref={ref}>
+            {
+                (infinityQuery === null || infinityQuery.hasNextPage)
+                && (
+                    Object.keys(new Array(num).fill('')).map(
+                        (x) => (
+                            <React.Fragment key={x}>
+                                <Group style={{ width: '100%' }} pl="xs" pr="md">
+                                    <Skeleton height={120} mt="sm" width="125px" radius="sm" />
+                                </Group>
+                            </React.Fragment>
+                        ),
+                    ))
+            }
+        </Stack>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Toolbar/HighlightButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ActionIcon, Group, Text, Tooltip } from '@mantine/core';
+import { IconBulb } from '@tabler/icons';
+import { useState } from 'react';
+import { highlightDiff, IGroup } from './highlightDiff';
+import { MainView } from '../Canvas/mainView';
+
+interface Props {
+    mainView: MainView,
+    disabled?: boolean
+}
+
+export function HighlightButton({ mainView, disabled = false }: Props) {
+    const [loadHighlights, setLoadHighlights] = useState(false);
+    const [highlightsGroups, setHighlightsGroups] = useState<IGroup[] | null>(null);
+    const [imageData, setImageData] = useState(null);
+    const label = disabled
+        ? (
+            <Group noWrap>
+                <Text>
+                    Difference highlighting, active in diff mode when
+                    the difference is less than 5%
+                </Text>
+            </Group>
+        )
+        : (
+            <Group noWrap>
+                <Text>Difference highlighting</Text>
+            </Group>
+        );
+    return (
+        <Tooltip
+            withinPortal
+            label={
+                label
+            }
+        >
+            <div>
+                <ActionIcon
+                    data-check="highlight-icon"
+                    disabled={disabled}
+                    loading={loadHighlights}
+                    onClick={async () => {
+                        setLoadHighlights(() => true);
+                        const { groups, diffImageData } = await highlightDiff(mainView, highlightsGroups, imageData);
+                        setImageData(() => diffImageData);
+                        setHighlightsGroups(() => groups);
+                        setLoadHighlights(() => false);
+                    }}
+                >
+                    <IconBulb size={24} stroke={1} />
+                </ActionIcon>
+            </div>
+        </Tooltip>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Toolbar/RegionsToolbar.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable prefer-arrow-callback */
+import * as React from 'react';
+import { ActionIcon, Group, Kbd, Stack, Text, Tooltip } from '@mantine/core';
+import { IconDeviceFloppy, IconShape, IconShapeOff } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import { useHotkeys } from '@mantine/hooks';
+import { MainView } from '../Canvas/mainView';
+import { log } from '../../../../../../../shared/utils/Logger';
+
+interface Props {
+    mainView: any
+    baselineId: string
+    view: string,
+}
+
+export function RegionsToolbar({ mainView, baselineId, view }: Props) {
+    const [visibleRegionRemoveButton, setVisibleRegionRemoveButton] = useState(false);
+
+    const regionsSelectionEvents = () => {
+        const handler = () => {
+            const els = mainView.canvas.getActiveObjects()
+                .filter((x: any) => x.name === 'ignore_rect');
+
+            if (els.length > 0) {
+                setVisibleRegionRemoveButton(() => true);
+            } else {
+                setVisibleRegionRemoveButton(() => false);
+            }
+        };
+
+        mainView.canvas.on(
+            {
+                'selection:cleared':
+                // eslint-disable-next-line no-unused-vars
+                    (e: any) => {
+                        log.debug('cleared selection');
+                        handler();
+                    },
+                'selection:updated':
+                // eslint-disable-next-line no-unused-vars
+                    (e: any) => {
+                        log.debug('update selection');
+                        handler();
+                    },
+                'selection:created':
+                // eslint-disable-next-line no-unused-vars
+                    (e: any) => {
+                        log.debug('create selection');
+                        handler();
+                    },
+            },
+        );
+    };
+    useHotkeys([
+        ['alt+S', () => {
+            MainView.sendIgnoreRegions(baselineId!, mainView.getRectData());
+        }],
+        ['Delete', () => mainView.removeActiveIgnoreRegions()],
+        ['Backspace', () => mainView.removeActiveIgnoreRegions()],
+    ]);
+
+    useEffect(function initView() {
+        if (mainView) {
+            regionsSelectionEvents();
+        }
+    }, [
+        mainView?.toString(),
+    ]);
+    return (
+        <>
+            <Tooltip
+                label={
+                    (
+                        <Group noWrap>
+                            <Text>Remove selected ignore regions</Text>
+                            <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>Del</Kbd>
+                            {' or '}
+                            <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>Backspace</Kbd>
+                        </Group>
+                    )
+                }
+            >
+                <ActionIcon
+                    data-check="remove-ignore-region"
+                    disabled={!visibleRegionRemoveButton}
+                    onClick={() => mainView.removeActiveIgnoreRegions()}
+                >
+                    <IconShapeOff size={24} stroke={1} />
+                </ActionIcon>
+            </Tooltip>
+
+            <Tooltip
+                multiline
+                withinPortal
+                label={
+                    (
+                        <Stack spacing={4}>
+                            <Group noWrap spacing={4}>
+                                <Text>Add ignore region</Text>
+                                <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>A</Kbd>
+                            </Group>
+                            {
+                                !baselineId && (
+                                    <Group noWrap spacing={4}>
+                                        <Text color="orange">&#9888;</Text>
+                                        <Text> First you need to accept this check</Text>
+                                    </Group>
+                                )
+                            }
+                        </Stack>
+                    )
+                }
+            >
+                <div>
+                    <ActionIcon
+                        data-check="add-ignore-region"
+                        disabled={(view === 'slider') || !baselineId}
+                        onClick={() => mainView.addIgnoreRegion({ name: 'ignore_rect', strokeWidth: 0 })}
+                    >
+                        <IconShape size={24} stroke={1} />
+                    </ActionIcon>
+                </div>
+            </Tooltip>
+
+            <Tooltip
+                withinPortal
+                label={
+                    (
+                        <Group>
+                            <Text>Save ignore Regions</Text>
+                            <Group align="left" spacing={4} noWrap>
+
+                                <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>Alt</Kbd>
+                                +
+                                <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>S</Kbd>
+                            </Group>
+                        </Group>
+                    )
+                }
+            >
+                <ActionIcon
+                    data-check="save-ignore-region"
+                    onClick={() => MainView.sendIgnoreRegions(baselineId!, mainView.getRectData())}
+                >
+                    <IconDeviceFloppy size={24} stroke={1} />
+                </ActionIcon>
+            </Tooltip>
+        </>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Toolbar/ScreenshotDetails.tsx

@@ -0,0 +1,137 @@
+/* eslint-disable */
+import * as React from 'react';
+import { useMemo } from 'react';
+import { Badge, Loader, Tooltip, Group, Text, createStyles } from '@mantine/core';
+import * as dateFns from 'date-fns';
+
+const useStyles = createStyles((theme) => ({
+    infoBadges: {
+        marginLeft: 8,
+        paddingLeft: 4,
+        paddingRight: 4,
+    },
+    labels: {
+        '@media (max-width: 1070px)': {
+            display: 'none',
+        },
+    }
+}));
+
+interface Props {
+    mainView: any
+    view: string
+    check: any
+}
+
+export function ScreenshotDetails({ mainView, view, check = {} }: Props) {
+    const { classes } = useStyles();
+
+    const checkResult = check.result ? JSON.parse(check.result) : null
+    let diffPercent = checkResult.misMatchPercentage ? (checkResult.misMatchPercentage) : ''
+    diffPercent = (
+        (diffPercent === '0.00' || diffPercent === '')
+        && (checkResult.rawMisMatchPercentage?.toString()?.length > 0)
+    ) ?
+        checkResult.rawMisMatchPercentage :
+        checkResult.misMatchPercentage;
+
+    const imageSize = useMemo(() => {
+        if (view === 'slider') return null;
+        if (mainView) {
+            const image = mainView[`${view}Image`];
+            if (view === 'diff' && !mainView?.diffImage) return null;
+            return (
+                <Tooltip
+                    withinPortal
+                    label={`Screenshot size: ${image.width}x${image.height}, click to open the image in a new tab`}
+                >
+                    <Badge color="blue" radius={'sm'} className={classes.infoBadges} data-check="image-size">
+                        <a
+                            href={image.getSrc()}
+                            target="_blank"
+                            style={{ color: 'inherit', textDecoration: 'inherit' }}
+                            rel="noreferrer"
+                        >
+                            {`${image.width}x${image.height}`}
+                        </a>
+                    </Badge>
+                </Tooltip>
+            );
+        }
+        return (
+            <Badge color="blue" radius={'sm'} className={classes.infoBadges}>
+                <Loader size="xs" color="blue" variant="dots" />
+            </Badge>
+        );
+    }, [mainView, view]);
+
+    const actualDate = check?.actualSnapshotId?.createdDate
+        ? dateFns.format(dateFns.parseISO(check?.actualSnapshotId?.createdDate), 'yyyy-MM-dd HH:mm:ss')
+        : ''
+    const baselineDate = check?.baselineId?.createdDate
+        ? dateFns.format(dateFns.parseISO(check?.baselineId?.createdDate), 'yyyy-MM-dd HH:mm:ss')
+        : '';
+
+    const createdDate = view === 'actual' ? actualDate : baselineDate
+
+    return (
+        <Group spacing="sm" noWrap>
+            {
+                view !== 'slider'
+                    ? (
+                        <>
+                            <Group spacing={0} noWrap>
+                                <Text size="sm" lineClamp={1} className={classes.labels} title="Image size">
+                                    Image Size:
+                                </Text>
+                                <Text size="sm">
+                                    {imageSize}
+                                </Text>
+                            </Group>
+
+                            <Group spacing={0} noWrap>
+                                <Text lineClamp={1} className={classes.labels} size="sm">
+                                    Date:
+                                </Text>
+                                <Tooltip label={`Image Date: ${createdDate}`} withinPortal>
+
+                                    <Badge color="blue" radius={'sm'} className={classes.infoBadges}
+                                           data-check="image-date">
+                                        {
+                                            createdDate
+                                        }
+                                    </Badge>
+                                </Tooltip>
+                            </Group>
+                            {
+                                view === 'diff' && (
+                                    <>
+                                        <Group spacing={0} noWrap>
+                                            <Text lineClamp={1} size="sm" className={classes.labels}>
+                                                Difference:
+                                            </Text>
+                                            <Tooltip label={`Images difference: ${diffPercent} %`} withinPortal>
+                                                <Badge
+                                                    color="blue"
+                                                    radius={'sm'}
+                                                    sx={{ maxWidth: 100 }}
+                                                    data-check="diff-percent"
+                                                    className={classes.infoBadges}>
+                                                    {diffPercent}%
+                                                </Badge>
+                                            </Tooltip>
+                                        </Group>
+                                    </>
+                                )
+                            }
+                        </>
+                    )
+                    : (
+                        <>
+                        </>
+                    )
+            }
+
+        </Group>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Toolbar/Toolbar.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable prefer-arrow-callback,react-hooks/exhaustive-deps */
+import * as React from 'react';
+import { Divider, Group } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { ScreenshotDetails } from './ScreenshotDetails';
+import { ZoomToolbar } from './ZoomToolbar';
+import { MainView } from '../Canvas/mainView';
+import { ViewSegmentedControl } from './ViewSegmentedControl';
+import { HighlightButton } from './HighlightButton';
+import { RegionsToolbar } from './RegionsToolbar';
+import { AcceptButton } from '../../AcceptButton';
+import { RemoveButton } from '../../RemoveButton';
+import { useParams } from '../../../../../../hooks/useParams';
+
+interface Props {
+    mainView: any
+    classes: any
+    curCheck: any
+    baselineId: string
+    initCheckData: any
+    checkQuery: any
+    closeHandler: any
+}
+
+export function Toolbar(
+    {
+        mainView,
+        classes,
+        curCheck,
+        baselineId,
+        initCheckData,
+        checkQuery,
+        closeHandler,
+    }: Props,
+) {
+    const { query } = useParams();
+    const [view, setView] = useState('actual');
+
+    useEffect(function initView() {
+        if (mainView?.diffImage) {
+            setView(() => 'diff');
+            return;
+        }
+        setView(() => 'actual');
+    }, [mainView?.diffImage, query.checkId]);
+
+    useEffect(function switchView() {
+        if (mainView) {
+            mainView.switchView(view);
+        }
+    }, [view]);
+
+    return (
+        <Group position="apart" noWrap data-check="toolbar">
+            <ScreenshotDetails mainView={mainView} check={curCheck} view={view} />
+            <Group spacing="sm" noWrap>
+                <Group
+                    spacing={4}
+                    className={classes.zoomButtonsWrapper}
+                    position="center"
+                    align="center"
+                    noWrap
+                >
+                    <ZoomToolbar mainView={mainView as MainView} view={view} />
+                </Group>
+
+                <Divider orientation="vertical" />
+
+                <ViewSegmentedControl view={view} setView={setView} currentCheck={curCheck} />
+
+                <Divider orientation="vertical" />
+
+                <HighlightButton
+                    mainView={mainView as MainView}
+                    disabled={!(view === 'diff' && parseFloat(curCheck?.parsedResult?.rawMisMatchPercentage) < 5)}
+                />
+                <Divider orientation="vertical" />
+
+                <RegionsToolbar mainView={mainView} baselineId={baselineId} view={view} />
+
+                <Divider orientation="vertical" />
+                <AcceptButton
+                    check={curCheck}
+                    initCheck={initCheckData}
+                    checksQuery={checkQuery}
+                    size={24}
+                    testUpdateQuery={checkQuery}
+                />
+
+                <RemoveButton
+                    check={curCheck}
+                    initCheck={initCheckData}
+                    testUpdateQuery={checkQuery}
+                    size={30}
+                    closeHandler={closeHandler}
+                />
+            </Group>
+        </Group>
+
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Toolbar/ViewSegmentedControl.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { Group, Kbd, SegmentedControl, Text, Tooltip, createStyles } from '@mantine/core';
+import { IconArrowsExchange2, IconSquareHalf, IconSquareLetterA, IconSquareLetterE } from '@tabler/icons';
+import { useHotkeys } from '@mantine/hooks';
+
+const useStyles = createStyles((theme) => ({
+    labelIcon: {
+        minWidth: 18,
+    },
+    labelText: {
+        [`@media (max-width: ${theme.breakpoints.lg}px)`]: {
+            display: 'none',
+        },
+    },
+}));
+
+interface Props {
+    view: string
+    setView: any
+    currentCheck: any
+}
+
+export function ViewSegmentedControl({ view, setView, currentCheck }: Props) {
+    const { classes } = useStyles();
+
+    useHotkeys([
+        ['Digit1', () => setView('expected')],
+        ['Digit2', () => setView('actual')],
+        ['Digit3', () => {
+            if (currentCheck?.diffId?.filename) setView('diff');
+        }],
+        ['Digit4', () => {
+            if (currentCheck?.diffId?.filename) setView('slider');
+        }],
+    ]);
+
+    const viewSegmentData = [
+        {
+            label: (
+                <Tooltip
+                    withinPortal
+                    label={
+                        (
+                            <Group noWrap>
+                                <Text>Switch to Expected View</Text>
+                                <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>1</Kbd>
+                            </Group>
+                        )
+                    }
+                >
+                    <Group position="left" spacing={4} noWrap data-check="expected-view">
+                        <IconSquareLetterE stroke={1} className={classes.labelIcon} />
+                        <Text lineClamp={1} className={classes.labelText}>
+                            Expected
+                        </Text>
+                    </Group>
+                </Tooltip>
+            ),
+            value: 'expected',
+            disabled: currentCheck?.status[0] === 'new',
+        },
+        {
+            label: (
+                <Tooltip
+                    withinPortal
+                    label={
+                        (
+                            <Group noWrap>
+                                <Text>Switch to Actual View</Text>
+                                <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>2</Kbd>
+                            </Group>
+                        )
+                    }
+                >
+                    <Group position="left" spacing={4} noWrap data-check="actual-view">
+                        <IconSquareLetterA stroke={1} className={classes.labelIcon} />
+                        <Text lineClamp={1} className={classes.labelText}>
+                            Actual
+                        </Text>
+                    </Group>
+                </Tooltip>
+            ),
+            value: 'actual',
+        },
+        {
+            label:
+                (
+                    <Tooltip
+                        withinPortal
+                        label={
+                            (
+                                <Group noWrap>
+                                    <Text>Switch to Difference View</Text>
+                                    <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>3</Kbd>
+                                </Group>
+                            )
+                        }
+                    >
+                        <Group position="left" spacing={4} noWrap data-check="diff-view">
+                            <IconArrowsExchange2 stroke={1} className={classes.labelIcon} />
+                            <Text lineClamp={1} className={classes.labelText}>
+                                Difference
+                            </Text>
+                        </Group>
+                    </Tooltip>
+                ),
+            value: 'diff',
+            disabled: !currentCheck?.diffId?.filename,
+        },
+        {
+            label:
+                (
+                    <Tooltip
+                        withinPortal
+                        label={
+                            (
+                                <Group noWrap>
+                                    <Text>Switch to Slider View</Text>
+                                    <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>4</Kbd>
+                                </Group>
+                            )
+                        }
+                    >
+                        <Group position="left" spacing={4} noWrap data-check="slider-view">
+                            <IconSquareHalf stroke={1} className={classes.labelIcon} />
+                            <Text lineClamp={1} className={classes.labelText}>
+                                Slider
+                            </Text>
+                        </Group>
+                    </Tooltip>
+                ),
+            value: 'slider',
+            disabled: !currentCheck?.diffId?.filename,
+        },
+    ];
+
+    return (
+        <SegmentedControl
+            data-check="view-segment"
+            sx={{ minWidth: 0, minHeight: 0 }}
+            styles={
+                {
+                    label: {
+                        minWidth: 0,
+                        minHeight: 0,
+                        // overflow: 'hidden',
+                        fontSize: 'calc(0.1em + 0.55vw)',
+                        maxWidth: '7vw',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    },
+                }
+            }
+            value={view}
+            onChange={setView}
+            data={viewSegmentData}
+        />
+    );
+}