Send to screenshot service only the domains that are marked

components/report-window/screenshot-generator.scss

@@ -39,7 +39,7 @@ h2 {
 }
 
 .browser {
-    height: 8.667rem;
+    height: 9.267rem;
     font-weight: 800 !important;
     color: $disabled-grey !important;
     border: 1px solid $disabled-grey;

components/report-window/screenshot-generator.tsx

@@ -12,6 +12,7 @@ enum taskState {
 
 type Screenshot = {
     url: string;
+    thumb_url: string;
     domain: string;
     filename: string;
     found_headers: string[];
@@ -72,15 +73,19 @@ export default function ScreenshotGenerator({
     const [output, setOutput] = React.useState<any>({});
     const [currentAction, setCurrentAction] = React.useState<string>('');
     const [preview, setPreview] = React.useState<string>('');
+    const [lastPreview, setLastPreview] = React.useState<string>('');
 
     async function subscribeTask(path: string): Promise<screenshotTask> {
         let response = { status: taskState.WAITING };
+        let last_preview = '';
         while (response.status === taskState.WAITING || response.status === taskState.RUNNING) {
             await new Promise((resolve) => setTimeout(resolve, 1000));
             response = await (await pollTask(path)).json();
             setImages((response as screenshotTask)?.images);
             setCurrentAction((response as screenshotTask)?.current_action);
+            setLastPreview(last_preview);
             setPreview((response as screenshotTask)?.preview);
+            last_preview = (response as screenshotTask)?.preview;
             document.querySelector('.images')?.scrollTo({
                 top: document.querySelector('.images')?.scrollHeight,
                 behavior: 'smooth',
@@ -152,11 +157,17 @@ export default function ScreenshotGenerator({
                             className="sv_next_btn"
                             onClick={async () => {
                                 setMode('in_progress');
-                                const task = await createTask(visited_url, Object.keys(clusters));
+                                const task = await createTask(
+                                    visited_url,
+                                    Object.values(clusters)
+                                        .filter((cluster) => cluster.hasMarks())
+                                        .map((cluster) => cluster.id)
+                                );
                                 const urlArr = task.url.split('/');
                                 setTaskId(urlArr[urlArr.length - 1]);
                                 const response = await subscribeTask(task.url);
                                 setImages(response.images);
+                                setLastPreview(preview);
                                 setPreview(response.preview);
                                 setOutput(response);
                                 setRequestPath(response.zip_url);
@@ -190,13 +201,29 @@ export default function ScreenshotGenerator({
                         ) : null}
 
                         <div className="images">
+                            {mode === 'in_progress' ? (
+                                <div
+                                    className="browser"
+                                    style={{
+                                        backgroundImage: `url(${SS_URL}${preview})${
+                                            lastPreview ? `, url(${SS_URL}${lastPreview})` : ''
+                                        }`,
+                                    }}
+                                >
+                                    <div className="browser__header browser__header--in_progress">
+                                        <div className="browser__header--address-bar"></div>
+                                        <div className="browser__header--controls">· · ·</div>
+                                    </div>
+                                    <div className="browser__content"></div>
+                                </div>
+                            ) : null}
                             {images.map((screenshot) => {
                                 return (
                                     <div
                                         key={`${taskId}_${screenshot.url}`}
                                         className="browser browser--filled"
                                         style={{
-                                            backgroundImage: `url(${SS_URL}${screenshot.url})`,
+                                            backgroundImage: `url(${SS_URL}${screenshot.thumb_url})`,
                                         }}
                                     >
                                         <div className="browser__header">
@@ -209,21 +236,6 @@ export default function ScreenshotGenerator({
                                     </div>
                                 );
                             })}
-
-                            {mode === 'in_progress' ? (
-                                <div
-                                    className="browser"
-                                    style={{
-                                        backgroundImage: `url(${SS_URL}${preview})`,
-                                    }}
-                                >
-                                    <div className="browser__header browser__header--in_progress">
-                                        <div className="browser__header--address-bar"></div>
-                                        <div className="browser__header--controls">· · ·</div>
-                                    </div>
-                                    <div className="browser__content"></div>
-                                </div>
-                            ) : null}
                         </div>
                     </div>
                     <div className="buttons-container">