gpu-trace-perf 1.6.0

Plays a collection of GPU traces under different environments to evaluate driver changes on performance
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

<!-- Common scripts for CI dashboard -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="module">
    import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5.3.8/dist/photoswipe-lightbox.esm.js'
    import PhotoSwipe from 'https://cdn.jsdelivr.net/npm/photoswipe@5.3.8/dist/photoswipe.esm.js'

    const lightbox = new PhotoSwipeLightbox({
        gallery: `body`,
        children: 'a[id^="gallery-img"]',
        pswpModule: PhotoSwipe
    });
    lightbox.init();

    // Magnifying glass functionality
    document.addEventListener('DOMContentLoaded', function () {
        const magnifierContainer = document.querySelector('.magnifier-container');
        const magOriginal = document.getElementById('mag-original');
        const magDiff = document.getElementById('mag-diff');
        const magSecond = document.getElementById('mag-second');
        let ZOOM_LEVEL = 3.5;
        const MIN_ZOOM = 3;
        const MAX_ZOOM = 25;
        const ZOOM_STEP = 0.5;
        let isImagesSwapped = false;
        let activePreviewImg = null;
        let activeOriginalUrl = null;
        let activeDiffUrl = null;
        let activeRunAComment = null;
        let activeRunBComment = null;

        function getSecondImageUrl(originalUrl) {
            return originalUrl.replace(/_0\./, '_1.');
        }

        function updateMagnifier(e, container, originalUrl, original2Url, diffUrl) {
            const rect = container.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const xPercent = x / rect.width;
            const yPercent = y / rect.height;

            // Show magnifier
            magnifierContainer.style.display = 'block';

            // Update images and their positions
            [magOriginal, magDiff, magSecond].forEach((img, idx) => {
                let url;
                if (idx === 0) {
                    url = isImagesSwapped ? original2Url : originalUrl;
                } else if (idx === 1) {
                    url = diffUrl;
                } else {
                    url = isImagesSwapped ? originalUrl : original2Url;
                }
                img.src = url;
                img.style.width = (rect.width * ZOOM_LEVEL) + 'px';
                img.style.height = (rect.height * ZOOM_LEVEL) + 'px';
                const magnifierView = img.closest('.magnifier-view');
                const containerWidth = magnifierView.clientWidth;
                const containerHeight = magnifierView.clientHeight / 3;
                img.style.left = `-${xPercent * (rect.width * ZOOM_LEVEL - containerWidth)}px`;
                img.style.top = `-${yPercent * (rect.height * ZOOM_LEVEL - containerHeight)}px`;
            });

            // Update labels with run comments and zoom level
            document.querySelectorAll('.magnifier-label').forEach((label, idx) => {
                let baseText;
                if (idx === 0) {
                    baseText = isImagesSwapped ? `Run B${activeRunBComment ? ` - ${activeRunBComment}` : ''}` : `Run A${activeRunAComment ? ` - ${activeRunAComment}` : ''}`;
                } else if (idx === 1) {
                    baseText = 'Diff';
                } else {
                    baseText = isImagesSwapped ? `Run A${activeRunAComment ? ` - ${activeRunAComment}` : ''}` : `Run B${activeRunBComment ? ` - ${activeRunBComment}` : ''}`;
                }
                label.textContent = `${baseText} - ${ZOOM_LEVEL}x`;
            });
        }

        // Handle zoom with Ctrl+mousewheel
        function handleZoom(e) {
            if (e.ctrlKey) {
                e.preventDefault(); // Prevent page zoom
                const delta = Math.sign(e.deltaY) * -ZOOM_STEP;
                const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, ZOOM_LEVEL + delta));

                if (newZoom !== ZOOM_LEVEL) {
                    ZOOM_LEVEL = newZoom;
                    // Trigger mousemove to update the display
                    const mousemoveEvent = new MouseEvent('mousemove', {
                        clientX: e.clientX,
                        clientY: e.clientY,
                        bubbles: true
                    });
                    e.target.dispatchEvent(mousemoveEvent);
                }
            }
        }

        // Add mouse events to image containers
        document.querySelectorAll('[id^="capture-"]').forEach(container => {
            const originalUrl = container.dataset.original;
            const original2Url = container.dataset.original2;
            const diffUrl = container.dataset.diff;
            const runAComment = container.dataset.runAComment;
            const runBComment = container.dataset.runBComment;

            if (originalUrl && diffUrl != "None") {
                const previewImg = container.querySelector('.preview-image');

                previewImg.addEventListener('mousemove', (e) => {
                    activePreviewImg = previewImg;
                    activeOriginalUrl = originalUrl;
                    activeDiffUrl = diffUrl;
                    activeRunAComment = runAComment;
                    activeRunBComment = runBComment;
                    updateMagnifier(e, previewImg, originalUrl, original2Url, diffUrl);
                });

                previewImg.addEventListener('wheel', handleZoom);

                previewImg.addEventListener('mouseleave', () => {
                    magnifierContainer.style.display = 'none';
                    activePreviewImg = null;
                    activeOriginalUrl = null;
                    activeDiffUrl = null;
                    activeRunAComment = null;
                    activeRunBComment = null;
                });
            }
        });

        // Global space key handler for image swapping
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && magnifierContainer.style.display === 'block' && activePreviewImg) {
                e.preventDefault(); // Prevent page scroll
                isImagesSwapped = !isImagesSwapped;
                // Trigger mousemove to update the display
                const mousemoveEvent = new MouseEvent('mousemove', {
                    clientX: e.clientX,
                    clientY: e.clientY,
                    bubbles: true
                });
                activePreviewImg.dispatchEvent(mousemoveEvent);
            }
        });
    });
</script>