vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into rm-actions

Browse Source
This commit is contained in:
Rohit
2025-11-12 22:07:18 +05:30
committed by GitHub
parent 23e20cd253 2b85a048f6
commit 3ddce1a8d1
11 changed files with 315 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
maxun-core/src/interpret.ts
View File

@@ -1246,9 +1246,9 @@ export default class Interpreter extends EventEmitter {
if (checkLimit()) return allResults;
let loadMoreCounter = 0;
// let previousResultCount = allResults.length;
// let noNewItemsCounter = 0;
// const MAX_NO_NEW_ITEMS = 2;
let previousResultCount = allResults.length;
let noNewItemsCounter = 0;
const MAX_NO_NEW_ITEMS = 5;
while (true) {
if (this.isAborted) {
@@ -1332,21 +1332,21 @@ export default class Interpreter extends EventEmitter {
await scrapeCurrentPage();
// const currentResultCount = allResults.length;
// const newItemsAdded = currentResultCount > previousResultCount;
const currentResultCount = allResults.length;
const newItemsAdded = currentResultCount > previousResultCount;
// if (!newItemsAdded) {
// noNewItemsCounter++;
// debugLog(`No new items added after click (${noNewItemsCounter}/${MAX_NO_NEW_ITEMS})`);
if (!newItemsAdded) {
noNewItemsCounter++;
debugLog(`No new items added after click (${noNewItemsCounter}/${MAX_NO_NEW_ITEMS})`);
// if (noNewItemsCounter >= MAX_NO_NEW_ITEMS) {
// debugLog(`Stopping after ${MAX_NO_NEW_ITEMS} clicks with no new items`);
// return allResults;
// }
// } else {
// noNewItemsCounter = 0;
// previousResultCount = currentResultCount;
// }
if (noNewItemsCounter >= MAX_NO_NEW_ITEMS) {
debugLog(`Stopping after ${MAX_NO_NEW_ITEMS} clicks with no new items`);
return allResults;
}
} else {
noNewItemsCounter = 0;
previousResultCount = currentResultCount;
}
if (checkLimit()) return allResults;

26
maxun-core/src/preprocessor.ts
View File

@@ -55,7 +55,7 @@ export default class Preprocessor {
*/
static getParams(workflow: WorkflowFile): string[] {
const getParamsRecurse = (object: any): string[] => {
if (typeof object === 'object') {
if (typeof object === 'object' && object !== null) {
// Recursion base case
if (object.$param) {
return [object.$param];
@@ -141,14 +141,24 @@ export default class Preprocessor {
}
const out = object;
// for every key (child) of the object
Object.keys(object!).forEach((key) => {
// if the field has only one key, which is `k`
if (Object.keys((<any>object)[key]).length === 1 && (<any>object)[key][k]) {
// process the current special tag (init param, hydrate regex...)
(<any>out)[key] = f((<any>object)[key][k]);
} else {
initSpecialRecurse((<any>object)[key], k, f);
const childValue = (<any>object)[key];
if (!childValue || typeof childValue !== 'object') {
return;
}
try {
const childKeys = Object.keys(childValue);
if (childKeys.length === 1 && childValue[k]) {
(<any>out)[key] = f(childValue[k]);
} else {
initSpecialRecurse(childValue, k, f);
}
} catch (error) {
console.warn(`Error processing key "${key}" in initSpecialRecurse:`, error);
}
});
return out;

78
server/src/browser-management/classes/RemoteBrowser.ts
View File

@@ -201,6 +201,11 @@ export class RemoteBrowser {
private networkRequestTimeout: NodeJS.Timeout | null = null;
private pendingNetworkRequests: string[] = [];
private readonly NETWORK_QUIET_PERIOD = 8000;
private readonly INITIAL_LOAD_QUIET_PERIOD = 3000;
private networkWaitStartTime: number = 0;
private progressInterval: NodeJS.Timeout | null = null;
private hasShownInitialLoader: boolean = false;
private isInitialLoadInProgress: boolean = false;
/**
* Initializes a new instances of the {@link Generator} and {@link WorkflowInterpreter} classes and
@@ -432,17 +437,19 @@ export class RemoteBrowser {
if (!this.currentPage) return;
this.currentPage.on("domcontentloaded", async () => {
logger.info("DOM content loaded - triggering snapshot");
await this.makeAndEmitDOMSnapshot();
if (!this.isInitialLoadInProgress) {
logger.info("DOM content loaded - triggering snapshot");
await this.makeAndEmitDOMSnapshot();
}
});
this.currentPage.on("response", async (response) => {
const url = response.url();
if (
response.request().resourceType() === "document" ||
url.includes("api/") ||
url.includes("ajax")
) {
const isDocumentRequest = response.request().resourceType() === "document";
if (!this.hasShownInitialLoader && isDocumentRequest && !url.includes("about:blank")) {
this.hasShownInitialLoader = true;
this.isInitialLoadInProgress = true;
this.pendingNetworkRequests.push(url);
if (this.networkRequestTimeout) {
@@ -450,24 +457,54 @@ export class RemoteBrowser {
this.networkRequestTimeout = null;
}
if (this.progressInterval) {
clearInterval(this.progressInterval);
this.progressInterval = null;
}
this.networkWaitStartTime = Date.now();
this.progressInterval = setInterval(() => {
const elapsed = Date.now() - this.networkWaitStartTime;
const navigationProgress = Math.min((elapsed / this.INITIAL_LOAD_QUIET_PERIOD) * 40, 35);
const totalProgress = 60 + navigationProgress;
this.emitLoadingProgress(totalProgress, this.pendingNetworkRequests.length);
}, 500);
logger.debug(
`Network request received: ${url}. Total pending: ${this.pendingNetworkRequests.length}`
`Initial load network request received: ${url}. Using ${this.INITIAL_LOAD_QUIET_PERIOD}ms quiet period`
);
this.networkRequestTimeout = setTimeout(async () => {
logger.info(
`Network quiet period reached. Processing ${this.pendingNetworkRequests.length} requests`
`Initial load network quiet period reached (${this.INITIAL_LOAD_QUIET_PERIOD}ms)`
);
if (this.progressInterval) {
clearInterval(this.progressInterval);
this.progressInterval = null;
}
this.emitLoadingProgress(100, this.pendingNetworkRequests.length);
this.pendingNetworkRequests = [];
this.networkRequestTimeout = null;
this.isInitialLoadInProgress = false;
await this.makeAndEmitDOMSnapshot();
}, this.NETWORK_QUIET_PERIOD);
}, this.INITIAL_LOAD_QUIET_PERIOD);
}
});
}
private emitLoadingProgress(progress: number, pendingRequests: number): void {
this.socket.emit("domLoadingProgress", {
progress: Math.round(progress),
pendingRequests,
userId: this.userId,
timestamp: Date.now(),
});
}
private async setupPageEventListeners(page: Page) {
page.on('framenavigated', async (frame) => {
if (frame === page.mainFrame()) {
@@ -521,7 +558,13 @@ export class RemoteBrowser {
const MAX_RETRIES = 3;
let retryCount = 0;
let success = false;
this.socket.emit("dom-snapshot-loading", {
userId: this.userId,
timestamp: Date.now(),
});
this.emitLoadingProgress(0, 0);
while (!success && retryCount < MAX_RETRIES) {
try {
this.browser = <Browser>(await chromium.launch({
@@ -545,7 +588,9 @@ export class RemoteBrowser {
if (!this.browser || this.browser.isConnected() === false) {
throw new Error('Browser failed to launch or is not connected');
}
this.emitLoadingProgress(20, 0);
const proxyConfig = await getDecryptedProxyConfig(userId);
let proxyOptions: { server: string, username?: string, password?: string } = { server: '' };
@@ -623,6 +668,8 @@ export class RemoteBrowser {
this.currentPage = await this.context.newPage();
this.emitLoadingProgress(40, 0);
await this.setupPageEventListeners(this.currentPage);
const viewportSize = await this.currentPage.viewportSize();
@@ -645,7 +692,9 @@ export class RemoteBrowser {
// Still need to set up the CDP session even if blocker fails
this.client = await this.currentPage.context().newCDPSession(this.currentPage);
}
this.emitLoadingProgress(60, 0);
success = true;
logger.log('debug', `Browser initialized successfully for user ${userId}`);
} catch (error: any) {
@@ -1521,9 +1570,6 @@ export class RemoteBrowser {
this.isDOMStreamingActive = true;
logger.info("DOM streaming started successfully");
// Initial DOM snapshot
await this.makeAndEmitDOMSnapshot();
this.setupScrollEventListener();
this.setupPageChangeListeners();
} catch (error) {

70
server/src/workflow-management/classes/Interpreter.ts
View File

@@ -116,6 +116,16 @@ export class WorkflowInterpreter {
*/
private currentScrapeListIndex: number = 0;
/**
* Track action counts to generate unique names
*/
private actionCounts: Record<string, number> = {};
/**
* Track used action names to prevent duplicates
*/
private usedActionNames: Set<string> = new Set();
/**
* Current run ID for real-time persistence
*/
@@ -379,6 +389,8 @@ export class WorkflowInterpreter {
};
this.binaryData = [];
this.currentScrapeListIndex = 0;
this.actionCounts = {};
this.usedActionNames = new Set();
this.currentRunId = null;
this.persistenceBuffer = [];
this.persistenceInProgress = false;
@@ -394,6 +406,43 @@ export class WorkflowInterpreter {
logger.log('debug', `Set run ID for real-time persistence: ${runId}`);
};
/**
* Generates a unique action name for data storage
* @param actionType The type of action (scrapeList, scrapeSchema, etc.)
* @param providedName Optional name provided by the action
* @returns A unique action name
*/
private getUniqueActionName = (actionType: string, providedName?: string | null): string => {
if (providedName && providedName.trim() !== '' && !this.usedActionNames.has(providedName)) {
this.usedActionNames.add(providedName);
return providedName;
}
if (!this.actionCounts[actionType]) {
this.actionCounts[actionType] = 0;
}
let uniqueName: string;
let counter = this.actionCounts[actionType];
do {
counter++;
if (actionType === 'scrapeList') {
uniqueName = `List ${counter}`;
} else if (actionType === 'scrapeSchema') {
uniqueName = `Text ${counter}`;
} else if (actionType === 'screenshot') {
uniqueName = `Screenshot ${counter}`;
} else {
uniqueName = `${actionType} ${counter}`;
}
} while (this.usedActionNames.has(uniqueName));
this.actionCounts[actionType] = counter;
this.usedActionNames.add(uniqueName);
return uniqueName;
};
/**
* Persists extracted data to database with intelligent batching for performance
* Falls back to immediate persistence for critical operations
@@ -525,20 +574,8 @@ export class WorkflowInterpreter {
}
let actionName = this.currentActionName || "";
if (!actionName) {
if (!Array.isArray(data) && Object.keys(data).length === 1) {
const soleKey = Object.keys(data)[0];
const soleValue = data[soleKey];
if (Array.isArray(soleValue) || typeof soleValue === "object") {
actionName = soleKey;
data = soleValue;
}
}
}
if (!actionName) {
actionName = "Unnamed Action";
if (typeKey === "scrapeList") {
actionName = this.getUniqueActionName(typeKey, this.currentActionName);
}
const flattened = Array.isArray(data)
@@ -570,9 +607,10 @@ export class WorkflowInterpreter {
const { name, data, mimeType } = payload;
const base64Data = data.toString("base64");
const uniqueName = this.getUniqueActionName('screenshot', name);
const binaryItem = {
name,
name: uniqueName,
mimeType,
data: base64Data
};
@@ -582,7 +620,7 @@ export class WorkflowInterpreter {
await this.persistBinaryDataToDatabase(binaryItem);
this.socket.emit("binaryCallback", {
name,
name: uniqueName,
data: base64Data,
mimeType
});

4
src/components/browser/BrowserContent.tsx
View File

@@ -13,7 +13,7 @@ import {
export const BrowserContent = () => {
const { socket } = useSocketStore();
const [tabs, setTabs] = useState<string[]>(["current"]);
const [tabs, setTabs] = useState<string[]>(["Loading..."]);
const [tabIndex, setTabIndex] = React.useState(0);
const [showOutputData, setShowOutputData] = useState(false);
const { browserWidth } = useBrowserDimensionsStore();
@@ -125,7 +125,7 @@ export const BrowserContent = () => {
useEffect(() => {
getCurrentTabs()
.then((response) => {
if (response) {
if (response && response.length > 0) {
setTabs(response);
}
})

182
src/components/browser/BrowserWindow.tsx
View File

@@ -1,8 +1,6 @@
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { useSocketStore } from '../../context/socket';
import { Button } from '@mui/material';
import Canvas from "../recorder/Canvas";
import { Highlighter } from "../recorder/Highlighter";
import { GenericModal } from '../ui/GenericModal';
import { useActionContext } from '../../context/browserActions';
import { useBrowserSteps, TextStep, ListStep } from '../../context/browserSteps';
@@ -38,12 +36,6 @@ interface AttributeOption {
value: string;
}
interface ScreencastData {
image: string;
userId: string;
viewport?: ViewportInfo | null;
}
interface ViewportInfo {
width: number;
height: number;
@@ -146,8 +138,6 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
export const BrowserWindow = () => {
const { t } = useTranslation();
const { browserWidth, browserHeight } = useBrowserDimensionsStore();
const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
const [screenShot, setScreenShot] = useState<string>("");
const [highlighterData, setHighlighterData] = useState<{
rect: DOMRect;
selector: string;
@@ -1174,16 +1164,31 @@ export const BrowserWindow = () => {
undefined,
false
);
if (pendingNotification) {
notify(pendingNotification.type, pendingNotification.message);
setPendingNotification(null);
}
} else {
console.warn(`Failed to extract any fields from list selector: ${listSelector}`);
setListSelector(null);
setFields({});
setCachedListSelector(null);
setCachedChildSelectors([]);
setCurrentListId(null);
setInitialAutoFieldIds(new Set());
setPendingNotification(null);
notify(
"error",
"The list you have selected is not valid. Please reselect it."
);
}
} catch (error) {
console.error("Error during child selector caching:", error);
} finally {
setIsCachingChildSelectors(false);
if (pendingNotification) {
notify(pendingNotification.type, pendingNotification.message);
setPendingNotification(null);
}
}
}, 100);
} else {
@@ -1303,17 +1308,6 @@ export const BrowserWindow = () => {
}, []);
const onMouseMove = (e: MouseEvent) => {
if (canvasRef && canvasRef.current && highlighterData) {
const canvasRect = canvasRef.current.getBoundingClientRect();
if (
e.pageX < canvasRect.left
|| e.pageX > canvasRect.right
|| e.pageY < canvasRect.top
|| e.pageY > canvasRect.bottom
) {
setHighlighterData(null);
}
}
};
const resetListState = useCallback(() => {
@@ -1331,35 +1325,15 @@ export const BrowserWindow = () => {
}
}, [getList, resetListState]);
const screencastHandler = useCallback((data: string | ScreencastData) => {
if (typeof data === 'string') {
setScreenShot(data);
} else if (data && typeof data === 'object' && 'image' in data) {
if (!data.userId || data.userId === user?.id) {
setScreenShot(data.image);
if (data.viewport) {
setViewportInfo(data.viewport);
}
}
}
}, [user?.id]);
useEffect(() => {
if (socket) {
socket.on("screencast", screencastHandler);
socket.on("domcast", rrwebSnapshotHandler);
socket.on("dom-mode-enabled", domModeHandler);
socket.on("dom-mode-error", domModeErrorHandler);
}
if (canvasRef?.current && !isDOMMode && screenShot) {
drawImage(screenShot, canvasRef.current);
}
return () => {
if (socket) {
socket.off("screencast", screencastHandler);
socket.off("domcast", rrwebSnapshotHandler);
socket.off("dom-mode-enabled", domModeHandler);
socket.off("dom-mode-error", domModeErrorHandler);
@@ -1367,10 +1341,6 @@ export const BrowserWindow = () => {
};
}, [
socket,
screenShot,
canvasRef,
isDOMMode,
screencastHandler,
rrwebSnapshotHandler,
domModeHandler,
domModeErrorHandler,
@@ -1710,16 +1680,17 @@ export const BrowserWindow = () => {
let cleanedSelector = highlighterData.selector;
setListSelector(cleanedSelector);
notify(
`info`,
t(
setPendingNotification({
type: `info`,
message: t(
"browser_window.attribute_modal.notifications.list_select_success",
{
count: highlighterData.groupInfo.groupSize,
}
) ||
`Selected group with ${highlighterData.groupInfo.groupSize} similar elements`
);
`Selected group with ${highlighterData.groupInfo.groupSize} similar elements`,
count: highlighterData.groupInfo.groupSize,
});
setCurrentListId(Date.now());
setFields({});
@@ -1847,24 +1818,7 @@ export const BrowserWindow = () => {
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (highlighterData) {
let shouldProcessClick = false;
if (!isDOMMode && canvasRef?.current) {
const canvasRect = canvasRef.current.getBoundingClientRect();
const clickX = e.clientX - canvasRect.left;
const clickY = e.clientY - canvasRect.top;
const highlightRect = highlighterData.rect;
const mappedRect =
coordinateMapper.mapBrowserRectToCanvas(highlightRect);
shouldProcessClick =
clickX >= mappedRect.left &&
clickX <= mappedRect.right &&
clickY >= mappedRect.top &&
clickY <= mappedRect.bottom;
} else {
shouldProcessClick = true;
}
const shouldProcessClick = true;
if (shouldProcessClick) {
const options = getAttributeOptions(
@@ -2209,17 +2163,7 @@ export const BrowserWindow = () => {
!showAttributeModal &&
highlighterData?.rect != null && (
<>
{!isDOMMode && canvasRef?.current && (
<Highlighter
unmodifiedRect={highlighterData?.rect}
displayedSelector={highlighterData?.selector}
width={dimensions.width}
height={dimensions.height}
canvasRect={canvasRef.current.getBoundingClientRect()}
/>
)}
{isDOMMode && highlighterData && (
{highlighterData && (
<div
id="dom-highlight-overlay"
style={{
@@ -2355,31 +2299,27 @@ export const BrowserWindow = () => {
borderRadius: "0px 0px 5px 5px",
}}
>
{isDOMMode ? (
{currentSnapshot ? (
<>
{currentSnapshot ? (
<DOMBrowserRenderer
width={dimensions.width}
height={dimensions.height}
snapshot={currentSnapshot}
getList={getList}
getText={getText}
listSelector={listSelector}
cachedChildSelectors={cachedChildSelectors}
paginationMode={paginationMode}
paginationType={paginationType}
limitMode={limitMode}
isCachingChildSelectors={isCachingChildSelectors}
onHighlight={domHighlighterHandler}
onElementSelect={handleDOMElementSelection}
onShowDatePicker={handleShowDatePicker}
onShowDropdown={handleShowDropdown}
onShowTimePicker={handleShowTimePicker}
onShowDateTimePicker={handleShowDateTimePicker}
/>
) : (
<DOMLoadingIndicator />
)}
<DOMBrowserRenderer
width={dimensions.width}
height={dimensions.height}
snapshot={currentSnapshot}
getList={getList}
getText={getText}
listSelector={listSelector}
cachedChildSelectors={cachedChildSelectors}
paginationMode={paginationMode}
paginationType={paginationType}
limitMode={limitMode}
isCachingChildSelectors={isCachingChildSelectors}
onHighlight={domHighlighterHandler}
onElementSelect={handleDOMElementSelection}
onShowDatePicker={handleShowDatePicker}
onShowDropdown={handleShowDropdown}
onShowTimePicker={handleShowTimePicker}
onShowDateTimePicker={handleShowDateTimePicker}
/>
{/* --- Loading overlay --- */}
{isCachingChildSelectors && (
@@ -2492,11 +2432,7 @@ export const BrowserWindow = () => {
)}
</>
) : (
<Canvas
onCreateRef={setCanvasReference}
width={dimensions.width}
height={dimensions.height}
/>
<DOMLoadingIndicator />
)}
</div>
</div>
@@ -2591,26 +2527,6 @@ const DOMLoadingIndicator: React.FC = () => {
);
};
const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
const ctx = canvas.getContext('2d');
if (!ctx) return;
const img = new Image();
img.onload = () => {
requestAnimationFrame(() => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
});
if (image.startsWith('blob:')) {
URL.revokeObjectURL(image);
}
};
img.onerror = () => {
console.warn('Failed to load image');
};
img.src = image;
};
const modalStyle = {
top: '50%',
left: '50%',

16
src/components/robot/pages/RobotEditPage.tsx
View File

@@ -552,16 +552,12 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
pair.what.forEach((action, actionIndex) => {
if (!editableActions.has(String(action.action))) return;
let currentName =
action.name ||
(action.args && action.args[0] && typeof action.args[0] === 'object') ||
'';
let currentName = action.name || '';
if (!currentName) {
switch (action.action) {
case 'scrapeSchema':
textCount++;
currentName = `Text ${textCount}`;
currentName = 'Texts';
break;
case 'screenshot':
screenshotCount++;
@@ -574,9 +570,6 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
}
} else {
switch (action.action) {
case 'scrapeSchema':
textCount++;
break;
case 'screenshot':
screenshotCount++;
break;
@@ -599,10 +592,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
switch (action.action) {
case 'scrapeSchema': {
const existingName =
currentName ||
(action.args && action.args[0] && typeof action.args[0] === "object") ||
"Texts";
const existingName = currentName || "Texts";
if (!textInputs.length) {
textInputs.push(

34
src/components/run/InterpretationLog.tsx
View File

@@ -225,6 +225,28 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
notify('error', `Text data "${currentTextGroupName}" discarded`);
};
const checkForDuplicateName = (stepId: number, type: 'list' | 'text' | 'screenshot', newName: string): boolean => {
const trimmedName = newName.trim();
if (type === 'list') {
const listSteps = browserSteps.filter(step => step.type === 'list' && step.id !== stepId);
const duplicate = listSteps.find(step => step.name === trimmedName);
if (duplicate) {
notify('error', `A list with the name "${trimmedName}" already exists. Please choose a different name.`);
return true;
}
} else if (type === 'screenshot') {
const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot' && step.id !== stepId);
const duplicate = screenshotSteps.find(step => step.name === trimmedName);
if (duplicate) {
notify('error', `A screenshot with the name "${trimmedName}" already exists. Please choose a different name.`);
return true;
}
}
return false;
}
const startEdit = (stepId: number, type: 'list' | 'text' | 'screenshot', currentValue: string) => {
setEditing({ stepId, type, value: currentValue });
@@ -240,6 +262,10 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
return;
}
if (checkForDuplicateName(stepId, type, finalValue)) {
return;
}
if (type === 'list') {
updateListStepName(stepId, finalValue);
} else if (type === 'text') {
@@ -378,6 +404,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
shouldOpenDrawer = true;
}
lastListDataLength.current = captureListData.length;
} else if (hasScrapeListAction && captureListData.length === 0) {
lastListDataLength.current = 0;
}
if (hasScrapeSchemaAction && captureTextData.length > 0 && !getText) {
@@ -387,6 +415,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
shouldOpenDrawer = true;
}
lastTextDataLength.current = captureTextData.length;
} else if (hasScrapeSchemaAction && captureTextData.length === 0) {
lastTextDataLength.current = 0;
}
if (hasScreenshotAction && screenshotData.length > 0) {
@@ -396,6 +426,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
shouldOpenDrawer = true;
}
lastScreenshotDataLength.current = screenshotData.length;
} else if (hasScreenshotAction && screenshotData.length === 0) {
lastScreenshotDataLength.current = 0;
}
const getLatestCaptureType = () => {
@@ -538,7 +570,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
{t('interpretation_log.titles.output_preview')}
</Typography>
{!(hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction) && (
{!(hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction) && !showPreviewData && availableTabs.length === 0 && (
<Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
<Grid item>
<Typography variant="h6" gutterBottom align="left">

76
src/components/run/RunContent.tsx
View File

@@ -115,27 +115,29 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
const rawKeys = Object.keys(row.binaryOutput);
const isLegacyPattern = rawKeys.every(key => /^item-\d+-\d+$/.test(key));
let normalizedScreenshotKeys: string[];
if (isLegacyPattern) {
const renamedKeys = rawKeys.map((_, index) => `Screenshot ${index + 1}`);
const keyMap: Record<string, string> = {};
renamedKeys.forEach((displayName, index) => {
keyMap[displayName] = rawKeys[index];
});
setScreenshotKeys(renamedKeys);
setScreenshotKeyMap(keyMap);
// Legacy unnamed screenshots → Screenshot 1, Screenshot 2...
normalizedScreenshotKeys = rawKeys.map((_, index) => `Screenshot ${index + 1}`);
} else {
const keyMap: Record<string, string> = {};
rawKeys.forEach(key => {
keyMap[key] = key;
// Same rule as captured lists: if name missing or generic, auto-label
normalizedScreenshotKeys = rawKeys.map((key, index) => {
if (!key || key.toLowerCase().includes("screenshot")) {
return `Screenshot ${index + 1}`;
}
return key;
});
setScreenshotKeys(rawKeys);
setScreenshotKeyMap(keyMap);
}
const keyMap: Record<string, string> = {};
normalizedScreenshotKeys.forEach((displayName, index) => {
keyMap[displayName] = rawKeys[index];
});
setScreenshotKeys(normalizedScreenshotKeys);
setScreenshotKeyMap(keyMap);
setCurrentScreenshotIndex(0);
} else {
setScreenshotKeys([]);
@@ -202,7 +204,14 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
const processSchemaData = (schemaOutput: any) => {
const keys = Object.keys(schemaOutput);
setSchemaKeys(keys);
const normalizedKeys = keys.map((key, index) => {
if (!key || key.toLowerCase().includes("scrapeschema")) {
return keys.length === 1 ? "Texts" : `Text ${index + 1}`;
}
return key;
});
setSchemaKeys(normalizedKeys);
const dataByKey: Record<string, any[]> = {};
const columnsByKey: Record<string, string[]> = {};
@@ -248,8 +257,17 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
}
});
setSchemaDataByKey(dataByKey);
setSchemaColumnsByKey(columnsByKey);
const remappedDataByKey: Record<string, any[]> = {};
const remappedColumnsByKey: Record<string, string[]> = {};
normalizedKeys.forEach((newKey, idx) => {
const oldKey = keys[idx];
remappedDataByKey[newKey] = dataByKey[oldKey];
remappedColumnsByKey[newKey] = columnsByKey[oldKey];
});
setSchemaDataByKey(remappedDataByKey);
setSchemaColumnsByKey(remappedColumnsByKey);
if (allData.length > 0) {
const allColumns = new Set<string>();
@@ -290,7 +308,14 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
setListData(tablesList);
setListColumns(columnsList);
setListKeys(keys);
const normalizedListKeys = keys.map((key, index) => {
if (!key || key.toLowerCase().includes("scrapelist")) {
return `List ${index + 1}`;
}
return key;
});
setListKeys(normalizedListKeys);
setCurrentListIndex(0);
};
@@ -617,10 +642,15 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<TabContext value={tab}>
<TabPanel value='output' sx={{ width: '100%', maxWidth: '900px' }}>
{row.status === 'running' || row.status === 'queued' ? (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<CircularProgress size={22} sx={{ marginRight: '10px' }} />
{t('run_content.loading')}
</Box>
<>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
<CircularProgress size={22} sx={{ marginRight: '10px' }} />
{t('run_content.loading')}
</Box>
<Button color="error" onClick={abortRunHandler} sx={{ mt: 1 }}>
{t('run_content.buttons.stop')}
</Button>
</>
) : (!hasData && !hasScreenshots
? <Typography>{t('run_content.empty_output')}</Typography>
: null)}

4
src/pages/PageWrapper.tsx
View File

@@ -133,6 +133,10 @@ export const PageWrapper = () => {
path="/register"
element={<Register />}
/>
<Route
path="/recording-setup"
element={<div />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Box>

43
src/pages/RecordingPage.tsx
View File

@@ -43,7 +43,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
const { setId, socket } = useSocketStore();
const { setWidth } = useBrowserDimensionsStore();
const { browserId, setBrowserId, recordingId, recordingUrl, setRecordingUrl, setRecordingName, setRetrainRobotId } = useGlobalInfoStore();
const { browserId, setBrowserId, recordingId, recordingUrl, setRecordingUrl, setRecordingName, setRetrainRobotId, setIsDOMMode } = useGlobalInfoStore();
const handleShowOutputData = useCallback(() => {
setShowOutputData(true);
@@ -77,6 +77,8 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
useEffect(() => {
let isCancelled = false;
const handleRecording = async () => {
setIsDOMMode(true);
const storedUrl = window.sessionStorage.getItem('recordingUrl');
if (storedUrl && !recordingUrl) {
setRecordingUrl(storedUrl);
@@ -137,9 +139,12 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
if (browserId === 'new-recording') {
socket?.emit('new-recording');
}
if (recordingUrl && socket) {
socket.emit('input:url', recordingUrl);
}
setIsLoaded(true);
}
}, [socket, browserId, recordingName, recordingId, isLoaded]);
}, [socket, browserId, recordingName, recordingId, recordingUrl, isLoaded]);
useEffect(() => {
socket?.on('loaded', handleLoaded);
@@ -153,26 +158,20 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
<ActionProvider>
<BrowserStepsProvider>
<div id="browser-recorder">
{isLoaded ? (
<>
<Grid container direction="row" style={{ flexGrow: 1, height: '100%' }}>
<Grid item xs={12} md={9} lg={9} style={{ height: '100%', overflow: 'hidden', position: 'relative' }}>
<div style={{ height: '100%', overflow: 'auto' }}>
<BrowserContent />
<InterpretationLog isOpen={showOutputData} setIsOpen={setShowOutputData} />
</div>
</Grid>
<Grid item xs={12} md={3} lg={3} style={{ height: '100%', overflow: 'hidden' }}>
<div className="right-side-panel" style={{ height: '100%' }}>
<RightSidePanel onFinishCapture={handleShowOutputData} />
<BrowserRecordingSave />
</div>
</Grid>
</Grid>
</>
) : (
<Loader text={t('recording_page.loader.browser_startup', { url: recordingUrl })} />
)}
<Grid container direction="row" style={{ flexGrow: 1, height: '100%' }}>
<Grid item xs={12} md={9} lg={9} style={{ height: '100%', overflow: 'hidden', position: 'relative' }}>
<div style={{ height: '100%', overflow: 'auto' }}>
<BrowserContent />
<InterpretationLog isOpen={showOutputData} setIsOpen={setShowOutputData} />
</div>
</Grid>
<Grid item xs={12} md={3} lg={3} style={{ height: '100%', overflow: 'hidden' }}>
<div className="right-side-panel" style={{ height: '100%' }}>
<RightSidePanel onFinishCapture={handleShowOutputData} />
<BrowserRecordingSave />
</div>
</Grid>
</Grid>
</div>
</BrowserStepsProvider>
</ActionProvider>