@syngrisi/syngrisi 2.2.1

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

@@ -0,0 +1,326 @@
+/* eslint-disable prefer-arrow-callback,react/jsx-one-expression-per-line */
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { ActionIcon, Button, Group, Kbd, Popover, Stack, Text, Tooltip } from '@mantine/core';
+import { IconChevronDown, IconZoomIn, IconZoomOut } from '@tabler/icons';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
+import { fabric } from 'fabric';
+import { MainView } from '../Canvas/mainView';
+
+interface Props {
+    view: string
+    mainView: MainView
+}
+
+export function ZoomToolbar(
+    {
+        view,
+        mainView,
+    }: Props,
+) {
+    const [zoomPercent, setZoomPercent] = useState(100);
+    const [openedZoomPopover, zoomPopoverHandler] = useDisclosure(false);
+
+    /**
+     * Calculates the biggest expected or actual image dimension
+     * for example: expectedImage {width: 100, height: 200}, actualImage: {width: 200, height: 300}
+     * the function will return ['actualImage', 'height' ]
+     */
+    const calculateMaxImagesDimensions = (): { imageName: string, dimension: string, value: number } => {
+        const data: any = [
+            { imageName: 'expectedImage', dimension: 'width', value: mainView.expectedImage.width },
+            { imageName: 'expectedImage', dimension: 'height', value: mainView.expectedImage.height },
+            { imageName: 'actualImage', dimension: 'width', value: mainView.actualImage.width },
+            { imageName: 'actualImage', dimension: 'height', value: mainView.actualImage.height },
+        ];
+        const biggestDimensionValue = Math.max(...data.map((x: any) => x.value));
+        return data.find((x: any) => x.value === biggestDimensionValue);
+    };
+
+    const zoomByPercent = (percent: number) => {
+        if (!mainView?.canvas) return;
+        // mainView.canvas.zoomToPoint(new fabric.Point(mainView.canvas.width / 2,
+        //     30), percent / 100);
+        //
+        mainView.canvas.zoomToPoint(
+            new fabric.Point(
+                // mainView.canvas.viewportTransform[4],
+                mainView.canvas.width / 2,
+                mainView.canvas.viewportTransform[5],
+            ),
+            percent / 100,
+        );
+        document.dispatchEvent(new Event('zoom'));
+        // mainView.canvas.renderAll(); console.log('render!!!');
+        setZoomPercent(() => percent);
+    };
+
+    const zoomByDelta = (delta: number) => {
+        document.dispatchEvent(new Event('zoom'));
+        let newPercent = Math.round(mainView.canvas.getZoom() * 100) + delta;
+        newPercent = newPercent < 2 ? 2 : newPercent;
+        newPercent = newPercent > 1000 ? 1000 : newPercent;
+        zoomByPercent(newPercent);
+    };
+
+    const zoomTo = (image: any, dimension: string) => {
+        // @ts-ignore
+        const ratio = mainView.canvas[dimension] / image[dimension];
+        const percent = ratio > 9 ? 900 : ratio * 100;
+        zoomByPercent(percent);
+        // mainView.canvas.renderAll(); console.log('render!!!');
+    };
+
+    const fitImageToCanvasIfNeeded = (imageName: string) => {
+        const image = mainView[imageName as keyof MainView];
+        const greatestDimension = (image.height > image.width) ? 'height' : 'width';
+
+        const anotherDimension = (greatestDimension === 'height') ? 'width' : 'height';
+
+        zoomTo(image, greatestDimension);
+
+        if (
+            mainView[imageName as keyof MainView][anotherDimension] * mainView.canvas.getZoom()
+            > mainView.canvas[anotherDimension]!
+        ) {
+            zoomTo(mainView[imageName as keyof MainView], anotherDimension);
+        }
+
+        setTimeout(() => {
+            mainView.panToCanvasWidthCenter(imageName);
+        }, 10);
+    };
+
+    const fitImageByWith = (imageName: string) => {
+        const image = mainView[imageName as keyof MainView];
+        zoomTo(image, 'width');
+
+        setTimeout(() => {
+            mainView.panToCanvasWidthCenter(imageName);
+        }, 10);
+    };
+
+    const resizeImageIfNeeded = () => {
+        const initPan = (imageName: string) => {
+            setTimeout(() => {
+                mainView.panToCanvasWidthCenter(imageName);
+            }, 10);
+        };
+
+        const greatestImage = calculateMaxImagesDimensions();
+        // small images
+        if (mainView.canvas[greatestImage.dimension] / greatestImage.value > 7) {
+            zoomByPercent(350);
+            initPan(greatestImage.imageName);
+            return;
+        }
+        // normal images (less than canvas)
+        if (greatestImage.value < mainView.canvas[greatestImage.dimension]) {
+            initPan(greatestImage.imageName);
+            return;
+        }
+
+        // large images
+        zoomTo(mainView[greatestImage.imageName as keyof MainView], greatestImage.dimension);
+
+        const anotherDimension = (greatestImage.dimension === 'height') ? 'width' : 'height';
+
+        if (
+            (mainView[greatestImage.imageName as keyof MainView][anotherDimension] * mainView.canvas.getZoom())
+            > mainView.canvas[anotherDimension]!
+        ) {
+            zoomTo(mainView[greatestImage.imageName as keyof MainView], anotherDimension);
+        }
+
+        initPan(greatestImage.imageName);
+    };
+
+    useEffect(function oneTime() {
+        const zoomEventHandler = () => setZoomPercent(window.mainView.canvas.getZoom() * 100);
+        document.addEventListener('zoom', zoomEventHandler, false);
+        return () => document.removeEventListener('zoom', zoomEventHandler, false);
+    }, []);
+
+    useEffect(
+        function initZoom() {
+            if (mainView) {
+                // zoomEvents();
+                resizeImageIfNeeded();
+            }
+        },
+        [mainView?.toString()],
+    );
+
+    useHotkeys([
+        // Zoom
+        ['Equal', () => zoomByDelta(15)],
+        ['NumpadAdd', () => zoomByDelta(15)],
+        ['Minus', () => zoomByDelta(-15)],
+        ['NumpadSubtract', () => zoomByDelta(-15)],
+        ['Digit9', () => fitImageByWith(`${view}Image`)],
+        ['Digit0', () => {
+            if (view === 'slider') {
+                fitImageToCanvasIfNeeded('actualImage');
+                return;
+            }
+            fitImageToCanvasIfNeeded(`${view}Image`);
+        }],
+    ]);
+
+    return (
+        <>
+
+            <Tooltip
+                label={
+                    (
+                        <Group noWrap>
+                            <Text>Zoom In</Text>
+                            <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>+</Kbd>
+                        </Group>
+                    )
+                }
+            >
+                <ActionIcon
+                    data-check="zoom-in"
+                    onClick={() => zoomByDelta(15)}
+                >
+                    <IconZoomIn size={24} stroke={1} />
+                </ActionIcon>
+            </Tooltip>
+
+            <Popover position="bottom" withArrow shadow="md" opened={openedZoomPopover}>
+                <Popover.Target>
+                    <Group spacing={0} position="center" onClick={zoomPopoverHandler.toggle} noWrap>
+                        <Text
+                            size="lg"
+                            weight={400}
+                            sx={{ minWidth: '3em' }}
+                        >
+                            {Math.round(zoomPercent)}%
+                        </Text>
+                        <ActionIcon ml={-10} data-check="open-zoom-dropdown">
+                            <IconChevronDown />
+                        </ActionIcon>
+                    </Group>
+                </Popover.Target>
+                <Popover.Dropdown p={0}>
+                    <Stack spacing={0} data-check="zoom-dropdown">
+                        <Button
+                            pl={8}
+                            pr={8}
+                            variant="subtle"
+                            onClick={() => {
+                                zoomByPercent(50);
+                                if (view === 'slider') {
+                                    mainView.panToCanvasWidthCenter('actualImage');
+                                    return;
+                                }
+                                mainView.panToCanvasWidthCenter(`${view}Image`);
+                                zoomPopoverHandler.close();
+                            }}
+                        >
+                            <Group position="apart" noWrap>50%</Group>
+                        </Button>
+                        <Button
+                            pl={8}
+                            pr={8}
+                            variant="subtle"
+                            onClick={() => {
+                                zoomByPercent(100);
+                                if (view === 'slider') {
+                                    mainView.panToCanvasWidthCenter('actualImage');
+                                    return;
+                                }
+                                mainView.panToCanvasWidthCenter(`${view}Image`);
+                                zoomPopoverHandler.close();
+                            }}
+                        >
+                            <Group position="apart" noWrap>100%</Group>
+                        </Button>
+                        <Button
+                            pl={8}
+                            pr={8}
+                            variant="subtle"
+                            onClick={() => {
+                                zoomByPercent(200);
+                                if (view === 'slider') {
+                                    mainView.panToCanvasWidthCenter('actualImage');
+                                    return;
+                                }
+                                mainView.panToCanvasWidthCenter(`${view}Image`);
+                                zoomPopoverHandler.close();
+                            }}
+                        >
+                            <Group position="apart" noWrap>200%</Group>
+                        </Button>
+                        <Button
+                            styles={{
+                                label: {
+                                    width: '100%',
+                                },
+                            }}
+                            // sx={{ width: '100%' }}
+                            pl={8}
+                            pr={8}
+                            variant="subtle"
+                            onClick={() => {
+                                zoomPopoverHandler.close();
+                                if (view === 'slider') {
+                                    fitImageByWith('actualImage');
+                                    return;
+                                }
+                                fitImageByWith(`${view}Image`);
+                            }}
+                        >
+                            <Group sx={{ width: '100%' }} position="apart" noWrap>
+                                Fit by width <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>9</Kbd>
+                            </Group>
+                        </Button>
+
+                        <Button
+                            styles={{
+                                label: {
+                                    width: '100%',
+                                },
+                            }}
+                            pl={8}
+                            pr={8}
+                            variant="subtle"
+                            onClick={() => {
+                                zoomPopoverHandler.close();
+
+                                if (view === 'slider') {
+                                    fitImageToCanvasIfNeeded('actualImage');
+                                    return;
+                                }
+                                fitImageToCanvasIfNeeded(`${view}Image`);
+                            }}
+                        >
+                            <Group sx={{ width: '100%' }} position="apart" noWrap>
+                                Fit to canvas <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>0</Kbd>
+                            </Group>
+                        </Button>
+                    </Stack>
+                </Popover.Dropdown>
+            </Popover>
+
+            <Tooltip
+                label={
+                    (
+                        <Group noWrap>
+                            <Text>Zoom out</Text>
+                            <Kbd sx={{ fontSize: 11, borderBottomWidth: 1 }}>-</Kbd>
+                        </Group>
+                    )
+                }
+            >
+                <ActionIcon
+                    data-check="zoom-out"
+                    onClick={() => zoomByDelta(-15)}
+                >
+                    <IconZoomOut size={24} stroke={1} />
+                </ActionIcon>
+            </Tooltip>
+        </>
+    );
+}

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

@@ -0,0 +1,167 @@
+/* eslint-disable no-console */
+import { fabric } from 'fabric';
+import { MainView } from '../Canvas/mainView';
+
+export interface IGroup {
+    minX: number
+    maxX: number
+    minY: number
+    maxY: number
+    imageData: any,
+    members: { x: number, y: number }[],
+}
+
+function getDiffImageData(image: any) {
+    const canvas = document.createElement('canvas');
+    canvas.width = image.width;
+    canvas.height = image.height;
+
+    const ctx = canvas.getContext('2d');
+
+    ctx!.drawImage(image, 0, 0);
+
+    const imgData = ctx!.getImageData(0, 0, image.width, image.height);
+    return imgData;
+}
+
+export function highlightDiff(mainView: MainView, highlightsGroups: IGroup[] | null, imageData: any)
+    : Promise<{ groups: IGroup[], diffImageData: any }> {
+    return new Promise((resolve) => {
+        // remove highlights
+        mainView.canvas.getObjects()
+            .filter((x) => x.name === 'highlight')
+            .forEach((x) => mainView.canvas.remove(x));
+
+        // get image data
+        const urlData = mainView.diffImage.toDataURL({});
+        const img = new Image();
+        img.src = urlData;
+
+        img.onload = () => {
+            console.time('get_image_data');
+            const diffImageData = imageData || getDiffImageData(img);
+            console.timeEnd('get_image_data');
+
+            console.time('process_data');
+
+            const createNewGroup = (x: number, y: number) => ({
+                minX: x,
+                maxX: x,
+                minY: y,
+                maxY: y,
+                members: [{ x, y }],
+            });
+            // get pixel color string from flat array of image data e.g.: '255,0,255,255'(rgba)
+            // eslint-disable-next-line max-len
+            const getPixel = (x: number, y: number, curCount: number): string => diffImageData.data.slice(curCount, curCount + 4).join();
+
+            const diffColor = '255,0,255,255';
+            const groups: IGroup[] = highlightsGroups || [];
+
+            console.time('group formation');
+            if (groups.length < 1) {
+                let cursorCount = 0;
+                for (let y = 0; y < diffImageData.height; y += 1) {
+                    for (let x = 0; x < diffImageData.width; x += 1) {
+                        // console.log(getPixel(x, y, cursorCount), diffColor);
+                        if (getPixel(x, y, cursorCount) === diffColor) {
+                            const suitableGroup = groups.find((group) => x >= group.minX - 1
+                                && x <= group.maxX + 1
+                                && y >= group.minY
+                                && y <= group.maxY + 1);
+
+                            if (!suitableGroup) {
+                                groups.push(createNewGroup(x, y));
+                            } else if (
+                                getPixel(x - 1, y, cursorCount) === diffColor // left
+                                || getPixel(x - 1, y - 1, cursorCount) === diffColor // top left
+                                || getPixel(x, y - 1, cursorCount) === diffColor // top
+                                || getPixel(x + 1, y - 1, cursorCount) === diffColor // top right
+                                || getPixel(x + 1, y, cursorCount) === diffColor //  right
+                                || getPixel(x + 1, y + 1, cursorCount) === diffColor // bottom right
+                                || getPixel(x, y + 1, cursorCount) === diffColor // bottom
+                                || getPixel(x - 1, y + 1, cursorCount) === diffColor // bottom left
+                            ) {
+                                suitableGroup.members.push({ x, y });
+                                if (x < suitableGroup.minX) suitableGroup.minX = x;
+                                if (x > suitableGroup.maxX) suitableGroup.maxX = x;
+                                if (y > suitableGroup.maxY) suitableGroup.maxY = y;
+                            }
+                        }
+
+                        cursorCount += 4;
+                    }
+                }
+            }
+            console.timeEnd('group formation');
+
+            console.time('group handling');
+            // eslint-disable-next-line no-restricted-syntax
+            for (const group of groups) {
+                // console.log(group);
+                const top = group.minY + (group.maxY - group.minY) / 2;
+                const left = group.minX + (group.maxX - group.minX) / 2;
+                const circle = new fabric.Circle({
+                    name: 'highlight',
+                    originX: 'center',
+                    originY: 'center',
+                    left,
+                    top,
+                    // radius: 5,
+                    data: { group },
+                    fill: '#D6336C',
+                    opacity: 0.3,
+                    strokeWidth: 0,
+                    selectable: false,
+                });
+                mainView.canvas.add(circle);
+            }
+            console.timeEnd('group handling');
+            console.timeEnd('process_data');
+
+            const highlightRemoving = () => {
+                mainView.canvas.getObjects()
+                    .filter((x) => x.name === 'highlight')
+                    .forEach((x) => mainView.canvas.remove(x));
+            };
+
+            // highlights animation
+            setTimeout(() => {
+                mainView.canvas.getObjects()
+                    .filter((x) => x.name === 'highlight')
+                    .forEach((circle) => {
+                        const suitableRadius = Math.max(
+                            circle.data.group.maxX - circle.data.group.minX,
+                            circle.data.group.maxY - circle.data.group.minY,
+                        );
+                        const radius = ((suitableRadius > 25 ? suitableRadius : 25) + Math.floor(Math.random() * 10))
+                            / mainView.canvas.getZoom();
+
+                        circle.animate('opacity', '0.5', {
+                            onChange: mainView.canvas.renderAll.bind(mainView.canvas),
+                            duration: 500,
+                        });
+
+                        circle.animate('radius', String(radius), {
+                            onChange: mainView.canvas.renderAll.bind(mainView.canvas),
+                            duration: 500,
+                            onComplete: () => {
+                                circle.animate('radius', '0.00', {
+                                    onChange: mainView.canvas.renderAll.bind(mainView.canvas),
+                                    // slowHighlight - for testing purposes
+                                    duration: window?.slowHighlight ? 15000 : 700,
+                                    onComplete: highlightRemoving,
+                                });
+                                circle.animate('opacity', '0.30', {
+                                    onChange: mainView.canvas.renderAll.bind(mainView.canvas),
+                                    duration: window?.slowHighlight ? 3000 : 700,
+                                });
+                            },
+                        });
+                    });
+                mainView.canvas.renderAll();
+            }, 0);
+            return resolve({ groups, diffImageData });
+        };
+    });
+}

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

@@ -0,0 +1,43 @@
+/* eslint-disable no-underscore-dangle */
+import { useEffect, useState } from 'react';
+import useInfinityScrollRelatedChecks from '../../../../../../../shared/hooks/useInfinityScrollRelatedChecks';
+import { useParams } from '../../../../../../hooks/useParams';
+
+export function useRelatedChecks(checkData: any) {
+    const { query } = useParams();
+    const [sortBy, setSortBy] = useState('createdDate');
+    const [sortOrder, setSortOrder] = useState('desc');
+    const [relatedFilter, setRelatedFilter] = useState({});
+
+    const filterObj: any = relatedFilter;
+
+    const relatedChecksQuery = useInfinityScrollRelatedChecks(
+        {
+            resourceName: 'checks',
+            filterObj,
+            infinityScrollLimit: 10,
+            sortBy: `${sortBy}:${sortOrder}`,
+            infinityUniqueKey: [checkData._id],
+        },
+    );
+
+    // eslint-disable-next-line prefer-arrow-callback
+    useEffect(function onFilterOrSortChange() {
+        if (query.app) filterObj.app = { $oid: query?.app || '' };
+        if (Object.keys(filterObj).length < 1) return;
+        relatedChecksQuery.infinityQuery.refetch();
+    }, [relatedFilter, sortBy, sortOrder, query.app]);
+    const { data } = relatedChecksQuery.infinityQuery;
+
+    const relatedFlatChecksData = data ? data.pages.flat().map((x: any) => x.results).flat() : [];
+    return {
+        sortBy,
+        setSortBy,
+        sortOrder,
+        setSortOrder,
+        relatedFlatChecksData,
+        relatedChecksQuery,
+        relatedFilter,
+        setRelatedFilter,
+    };
+}

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

@@ -0,0 +1,119 @@
+/* eslint-disable prefer-arrow-callback,no-nested-ternary,no-underscore-dangle,react/jsx-one-expression-per-line,max-len */
+import * as React from 'react';
+import {
+    ActionIcon,
+    Group,
+    LoadingOverlay,
+    Modal,
+    Stack,
+    Text,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { IconX } from '@tabler/icons';
+import { useParams } from '../../../../hooks/useParams';
+import { GenericService } from '../../../../../shared/services';
+import { errorMsg } from '../../../../../shared/utils';
+import { CheckDetails } from './CheckDetails/CheckDetails';
+
+export function CheckModal() {
+    const { query, setQuery } = useParams();
+    const [checkModalOpened, checkModalHandlers] = useDisclosure(false);
+
+    const [initCheckId, setInitCheckId] = useState<string>('');
+    useEffect(function onCheckIdChange() {
+        if (query.checkId && query.modalIsOpen === 'true') {
+            setInitCheckId(query.checkId);
+            checkModalHandlers.open();
+        }
+    }, [query.modalIsOpen]);
+
+    const closeHandler = () => {
+        checkModalHandlers.close();
+        setQuery({ checkId: undefined });
+        setQuery({ modalIsOpen: undefined });
+        setInitCheckId('');
+    };
+
+    const checkQuery = useQuery(
+        {
+            queryKey: [
+                'check_for_modal',
+                initCheckId,
+            ],
+            queryFn: () => GenericService.get(
+                'checks',
+                { _id: initCheckId },
+                {
+                    populate: 'baselineId,actualSnapshotId,diffId,test,suite,app',
+                    limit: '1',
+                },
+                'initial_check_for_check_details_modal',
+            ),
+            enabled: checkModalOpened,
+            refetchOnWindowFocus: false,
+            onError: (e) => {
+                errorMsg({ error: e });
+            },
+        },
+    );
+
+    const checkData = checkQuery?.data?.results[0]!;
+    return (
+        <Modal
+            className="modal"
+            opened={checkModalOpened}
+            centered
+            size="auto"
+            onClose={closeHandler}
+            sx={{ marginTop: -25 }}
+            styles={{ title: { width: '100%', paddingRight: 35 } }}
+            withCloseButton={false}
+        >
+            {/* Close Button */}
+            <ActionIcon
+                data-test="close-check-detail-icon"
+                style={{ position: 'fixed', right: 10, top: 10 }}
+                onClick={
+                    () => {
+                        closeHandler();
+                        checkModalHandlers.close();
+                    }
+                }
+            >
+                <IconX size={32} />
+            </ActionIcon>
+
+            {
+                checkQuery.isLoading && !checkData
+                    ? (
+                        <Stack mt={60}>
+                            <LoadingOverlay visible />
+                            <Text>Loading the data</Text>
+                        </Stack>
+                    )
+                    : checkQuery.isError
+                        ? (
+                            <Stack mt={40}>
+                                <Text color="red">Error load the check data</Text>
+                            </Stack>
+                        )
+                        : checkData
+                            ? (
+                                <CheckDetails
+                                    initCheckData={checkData}
+                                    checkQuery={checkQuery}
+                                    closeHandler={closeHandler}
+                                />
+                            )
+                            : (
+                                <Group mt={60}>
+                                    Empty check data
+                                </Group>
+                            )
+
+            }
+        </Modal>
+    );
+}