feat: recorder revamp ui changes
This commit is contained in:
Rohit Rajan
@@ -5,13 +5,14 @@ import Canvas from "../recorder/Canvas";
|
||||
import { Highlighter } from "../recorder/Highlighter";
|
||||
import { GenericModal } from '../ui/GenericModal';
|
||||
import { useActionContext } from '../../context/browserActions';
|
||||
import { useBrowserSteps, TextStep } from '../../context/browserSteps';
|
||||
import { useBrowserSteps, TextStep, ListStep } from '../../context/browserSteps';
|
||||
import { useGlobalInfoStore } from '../../context/globalInfo';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { AuthContext } from '../../context/auth';
|
||||
import { coordinateMapper } from '../../helpers/coordinateMapper';
|
||||
import { useBrowserDimensionsStore } from '../../context/browserDimensions';
|
||||
import { clientSelectorGenerator, ElementFingerprint } from "../../helpers/clientSelectorGenerator";
|
||||
import { capturedElementHighlighter } from "../../helpers/capturedElementHighlighter";
|
||||
import DatePicker from "../pickers/DatePicker";
|
||||
import Dropdown from "../pickers/Dropdown";
|
||||
import TimePicker from "../pickers/TimePicker";
|
||||
@@ -182,10 +183,13 @@ export const BrowserWindow = () => {
|
||||
count?: number;
|
||||
} | null>(null);
|
||||
|
||||
const [initialAutoFieldIds, setInitialAutoFieldIds] = useState<Set<number>>(new Set());
|
||||
const [manuallyAddedFieldIds, setManuallyAddedFieldIds] = useState<Set<number>>(new Set());
|
||||
|
||||
const { socket } = useSocketStore();
|
||||
const { notify, currentTextActionId, currentListActionId, updateDOMMode, isDOMMode, currentSnapshot } = useGlobalInfoStore();
|
||||
const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
|
||||
const { addTextStep, addListStep } = useBrowserSteps();
|
||||
const { addTextStep, addListStep, browserSteps } = useBrowserSteps();
|
||||
|
||||
const [currentGroupInfo, setCurrentGroupInfo] = useState<{
|
||||
isGroupElement: boolean;
|
||||
@@ -1159,6 +1163,7 @@ export const BrowserWindow = () => {
|
||||
|
||||
if (Object.keys(autoFields).length > 0) {
|
||||
setFields(autoFields);
|
||||
setInitialAutoFieldIds(new Set(Object.keys(autoFields).map(id => parseInt(id))));
|
||||
|
||||
addListStep(
|
||||
listSelector,
|
||||
@@ -1195,6 +1200,11 @@ export const BrowserWindow = () => {
|
||||
cachedListSelector,
|
||||
pendingNotification,
|
||||
notify,
|
||||
createFieldsFromChildSelectors,
|
||||
currentListId,
|
||||
currentListActionId,
|
||||
paginationSelector,
|
||||
addListStep
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1203,6 +1213,77 @@ export const BrowserWindow = () => {
|
||||
}
|
||||
}, [listSelector]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!getList || !listSelector || initialAutoFieldIds.size === 0 || !currentListActionId) return;
|
||||
|
||||
const currentListStep = browserSteps.find(
|
||||
step => step.type === 'list' && step.actionId === currentListActionId
|
||||
);
|
||||
|
||||
if (!currentListStep || currentListStep.type !== 'list' || !currentListStep.fields) return;
|
||||
|
||||
const currentFieldIds = new Set(Object.keys(currentListStep.fields).map(id => parseInt(id)));
|
||||
const newManualIds = new Set<number>();
|
||||
|
||||
currentFieldIds.forEach(fieldId => {
|
||||
if (!initialAutoFieldIds.has(fieldId)) {
|
||||
newManualIds.add(fieldId);
|
||||
}
|
||||
});
|
||||
|
||||
if (newManualIds.size !== manuallyAddedFieldIds.size ||
|
||||
![...newManualIds].every(id => manuallyAddedFieldIds.has(id))) {
|
||||
setManuallyAddedFieldIds(newManualIds);
|
||||
}
|
||||
}, [browserSteps, getList, listSelector, initialAutoFieldIds, currentListActionId, manuallyAddedFieldIds]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDOMMode) {
|
||||
capturedElementHighlighter.clearHighlights();
|
||||
return;
|
||||
}
|
||||
|
||||
const capturedSelectors: Array<{ selector: string }> = [];
|
||||
|
||||
if (getText && currentTextActionId) {
|
||||
const textSteps = browserSteps.filter(
|
||||
(step): step is TextStep => step.type === 'text' && step.actionId === currentTextActionId
|
||||
);
|
||||
|
||||
textSteps.forEach(step => {
|
||||
if (step.selectorObj?.selector) {
|
||||
capturedSelectors.push({
|
||||
selector: step.selectorObj.selector,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (getList && listSelector && currentListActionId && manuallyAddedFieldIds.size > 0) {
|
||||
const listSteps = browserSteps.filter(
|
||||
step => step.type === 'list' && step.actionId === currentListActionId
|
||||
) as ListStep[];
|
||||
|
||||
listSteps.forEach(listStep => {
|
||||
if (listStep.fields) {
|
||||
Object.entries(listStep.fields).forEach(([fieldId, field]: [string, any]) => {
|
||||
if (manuallyAddedFieldIds.has(parseInt(fieldId)) && field.selectorObj?.selector) {
|
||||
capturedSelectors.push({
|
||||
selector: field.selectorObj.selector,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (capturedSelectors.length > 0) {
|
||||
capturedElementHighlighter.applyHighlights(capturedSelectors);
|
||||
} else {
|
||||
capturedElementHighlighter.clearHighlights();
|
||||
}
|
||||
}, [browserSteps, getText, getList, listSelector, currentTextActionId, currentListActionId, isDOMMode, manuallyAddedFieldIds]);
|
||||
|
||||
useEffect(() => {
|
||||
coordinateMapper.updateDimensions(dimensions.width, dimensions.height, viewportInfo.width, viewportInfo.height);
|
||||
}, [viewportInfo, dimensions.width, dimensions.height]);
|
||||
@@ -1216,7 +1297,6 @@ export const BrowserWindow = () => {
|
||||
useEffect(() => {
|
||||
const storedListSelector = sessionStorage.getItem('recordingListSelector');
|
||||
|
||||
// Only restore state if it exists in sessionStorage
|
||||
if (storedListSelector && !listSelector) {
|
||||
setListSelector(storedListSelector);
|
||||
}
|
||||
@@ -1225,7 +1305,6 @@ export const BrowserWindow = () => {
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
if (canvasRef && canvasRef.current && highlighterData) {
|
||||
const canvasRect = canvasRef.current.getBoundingClientRect();
|
||||
// mousemove outside the browser window
|
||||
if (
|
||||
e.pageX < canvasRect.left
|
||||
|| e.pageX > canvasRect.right
|
||||
@@ -1242,6 +1321,8 @@ export const BrowserWindow = () => {
|
||||
setFields({});
|
||||
setCurrentListId(null);
|
||||
setCachedChildSelectors([]);
|
||||
setInitialAutoFieldIds(new Set());
|
||||
setManuallyAddedFieldIds(new Set());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1262,7 +1343,7 @@ export const BrowserWindow = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [screenShot, user?.id]);
|
||||
}, [user?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (socket) {
|
||||
@@ -1456,7 +1537,6 @@ export const BrowserWindow = () => {
|
||||
}
|
||||
highlighterUpdateRef.current = now;
|
||||
|
||||
// Map the incoming DOMRect from browser coordinates to canvas coordinates
|
||||
const mappedRect = new DOMRect(
|
||||
data.rect.x,
|
||||
data.rect.y,
|
||||
@@ -1477,17 +1557,14 @@ export const BrowserWindow = () => {
|
||||
if (limitMode) {
|
||||
setHighlighterData(null);
|
||||
} else if (paginationMode) {
|
||||
// Only set highlighterData if type is not empty, 'none', 'scrollDown', or 'scrollUp'
|
||||
if (paginationType !== '' && !['none', 'scrollDown', 'scrollUp'].includes(paginationType)) {
|
||||
setHighlighterData(mappedData);
|
||||
} else {
|
||||
setHighlighterData(null);
|
||||
}
|
||||
} else if (mappedData.childSelectors && mappedData.childSelectors.includes(mappedData.selector)) {
|
||||
// Highlight only valid child elements within the listSelector
|
||||
setHighlighterData(mappedData);
|
||||
} else if (mappedData.elementInfo?.isIframeContent && mappedData.childSelectors) {
|
||||
// Handle iframe elements
|
||||
const isIframeChild = mappedData.childSelectors.some(childSelector =>
|
||||
mappedData.selector.includes(':>>') &&
|
||||
childSelector.split(':>>').some(part =>
|
||||
@@ -1496,7 +1573,6 @@ export const BrowserWindow = () => {
|
||||
);
|
||||
setHighlighterData(isIframeChild ? mappedData : null);
|
||||
} else if (mappedData.selector.includes(':>>') && hasValidChildSelectors) {
|
||||
// Handle mixed DOM cases with iframes
|
||||
const selectorParts = mappedData.selector.split(':>>').map(part => part.trim());
|
||||
const isValidMixedSelector = selectorParts.some(part =>
|
||||
mappedData.childSelectors!.some(childSelector =>
|
||||
@@ -1505,7 +1581,6 @@ export const BrowserWindow = () => {
|
||||
);
|
||||
setHighlighterData(isValidMixedSelector ? mappedData : null);
|
||||
} else if (mappedData.elementInfo?.isShadowRoot && mappedData.childSelectors) {
|
||||
// Handle Shadow DOM elements
|
||||
const isShadowChild = mappedData.childSelectors.some(childSelector =>
|
||||
mappedData.selector.includes('>>') &&
|
||||
childSelector.split('>>').some(part =>
|
||||
@@ -1514,7 +1589,6 @@ export const BrowserWindow = () => {
|
||||
);
|
||||
setHighlighterData(isShadowChild ? mappedData : null);
|
||||
} else if (mappedData.selector.includes('>>') && hasValidChildSelectors) {
|
||||
// Handle mixed DOM cases
|
||||
const selectorParts = mappedData.selector.split('>>').map(part => part.trim());
|
||||
const isValidMixedSelector = selectorParts.some(part =>
|
||||
mappedData.childSelectors!.some(childSelector =>
|
||||
@@ -1523,15 +1597,12 @@ export const BrowserWindow = () => {
|
||||
);
|
||||
setHighlighterData(isValidMixedSelector ? mappedData : null);
|
||||
} else {
|
||||
// If not a valid child in normal mode, clear the highlighter
|
||||
setHighlighterData(null);
|
||||
}
|
||||
} else {
|
||||
// Set highlighterData for the initial listSelector selection
|
||||
setHighlighterData(mappedData);
|
||||
}
|
||||
} else {
|
||||
// For non-list steps
|
||||
setHighlighterData(mappedData);
|
||||
}
|
||||
}, [getList, socket, listSelector, paginationMode, paginationType, limitMode]);
|
||||
@@ -2114,7 +2185,7 @@ export const BrowserWindow = () => {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
`}</style>j
|
||||
|
||||
{(getText === true || getList === true) &&
|
||||
!showAttributeModal &&
|
||||
|
||||
@@ -1,19 +1,13 @@
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Button, Paper, Box, TextField, IconButton, Tooltip } from "@mui/material";
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import TextFieldsIcon from '@mui/icons-material/TextFields';
|
||||
import DocumentScannerIcon from '@mui/icons-material/DocumentScanner';
|
||||
import { WorkflowFile } from "maxun-core";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useGlobalInfoStore } from "../../context/globalInfo";
|
||||
import { PaginationType, useActionContext, LimitType } from '../../context/browserActions';
|
||||
import { BrowserStep, useBrowserSteps } from '../../context/browserSteps';
|
||||
import { useSocketStore } from '../../context/socket';
|
||||
import { ScreenshotSettings } from '../../shared/types';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
import Radio from '@mui/material/Radio';
|
||||
import RadioGroup from '@mui/material/RadioGroup';
|
||||
import { getActiveWorkflow } from "../../api/workflow";
|
||||
@@ -49,13 +43,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
const [showCaptureList, setShowCaptureList] = useState(true);
|
||||
const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
|
||||
const [showCaptureText, setShowCaptureText] = useState(true);
|
||||
const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({});
|
||||
const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
|
||||
const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
|
||||
const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
|
||||
const { panelHeight } = useBrowserDimensionsStore();
|
||||
|
||||
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, setIsDOMMode, currentSnapshot, setCurrentSnapshot, updateDOMMode, initialUrl, setRecordingUrl } = useGlobalInfoStore();
|
||||
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, setIsDOMMode, currentSnapshot, setCurrentSnapshot, updateDOMMode, initialUrl, setRecordingUrl, currentTextGroupName } = useGlobalInfoStore();
|
||||
const {
|
||||
getText, startGetText, stopGetText,
|
||||
getList, startGetList, stopGetList,
|
||||
@@ -72,7 +62,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
startAction, finishAction
|
||||
} = useActionContext();
|
||||
|
||||
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId, updateListStepData, updateScreenshotStepData } = useBrowserSteps();
|
||||
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId, updateListStepData, updateScreenshotStepData, emitActionForStep } = useBrowserSteps();
|
||||
const { id, socket } = useSocketStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -183,6 +173,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
if (screenshotSteps.length > 0) {
|
||||
const latestStep = screenshotSteps[screenshotSteps.length - 1];
|
||||
updateScreenshotStepData(latestStep.id, data.screenshot);
|
||||
emitActionForStep(latestStep);
|
||||
}
|
||||
|
||||
setCurrentScreenshotActionId('');
|
||||
@@ -194,7 +185,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
socket.off('directScreenshotCaptured', handleDirectScreenshot);
|
||||
};
|
||||
}
|
||||
}, [socket, id, notify, t, currentScreenshotActionId, updateScreenshotStepData, setCurrentScreenshotActionId]);
|
||||
}, [socket, id, notify, t, currentScreenshotActionId, updateScreenshotStepData, setCurrentScreenshotActionId, emitActionForStep, browserSteps]);
|
||||
|
||||
const extractDataClientSide = useCallback(
|
||||
(
|
||||
@@ -271,26 +262,41 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
}
|
||||
}
|
||||
},
|
||||
[isDOMMode, currentSnapshot, updateListStepData, socket, notify]
|
||||
[isDOMMode, currentSnapshot, updateListStepData, socket, notify, currentWorkflowActionsState]
|
||||
);
|
||||
|
||||
const handleMouseEnter = (id: number) => {
|
||||
setHoverStates(prev => ({ ...prev, [id]: true }));
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!getList) return;
|
||||
|
||||
const handleMouseLeave = (id: number) => {
|
||||
setHoverStates(prev => ({ ...prev, [id]: false }));
|
||||
};
|
||||
const currentListStep = browserSteps.find(
|
||||
step => step.type === 'list' && step.actionId === currentListActionId
|
||||
) as (BrowserStep & { type: 'list'; listSelector?: string; fields?: Record<string, any> }) | undefined;
|
||||
|
||||
if (!currentListStep || !currentListStep.listSelector || !currentListStep.fields) return;
|
||||
|
||||
const fieldCount = Object.keys(currentListStep.fields).length;
|
||||
|
||||
if (fieldCount > 0) {
|
||||
extractDataClientSide(
|
||||
currentListStep.listSelector,
|
||||
currentListStep.fields,
|
||||
currentListStep.id
|
||||
);
|
||||
|
||||
setCurrentWorkflowActionsState({
|
||||
...currentWorkflowActionsState,
|
||||
hasScrapeListAction: true
|
||||
});
|
||||
}
|
||||
}, [browserSteps, currentListActionId, getList, extractDataClientSide, setCurrentWorkflowActionsState, currentWorkflowActionsState]);
|
||||
|
||||
const handleStartGetText = () => {
|
||||
setIsCaptureTextConfirmed(false);
|
||||
const newActionId = `text-${crypto.randomUUID()}`;
|
||||
setCurrentTextActionId(newActionId);
|
||||
startGetText();
|
||||
}
|
||||
|
||||
const handleStartGetList = () => {
|
||||
setIsCaptureListConfirmed(false);
|
||||
const newActionId = `list-${crypto.randomUUID()}`;
|
||||
setCurrentListActionId(newActionId);
|
||||
startGetList();
|
||||
@@ -302,230 +308,24 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
startGetScreenshot();
|
||||
};
|
||||
|
||||
const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
|
||||
if (listId !== undefined && fieldKey !== undefined) {
|
||||
// Prevent editing if the field is confirmed
|
||||
if (confirmedListTextFields[listId]?.[fieldKey]) {
|
||||
return;
|
||||
}
|
||||
updateListTextFieldLabel(listId, fieldKey, label);
|
||||
} else {
|
||||
setTextLabels(prevLabels => ({ ...prevLabels, [id]: label }));
|
||||
}
|
||||
if (!label.trim()) {
|
||||
setErrors(prevErrors => ({ ...prevErrors, [id]: t('right_panel.errors.label_required') }));
|
||||
} else {
|
||||
setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleTextStepConfirm = (id: number) => {
|
||||
const label = textLabels[id]?.trim();
|
||||
if (!label) {
|
||||
setErrors(prevErrors => ({ ...prevErrors, [id]: t('right_panel.errors.label_required') }));
|
||||
return;
|
||||
}
|
||||
|
||||
const existingLabels = browserSteps
|
||||
.filter(step =>
|
||||
step.type === 'text' &&
|
||||
step.id !== id &&
|
||||
confirmedTextSteps[step.id] &&
|
||||
'label' in step &&
|
||||
step.label
|
||||
)
|
||||
.map(step => (step as any).label);
|
||||
|
||||
if (existingLabels.includes(label)) {
|
||||
setErrors(prevErrors => ({
|
||||
...prevErrors,
|
||||
[id]: t('right_panel.errors.duplicate_label') || `Label "${label}" already exists. Please use a unique label.`
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
updateBrowserTextStepLabel(id, label);
|
||||
setConfirmedTextSteps(prev => ({ ...prev, [id]: true }));
|
||||
setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
|
||||
};
|
||||
|
||||
const handleTextStepDiscard = (id: number) => {
|
||||
deleteBrowserStep(id);
|
||||
setTextLabels(prevLabels => {
|
||||
const { [id]: _, ...rest } = prevLabels;
|
||||
return rest;
|
||||
});
|
||||
setErrors(prevErrors => {
|
||||
const { [id]: _, ...rest } = prevErrors;
|
||||
return rest;
|
||||
});
|
||||
};
|
||||
|
||||
const handleTextStepDelete = (id: number) => {
|
||||
deleteBrowserStep(id);
|
||||
setTextLabels(prevLabels => {
|
||||
const { [id]: _, ...rest } = prevLabels;
|
||||
return rest;
|
||||
});
|
||||
setConfirmedTextSteps(prev => {
|
||||
const { [id]: _, ...rest } = prev;
|
||||
return rest;
|
||||
});
|
||||
setErrors(prevErrors => {
|
||||
const { [id]: _, ...rest } = prevErrors;
|
||||
return rest;
|
||||
});
|
||||
};
|
||||
|
||||
const handleListTextFieldConfirm = (listId: number, fieldKey: string) => {
|
||||
setConfirmedListTextFields(prev => ({
|
||||
...prev,
|
||||
[listId]: {
|
||||
...(prev[listId] || {}),
|
||||
[fieldKey]: true
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const handleListTextFieldDiscard = (listId: number, fieldKey: string) => {
|
||||
removeListTextField(listId, fieldKey);
|
||||
setConfirmedListTextFields(prev => {
|
||||
const updatedListFields = { ...(prev[listId] || {}) };
|
||||
delete updatedListFields[fieldKey];
|
||||
return {
|
||||
...prev,
|
||||
[listId]: updatedListFields
|
||||
};
|
||||
});
|
||||
setErrors(prev => {
|
||||
const { [fieldKey]: _, ...rest } = prev;
|
||||
return rest;
|
||||
});
|
||||
};
|
||||
|
||||
const handleListTextFieldDelete = (listId: number, fieldKey: string) => {
|
||||
removeListTextField(listId, fieldKey);
|
||||
setConfirmedListTextFields(prev => {
|
||||
const updatedListFields = { ...(prev[listId] || {}) };
|
||||
delete updatedListFields[fieldKey];
|
||||
return {
|
||||
...prev,
|
||||
[listId]: updatedListFields
|
||||
};
|
||||
});
|
||||
setErrors(prev => {
|
||||
const { [fieldKey]: _, ...rest } = prev;
|
||||
return rest;
|
||||
});
|
||||
};
|
||||
|
||||
const getTextSettingsObject = useCallback(() => {
|
||||
const settings: Record<string, {
|
||||
selector: string;
|
||||
tag?: string;
|
||||
[key: string]: any
|
||||
}> = {};
|
||||
|
||||
browserSteps.forEach(step => {
|
||||
if (browserStepIdList.includes(step.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (step.type === 'text' && step.label && step.selectorObj?.selector) {
|
||||
settings[step.label] = {
|
||||
...step.selectorObj,
|
||||
selector: step.selectorObj.selector
|
||||
};
|
||||
}
|
||||
setBrowserStepIdList(prevList => [...prevList, step.id]);
|
||||
});
|
||||
|
||||
return settings;
|
||||
}, [browserSteps, browserStepIdList]);
|
||||
|
||||
const stopCaptureAndEmitGetTextSettings = useCallback(() => {
|
||||
const hasTextStepsForCurrentAction = browserSteps.some(step => step.type === 'text' && step.actionId === currentTextActionId);
|
||||
if (!hasTextStepsForCurrentAction) {
|
||||
const currentTextActionStep = browserSteps.find(step => step.type === 'text' && step.actionId === currentTextActionId);
|
||||
if (!currentTextActionStep) {
|
||||
notify('error', t('right_panel.errors.no_text_captured'));
|
||||
return;
|
||||
}
|
||||
|
||||
const hasUnconfirmedTextStepsForCurrentAction = browserSteps.some(step =>
|
||||
step.type === 'text' &&
|
||||
step.actionId === currentTextActionId &&
|
||||
!confirmedTextSteps[step.id]
|
||||
);
|
||||
if (hasUnconfirmedTextStepsForCurrentAction) {
|
||||
notify('error', t('right_panel.errors.confirm_text_fields'));
|
||||
return;
|
||||
}
|
||||
stopGetText();
|
||||
const settings = getTextSettingsObject();
|
||||
if (hasTextStepsForCurrentAction) {
|
||||
socket?.emit('action', { action: 'scrapeSchema', settings });
|
||||
if (currentTextActionStep) {
|
||||
emitActionForStep(currentTextActionStep);
|
||||
}
|
||||
setIsCaptureTextConfirmed(true);
|
||||
setCurrentTextActionId('');
|
||||
resetInterpretationLog();
|
||||
finishAction('text');
|
||||
onFinishCapture();
|
||||
clientSelectorGenerator.cleanup();
|
||||
}, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t]);
|
||||
}, [stopGetText, socket, browserSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t, currentTextActionId, currentTextGroupName, emitActionForStep]);
|
||||
|
||||
const getListSettingsObject = useCallback(() => {
|
||||
let settings: {
|
||||
listSelector?: string;
|
||||
fields?: Record<string, {
|
||||
selector: string;
|
||||
tag?: string;
|
||||
[key: string]: any;
|
||||
isShadow?: boolean;
|
||||
}>;
|
||||
pagination?: {
|
||||
type: string;
|
||||
selector?: string;
|
||||
isShadow?: boolean;
|
||||
};
|
||||
limit?: number;
|
||||
isShadow?: boolean;
|
||||
} = {};
|
||||
|
||||
browserSteps.forEach(step => {
|
||||
if (step.type === 'list' && step.listSelector && Object.keys(step.fields).length > 0) {
|
||||
const fields: Record<string, {
|
||||
selector: string;
|
||||
tag?: string;
|
||||
[key: string]: any;
|
||||
isShadow?: boolean;
|
||||
}> = {};
|
||||
|
||||
Object.entries(step.fields).forEach(([id, field]) => {
|
||||
if (field.selectorObj?.selector) {
|
||||
fields[field.label] = {
|
||||
selector: field.selectorObj.selector,
|
||||
tag: field.selectorObj.tag,
|
||||
attribute: field.selectorObj.attribute,
|
||||
isShadow: field.selectorObj.isShadow
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
settings = {
|
||||
listSelector: step.listSelector,
|
||||
fields: fields,
|
||||
pagination: {
|
||||
type: paginationType,
|
||||
selector: step.pagination?.selector,
|
||||
isShadow: step.isShadow
|
||||
},
|
||||
limit: parseInt(limitType === 'custom' ? customLimit : limitType),
|
||||
isShadow: step.isShadow
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return settings;
|
||||
}, [browserSteps, paginationType, limitType, customLimit]);
|
||||
|
||||
const resetListState = useCallback(() => {
|
||||
setShowPaginationOptions(false);
|
||||
@@ -541,32 +341,33 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
}, [stopGetList, resetListState]);
|
||||
|
||||
const stopCaptureAndEmitGetListSettings = useCallback(() => {
|
||||
const settings = getListSettingsObject();
|
||||
|
||||
const latestListStep = getLatestListStep(browserSteps);
|
||||
if (latestListStep && settings) {
|
||||
if (latestListStep) {
|
||||
extractDataClientSide(latestListStep.listSelector!, latestListStep.fields, latestListStep.id);
|
||||
|
||||
setCurrentWorkflowActionsState({
|
||||
...currentWorkflowActionsState,
|
||||
hasScrapeListAction: true
|
||||
});
|
||||
|
||||
socket?.emit('action', { action: 'scrapeList', settings });
|
||||
emitActionForStep(latestListStep);
|
||||
|
||||
handleStopGetList();
|
||||
setCurrentListActionId('');
|
||||
resetInterpretationLog();
|
||||
finishAction('list');
|
||||
onFinishCapture();
|
||||
clientSelectorGenerator.cleanup();
|
||||
} else {
|
||||
notify('error', t('right_panel.errors.unable_create_settings'));
|
||||
handleStopGetList();
|
||||
setCurrentListActionId('');
|
||||
resetInterpretationLog();
|
||||
finishAction('list');
|
||||
onFinishCapture();
|
||||
clientSelectorGenerator.cleanup();
|
||||
}
|
||||
|
||||
handleStopGetList();
|
||||
setCurrentListActionId('');
|
||||
resetInterpretationLog();
|
||||
finishAction('list');
|
||||
onFinishCapture();
|
||||
clientSelectorGenerator.cleanup();
|
||||
}, [getListSettingsObject, socket, notify, handleStopGetList, resetInterpretationLog, finishAction, onFinishCapture, t, browserSteps, extractDataClientSide]);
|
||||
|
||||
const hasUnconfirmedListTextFields = browserSteps.some(step =>
|
||||
step.type === 'list' &&
|
||||
step.actionId === currentListActionId &&
|
||||
Object.entries(step.fields).some(([fieldKey]) =>
|
||||
!confirmedListTextFields[step.id]?.[fieldKey]
|
||||
)
|
||||
);
|
||||
}, [socket, notify, handleStopGetList, resetInterpretationLog, finishAction, onFinishCapture, t, browserSteps, extractDataClientSide, setCurrentWorkflowActionsState, currentWorkflowActionsState, emitActionForStep]);
|
||||
|
||||
const getLatestListStep = (steps: BrowserStep[]) => {
|
||||
const listSteps = steps.filter(step => step.type === 'list');
|
||||
@@ -590,19 +391,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
return;
|
||||
}
|
||||
|
||||
const hasUnconfirmedListTextFieldsForCurrentAction = browserSteps.some(step =>
|
||||
step.type === 'list' &&
|
||||
step.actionId === currentListActionId &&
|
||||
Object.entries(step.fields).some(([fieldKey]) =>
|
||||
!confirmedListTextFields[step.id]?.[fieldKey]
|
||||
)
|
||||
);
|
||||
|
||||
if (hasUnconfirmedListTextFieldsForCurrentAction) {
|
||||
notify('error', t('right_panel.errors.confirm_all_list_fields'));
|
||||
return;
|
||||
}
|
||||
|
||||
startPaginationMode();
|
||||
setShowPaginationOptions(true);
|
||||
setCaptureStage('pagination');
|
||||
@@ -613,11 +401,17 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
notify('error', t('right_panel.errors.select_pagination'));
|
||||
return;
|
||||
}
|
||||
const settings = getListSettingsObject();
|
||||
const paginationSelector = settings.pagination?.selector;
|
||||
if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
|
||||
notify('error', t('right_panel.errors.select_pagination_element'));
|
||||
return;
|
||||
|
||||
const currentListStepForPagination = browserSteps.find(
|
||||
step => step.type === 'list' && step.actionId === currentListActionId
|
||||
) as (BrowserStep & { type: 'list' }) | undefined;
|
||||
|
||||
if (currentListStepForPagination) {
|
||||
const paginationSelector = currentListStepForPagination.pagination?.selector;
|
||||
if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
|
||||
notify('error', t('right_panel.errors.select_pagination_element'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
stopPaginationMode();
|
||||
setShowPaginationOptions(false);
|
||||
@@ -644,7 +438,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
|
||||
stopLimitMode();
|
||||
setShowLimitOptions(false);
|
||||
setIsCaptureListConfirmed(true);
|
||||
stopCaptureAndEmitGetListSettings();
|
||||
setCaptureStage('complete');
|
||||
break;
|
||||
@@ -653,7 +446,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
setCaptureStage('initial');
|
||||
break;
|
||||
}
|
||||
}, [captureStage, paginationType, limitType, customLimit, startPaginationMode, setShowPaginationOptions, setCaptureStage, getListSettingsObject, notify, stopPaginationMode, startLimitMode, setShowLimitOptions, stopLimitMode, setIsCaptureListConfirmed, stopCaptureAndEmitGetListSettings, t, browserSteps, currentListActionId, confirmedListTextFields]);
|
||||
}, [captureStage, paginationType, limitType, customLimit, startPaginationMode, setShowPaginationOptions, setCaptureStage, notify, stopPaginationMode, startLimitMode, setShowLimitOptions, stopLimitMode, stopCaptureAndEmitGetListSettings, t, browserSteps, currentListActionId, updateListStepLimit]);
|
||||
|
||||
const handleBackCaptureList = useCallback(() => {
|
||||
switch (captureStage) {
|
||||
@@ -679,61 +472,28 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
const discardGetText = useCallback(() => {
|
||||
stopGetText();
|
||||
|
||||
if (currentTextActionId) {
|
||||
const stepsToDelete = browserSteps
|
||||
.filter(step => step.type === 'text' && step.actionId === currentTextActionId)
|
||||
.map(step => step.id);
|
||||
|
||||
if (currentTextActionId) {
|
||||
deleteStepsByActionId(currentTextActionId);
|
||||
|
||||
setTextLabels(prevLabels => {
|
||||
const newLabels = { ...prevLabels };
|
||||
stepsToDelete.forEach(id => {
|
||||
delete newLabels[id];
|
||||
});
|
||||
return newLabels;
|
||||
});
|
||||
|
||||
setErrors(prevErrors => {
|
||||
const newErrors = { ...prevErrors };
|
||||
stepsToDelete.forEach(id => {
|
||||
delete newErrors[id];
|
||||
});
|
||||
return newErrors;
|
||||
});
|
||||
|
||||
setConfirmedTextSteps(prev => {
|
||||
const newConfirmed = { ...prev };
|
||||
stepsToDelete.forEach(id => {
|
||||
delete newConfirmed[id];
|
||||
});
|
||||
return newConfirmed;
|
||||
});
|
||||
if (socket) {
|
||||
socket.emit('removeAction', { actionId: currentTextActionId });
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentTextActionId('');
|
||||
setIsCaptureTextConfirmed(false);
|
||||
clientSelectorGenerator.cleanup();
|
||||
notify('error', t('right_panel.errors.capture_text_discarded'));
|
||||
}, [currentTextActionId, browserSteps, stopGetText, deleteStepsByActionId, notify, t]);
|
||||
}, [currentTextActionId, browserSteps, stopGetText, deleteStepsByActionId, notify, t, socket]);
|
||||
|
||||
const discardGetList = useCallback(() => {
|
||||
stopGetList();
|
||||
|
||||
if (currentListActionId) {
|
||||
const listStepsToDelete = browserSteps
|
||||
.filter(step => step.type === 'list' && step.actionId === currentListActionId)
|
||||
.map(step => step.id);
|
||||
|
||||
deleteStepsByActionId(currentListActionId);
|
||||
|
||||
setConfirmedListTextFields(prev => {
|
||||
const newConfirmed = { ...prev };
|
||||
listStepsToDelete.forEach(id => {
|
||||
delete newConfirmed[id];
|
||||
});
|
||||
return newConfirmed;
|
||||
});
|
||||
if (socket) {
|
||||
socket.emit('removeAction', { actionId: currentListActionId });
|
||||
}
|
||||
}
|
||||
|
||||
resetListState();
|
||||
@@ -743,12 +503,14 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
setShowLimitOptions(false);
|
||||
setCaptureStage('initial');
|
||||
setCurrentListActionId('');
|
||||
setIsCaptureListConfirmed(false);
|
||||
clientSelectorGenerator.cleanup();
|
||||
notify('error', t('right_panel.errors.capture_list_discarded'));
|
||||
}, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t]);
|
||||
}, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t, stopPaginationMode, stopLimitMode, socket]);
|
||||
|
||||
const captureScreenshot = (fullPage: boolean) => {
|
||||
const screenshotCount = browserSteps.filter(s => s.type === 'screenshot').length + 1;
|
||||
const screenshotName = `Screenshot ${screenshotCount}`;
|
||||
|
||||
const screenshotSettings = {
|
||||
fullPage,
|
||||
type: 'png' as const,
|
||||
@@ -756,38 +518,18 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
animations: 'allow' as const,
|
||||
caret: 'hide' as const,
|
||||
scale: 'device' as const,
|
||||
name: screenshotName,
|
||||
actionId: currentScreenshotActionId
|
||||
};
|
||||
socket?.emit('captureDirectScreenshot', screenshotSettings);
|
||||
socket?.emit('action', { action: 'screenshot', settings: screenshotSettings });
|
||||
addScreenshotStep(fullPage, currentScreenshotActionId);
|
||||
stopGetScreenshot();
|
||||
resetInterpretationLog();
|
||||
finishAction('screenshot');
|
||||
clientSelectorGenerator.cleanup();
|
||||
onFinishCapture();
|
||||
clientSelectorGenerator.cleanup();
|
||||
};
|
||||
|
||||
const isConfirmCaptureDisabled = useMemo(() => {
|
||||
if (captureStage !== 'initial') return false;
|
||||
|
||||
const hasValidListSelectorForCurrentAction = browserSteps.some(step =>
|
||||
step.type === 'list' &&
|
||||
step.actionId === currentListActionId &&
|
||||
step.listSelector &&
|
||||
Object.keys(step.fields).length > 0
|
||||
);
|
||||
|
||||
const hasUnconfirmedListTextFieldsForCurrentAction = browserSteps.some(step =>
|
||||
step.type === 'list' &&
|
||||
step.actionId === currentListActionId &&
|
||||
Object.entries(step.fields).some(([fieldKey]) =>
|
||||
!confirmedListTextFields[step.id]?.[fieldKey]
|
||||
)
|
||||
);
|
||||
|
||||
return !hasValidListSelectorForCurrentAction || hasUnconfirmedListTextFieldsForCurrentAction;
|
||||
}, [captureStage, browserSteps, currentListActionId, confirmedListTextFields]);
|
||||
|
||||
const theme = useThemeMode();
|
||||
const isDarkMode = theme.darkMode;
|
||||
|
||||
@@ -842,33 +584,20 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
{t('right_panel.buttons.back')}
|
||||
</Button>
|
||||
)}
|
||||
<Tooltip
|
||||
title={
|
||||
captureStage !== 'initial' && hasUnconfirmedListTextFields
|
||||
? t('right_panel.tooltips.confirm_all_list_fields')
|
||||
: ''
|
||||
}
|
||||
placement="top"
|
||||
arrow
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleConfirmListCapture}
|
||||
sx={{
|
||||
color: '#ff00c3 !important',
|
||||
borderColor: '#ff00c3 !important',
|
||||
backgroundColor: 'whitesmoke !important',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleConfirmListCapture}
|
||||
disabled={captureStage !== 'initial' && hasUnconfirmedListTextFields}
|
||||
sx={{
|
||||
color: '#ff00c3 !important',
|
||||
borderColor: '#ff00c3 !important',
|
||||
backgroundColor: 'whitesmoke !important',
|
||||
}}
|
||||
>
|
||||
{captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') :
|
||||
captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') :
|
||||
captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') :
|
||||
t('right_panel.buttons.finish_capture')}
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
@@ -1056,137 +785,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
{browserSteps.map(step => (
|
||||
<Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
|
||||
{
|
||||
step.type === 'text' && (
|
||||
<>
|
||||
<TextField
|
||||
label={t('right_panel.fields.label')}
|
||||
value={textLabels[step.id] || step.label || ''}
|
||||
onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
|
||||
fullWidth
|
||||
size="small"
|
||||
margin="normal"
|
||||
error={!!errors[step.id]}
|
||||
helperText={errors[step.id]}
|
||||
InputProps={{
|
||||
readOnly: confirmedTextSteps[step.id],
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<EditIcon />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
|
||||
/>
|
||||
<TextField
|
||||
label={t('right_panel.fields.data')}
|
||||
value={step.data}
|
||||
fullWidth
|
||||
margin="normal"
|
||||
InputProps={{
|
||||
readOnly: confirmedTextSteps[step.id],
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<TextFieldsIcon />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
{!confirmedTextSteps[step.id] ? (
|
||||
<Box display="flex" justifyContent="space-between" gap={2}>
|
||||
<Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>{t('right_panel.buttons.confirm')}</Button>
|
||||
<Button variant="contained" color="error" onClick={() => handleTextStepDiscard(step.id)}>{t('right_panel.buttons.discard')}</Button>
|
||||
</Box>
|
||||
) : !isCaptureTextConfirmed && (
|
||||
<Box display="flex" justifyContent="flex-end" gap={2}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
onClick={() => handleTextStepDelete(step.id)}
|
||||
>
|
||||
{t('right_panel.buttons.delete')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{step.type === 'screenshot' && (
|
||||
<Box display="flex" alignItems="center">
|
||||
<DocumentScannerIcon sx={{ mr: 1 }} />
|
||||
<Typography>
|
||||
{step.fullPage ?
|
||||
t('right_panel.screenshot.display_fullpage') :
|
||||
t('right_panel.screenshot.display_visible')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{step.type === 'list' && (
|
||||
Object.entries(step.fields).length === 0 ? (
|
||||
<Typography>{t('right_panel.messages.list_empty')}</Typography>
|
||||
) : (
|
||||
<>
|
||||
<Typography>{t('right_panel.messages.list_selected')}</Typography>
|
||||
{Object.entries(step.fields).map(([key, field]) => (
|
||||
<Box key={key}>
|
||||
<TextField
|
||||
label={t('right_panel.fields.field_label')}
|
||||
value={field.label || ''}
|
||||
onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)}
|
||||
fullWidth
|
||||
margin="normal"
|
||||
InputProps={{
|
||||
readOnly: confirmedListTextFields[field.id]?.[key],
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<EditIcon />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
label={t('right_panel.fields.field_data')}
|
||||
value={field.data || ''}
|
||||
fullWidth
|
||||
margin="normal"
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<TextFieldsIcon />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
{!confirmedListTextFields[step.id]?.[key] && (
|
||||
<Box display="flex" justifyContent="space-between" gap={2}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => handleListTextFieldConfirm(step.id, key)}
|
||||
disabled={!field.label?.trim()}
|
||||
>
|
||||
{t('right_panel.buttons.confirm')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
onClick={() => handleListTextFieldDiscard(step.id, key)}
|
||||
>
|
||||
{t('right_panel.buttons.discard')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -8,16 +8,13 @@ import {
|
||||
CircularProgress,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
ButtonGroup
|
||||
AccordionDetails
|
||||
} from "@mui/material";
|
||||
import Highlight from "react-highlight";
|
||||
import * as React from "react";
|
||||
import { Data } from "./RunsTable";
|
||||
import { TabPanel, TabContext } from "@mui/lab";
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||
import { useEffect, useState } from "react";
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
@@ -43,21 +40,25 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
|
||||
const [schemaData, setSchemaData] = useState<any[]>([]);
|
||||
const [schemaColumns, setSchemaColumns] = useState<string[]>([]);
|
||||
const [schemaKeys, setSchemaKeys] = useState<string[]>([]);
|
||||
const [schemaDataByKey, setSchemaDataByKey] = useState<Record<string, any[]>>({});
|
||||
const [schemaColumnsByKey, setSchemaColumnsByKey] = useState<Record<string, string[]>>({});
|
||||
const [isSchemaTabular, setIsSchemaTabular] = useState<boolean>(false);
|
||||
|
||||
const [listData, setListData] = useState<any[][]>([]);
|
||||
const [listColumns, setListColumns] = useState<string[][]>([]);
|
||||
const [listKeys, setListKeys] = useState<string[]>([]);
|
||||
const [currentListIndex, setCurrentListIndex] = useState<number>(0);
|
||||
|
||||
const [screenshotKeys, setScreenshotKeys] = useState<string[]>([]);
|
||||
const [screenshotKeyMap, setScreenshotKeyMap] = useState<Record<string, string>>({});
|
||||
const [currentScreenshotIndex, setCurrentScreenshotIndex] = useState<number>(0);
|
||||
const [currentSchemaIndex, setCurrentSchemaIndex] = useState<number>(0);
|
||||
|
||||
const [legacyData, setLegacyData] = useState<any[]>([]);
|
||||
const [legacyColumns, setLegacyColumns] = useState<string[]>([]);
|
||||
const [isLegacyData, setIsLegacyData] = useState<boolean>(false);
|
||||
|
||||
const { darkMode } = useThemeMode();
|
||||
|
||||
useEffect(() => {
|
||||
setTab(tab);
|
||||
}, [interpretationInProgress]);
|
||||
@@ -66,8 +67,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
if (row.status === 'running' || row.status === 'queued' || row.status === 'scheduled') {
|
||||
setSchemaData([]);
|
||||
setSchemaColumns([]);
|
||||
setSchemaKeys([]);
|
||||
setSchemaDataByKey({});
|
||||
setSchemaColumnsByKey({});
|
||||
setListData([]);
|
||||
setListColumns([]);
|
||||
setListKeys([]);
|
||||
setLegacyData([]);
|
||||
setLegacyColumns([]);
|
||||
setIsLegacyData(false);
|
||||
@@ -77,10 +82,11 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
|
||||
if (!row.serializableOutput) return;
|
||||
|
||||
if (!row.serializableOutput.scrapeSchema &&
|
||||
!row.serializableOutput.scrapeList &&
|
||||
Object.keys(row.serializableOutput).length > 0) {
|
||||
const hasLegacySchema = row.serializableOutput.scrapeSchema && Array.isArray(row.serializableOutput.scrapeSchema);
|
||||
const hasLegacyList = row.serializableOutput.scrapeList && Array.isArray(row.serializableOutput.scrapeList);
|
||||
const hasOldFormat = !row.serializableOutput.scrapeSchema && !row.serializableOutput.scrapeList && Object.keys(row.serializableOutput).length > 0;
|
||||
|
||||
if (hasLegacySchema || hasLegacyList || hasOldFormat) {
|
||||
setIsLegacyData(true);
|
||||
processLegacyData(row.serializableOutput);
|
||||
return;
|
||||
@@ -100,44 +106,106 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
useEffect(() => {
|
||||
if (row.status === 'running' || row.status === 'queued' || row.status === 'scheduled') {
|
||||
setScreenshotKeys([]);
|
||||
setScreenshotKeyMap({});
|
||||
setCurrentScreenshotIndex(0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (row.binaryOutput && Object.keys(row.binaryOutput).length > 0) {
|
||||
setScreenshotKeys(Object.keys(row.binaryOutput));
|
||||
const rawKeys = Object.keys(row.binaryOutput);
|
||||
|
||||
const isLegacyPattern = rawKeys.every(key => /^item-\d+-\d+$/.test(key));
|
||||
|
||||
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);
|
||||
} else {
|
||||
const keyMap: Record<string, string> = {};
|
||||
rawKeys.forEach(key => {
|
||||
keyMap[key] = key;
|
||||
});
|
||||
|
||||
setScreenshotKeys(rawKeys);
|
||||
setScreenshotKeyMap(keyMap);
|
||||
}
|
||||
|
||||
setCurrentScreenshotIndex(0);
|
||||
} else {
|
||||
setScreenshotKeys([]);
|
||||
setScreenshotKeyMap({});
|
||||
setCurrentScreenshotIndex(0);
|
||||
}
|
||||
}, [row.binaryOutput, row.status]);
|
||||
|
||||
const processLegacyData = (legacyOutput: Record<string, any>) => {
|
||||
let allData: any[] = [];
|
||||
const convertedSchema: Record<string, any[]> = {};
|
||||
const convertedList: Record<string, any[]> = {};
|
||||
|
||||
Object.keys(legacyOutput).forEach(key => {
|
||||
const keys = Object.keys(legacyOutput);
|
||||
|
||||
keys.forEach((key) => {
|
||||
const data = legacyOutput[key];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
const filteredData = data.filter(row =>
|
||||
Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
allData = [...allData, ...filteredData];
|
||||
const isNestedArray = data.length > 0 && Array.isArray(data[0]);
|
||||
|
||||
if (isNestedArray) {
|
||||
data.forEach((subArray, index) => {
|
||||
if (Array.isArray(subArray) && subArray.length > 0) {
|
||||
const filteredData = subArray.filter(row =>
|
||||
row && typeof row === 'object' && Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
|
||||
if (filteredData.length > 0) {
|
||||
const autoName = `List ${Object.keys(convertedList).length + 1}`;
|
||||
convertedList[autoName] = filteredData;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const filteredData = data.filter(row =>
|
||||
row && typeof row === 'object' && Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
|
||||
if (filteredData.length > 0) {
|
||||
const schemaCount = Object.keys(convertedSchema).length;
|
||||
const autoName = `Text ${schemaCount + 1}`;
|
||||
convertedSchema[autoName] = filteredData;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (allData.length > 0) {
|
||||
const allColumns = new Set<string>();
|
||||
allData.forEach(item => {
|
||||
Object.keys(item).forEach(key => allColumns.add(key));
|
||||
});
|
||||
if (Object.keys(convertedSchema).length === 1) {
|
||||
const singleKey = Object.keys(convertedSchema)[0];
|
||||
const singleData = convertedSchema[singleKey];
|
||||
delete convertedSchema[singleKey];
|
||||
convertedSchema["Texts"] = singleData;
|
||||
}
|
||||
|
||||
setLegacyData(allData);
|
||||
setLegacyColumns(Array.from(allColumns));
|
||||
if (Object.keys(convertedSchema).length > 0) {
|
||||
processSchemaData(convertedSchema);
|
||||
}
|
||||
|
||||
if (Object.keys(convertedList).length > 0) {
|
||||
processScrapeList(convertedList);
|
||||
}
|
||||
};
|
||||
|
||||
const processSchemaData = (schemaOutput: any) => {
|
||||
const keys = Object.keys(schemaOutput);
|
||||
setSchemaKeys(keys);
|
||||
|
||||
const dataByKey: Record<string, any[]> = {};
|
||||
const columnsByKey: Record<string, string[]> = {};
|
||||
|
||||
if (Array.isArray(schemaOutput)) {
|
||||
const filteredData = schemaOutput.filter(row =>
|
||||
row && Object.values(row).some(value => value !== undefined && value !== "")
|
||||
@@ -156,41 +224,32 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
}
|
||||
}
|
||||
|
||||
if (schemaOutput['schema-tabular']) {
|
||||
const tabularData = schemaOutput['schema-tabular'];
|
||||
if (Array.isArray(tabularData) && tabularData.length > 0) {
|
||||
const filteredData = tabularData.filter(row =>
|
||||
Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
|
||||
if (filteredData.length > 0) {
|
||||
const allColumns = new Set<string>();
|
||||
filteredData.forEach(item => {
|
||||
Object.keys(item).forEach(key => allColumns.add(key));
|
||||
});
|
||||
|
||||
setSchemaData(filteredData);
|
||||
setSchemaColumns(Array.from(allColumns));
|
||||
setIsSchemaTabular(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let allData: any[] = [];
|
||||
let hasMultipleEntries = false;
|
||||
|
||||
Object.keys(schemaOutput).forEach(key => {
|
||||
keys.forEach(key => {
|
||||
const data = schemaOutput[key];
|
||||
if (Array.isArray(data)) {
|
||||
const filteredData = data.filter(row =>
|
||||
Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
|
||||
dataByKey[key] = filteredData;
|
||||
|
||||
const columnsForKey = new Set<string>();
|
||||
filteredData.forEach(item => {
|
||||
Object.keys(item).forEach(col => columnsForKey.add(col));
|
||||
});
|
||||
columnsByKey[key] = Array.from(columnsForKey);
|
||||
|
||||
allData = [...allData, ...filteredData];
|
||||
if (filteredData.length > 1) hasMultipleEntries = true;
|
||||
}
|
||||
});
|
||||
|
||||
setSchemaDataByKey(dataByKey);
|
||||
setSchemaColumnsByKey(columnsByKey);
|
||||
|
||||
if (allData.length > 0) {
|
||||
const allColumns = new Set<string>();
|
||||
allData.forEach(item => {
|
||||
@@ -206,42 +265,22 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
const processScrapeList = (scrapeListData: any) => {
|
||||
const tablesList: any[][] = [];
|
||||
const columnsList: string[][] = [];
|
||||
const keys: string[] = [];
|
||||
|
||||
if (Array.isArray(scrapeListData)) {
|
||||
scrapeListData.forEach(tableData => {
|
||||
if (Array.isArray(tableData) && tableData.length > 0) {
|
||||
const filteredData = tableData.filter(row =>
|
||||
Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
|
||||
if (filteredData.length > 0) {
|
||||
tablesList.push(filteredData);
|
||||
|
||||
const tableColumns = new Set<string>();
|
||||
filteredData.forEach(item => {
|
||||
Object.keys(item).forEach(key => tableColumns.add(key));
|
||||
});
|
||||
|
||||
columnsList.push(Array.from(tableColumns));
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (typeof scrapeListData === 'object') {
|
||||
if (typeof scrapeListData === 'object') {
|
||||
Object.keys(scrapeListData).forEach(key => {
|
||||
const tableData = scrapeListData[key];
|
||||
if (Array.isArray(tableData) && tableData.length > 0) {
|
||||
const filteredData = tableData.filter(row =>
|
||||
Object.values(row).some(value => value !== undefined && value !== "")
|
||||
);
|
||||
|
||||
if (filteredData.length > 0) {
|
||||
tablesList.push(filteredData);
|
||||
|
||||
keys.push(key);
|
||||
const tableColumns = new Set<string>();
|
||||
filteredData.forEach(item => {
|
||||
Object.keys(item).forEach(key => tableColumns.add(key));
|
||||
});
|
||||
|
||||
columnsList.push(Array.from(tableColumns));
|
||||
}
|
||||
}
|
||||
@@ -250,6 +289,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
|
||||
setListData(tablesList);
|
||||
setListColumns(columnsList);
|
||||
setListKeys(keys);
|
||||
setCurrentListIndex(0);
|
||||
};
|
||||
|
||||
@@ -308,21 +348,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const navigateListTable = (direction: 'next' | 'prev') => {
|
||||
if (direction === 'next' && currentListIndex < listData.length - 1) {
|
||||
setCurrentListIndex(currentListIndex + 1);
|
||||
} else if (direction === 'prev' && currentListIndex > 0) {
|
||||
setCurrentListIndex(currentListIndex - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const navigateScreenshots = (direction: 'next' | 'prev') => {
|
||||
if (direction === 'next' && currentScreenshotIndex < screenshotKeys.length - 1) {
|
||||
setCurrentScreenshotIndex(currentScreenshotIndex + 1);
|
||||
} else if (direction === 'prev' && currentScreenshotIndex > 0) {
|
||||
setCurrentScreenshotIndex(currentScreenshotIndex - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const renderDataTable = (
|
||||
data: any[],
|
||||
@@ -333,15 +358,127 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
isPaginatedList: boolean = false,
|
||||
isSchemaData: boolean = false
|
||||
) => {
|
||||
if (!isPaginatedList && data.length === 0) return null;
|
||||
if (isPaginatedList && (listData.length === 0 || currentListIndex >= listData.length)) return null;
|
||||
if (data.length === 0) return null;
|
||||
|
||||
const currentData = isPaginatedList ? listData[currentListIndex] : data;
|
||||
const currentColumns = isPaginatedList ? listColumns[currentListIndex] : columns;
|
||||
const shouldShowAsKeyValue = isSchemaData && !isSchemaTabular && data.length === 1;
|
||||
|
||||
if (!currentData || currentData.length === 0) return null;
|
||||
if (title === '') {
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<TableContainer component={Paper} sx={{ maxHeight: 320 }}>
|
||||
<Table stickyHeader aria-label="sticky table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{shouldShowAsKeyValue ? (
|
||||
<>
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
Label
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
Value
|
||||
</TableCell>
|
||||
</>
|
||||
) : (
|
||||
columns.map((column) => (
|
||||
<TableCell
|
||||
key={column}
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
</TableCell>
|
||||
))
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{shouldShowAsKeyValue ? (
|
||||
columns.map((column) => (
|
||||
<TableRow key={column}>
|
||||
<TableCell sx={{ fontWeight: 500 }}>
|
||||
{column}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{data[0][column] === undefined || data[0][column] === ""
|
||||
? "-"
|
||||
: (typeof data[0][column] === 'object'
|
||||
? JSON.stringify(data[0][column])
|
||||
: String(data[0][column]))}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
data.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
{columns.map((column) => (
|
||||
<TableCell key={column}>
|
||||
{row[column] === undefined || row[column] === ""
|
||||
? "-"
|
||||
: (typeof row[column] === 'object'
|
||||
? JSON.stringify(row[column])
|
||||
: String(row[column]))}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box>
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() => downloadJSON(data, jsonFilename)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
mr: 2,
|
||||
p: 0,
|
||||
minWidth: 'auto',
|
||||
backgroundColor: 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('run_content.captured_data.download_json', 'Download as JSON')}
|
||||
</Button>
|
||||
|
||||
const shouldShowAsKeyValue = isSchemaData && !isSchemaTabular && currentData.length === 1;
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() => downloadCSV(data, columns, csvFilename, isSchemaData, isSchemaTabular)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
p: 0,
|
||||
minWidth: 'auto',
|
||||
backgroundColor: 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('run_content.captured_data.download_csv', 'Download as CSV')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||||
@@ -359,11 +496,11 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
<AccordionDetails>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Box>
|
||||
<Button
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() => downloadJSON(currentData, jsonFilename)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
onClick={() => downloadJSON(data, jsonFilename)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
mr: 2,
|
||||
p: 0,
|
||||
@@ -378,11 +515,11 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
{t('run_content.captured_data.download_json', 'Download as JSON')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() => downloadCSV(currentData, currentColumns, csvFilename, isSchemaData, isSchemaTabular)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
onClick={() => downloadCSV(data, columns, csvFilename, isSchemaData, isSchemaTabular)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
p: 0,
|
||||
minWidth: 'auto',
|
||||
@@ -396,37 +533,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
{t('run_content.captured_data.download_csv', 'Download as CSV')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{isPaginatedList && listData.length > 1 && (
|
||||
<ButtonGroup size="small">
|
||||
<Button
|
||||
onClick={() => navigateListTable('prev')}
|
||||
disabled={currentListIndex === 0}
|
||||
sx={{
|
||||
borderColor: '#FF00C3',
|
||||
color: currentListIndex === 0 ? 'gray' : '#FF00C3',
|
||||
'&.Mui-disabled': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.12)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArrowBackIcon />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigateListTable('next')}
|
||||
disabled={currentListIndex === listData.length - 1}
|
||||
sx={{
|
||||
borderColor: '#FF00C3',
|
||||
color: currentListIndex === listData.length - 1 ? 'gray' : '#FF00C3',
|
||||
'&.Mui-disabled': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.12)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArrowForwardIcon />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
)}
|
||||
</Box>
|
||||
<TableContainer component={Paper} sx={{ maxHeight: 320 }}>
|
||||
<Table stickyHeader aria-label="sticky table">
|
||||
@@ -434,33 +540,27 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
<TableRow>
|
||||
{shouldShowAsKeyValue ? (
|
||||
<>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: '1px solid',
|
||||
borderColor: darkMode ? '#3a4453' : '#dee2e6',
|
||||
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
Label
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: '1px solid',
|
||||
borderColor: darkMode ? '#3a4453' : '#dee2e6',
|
||||
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
Value
|
||||
</TableCell>
|
||||
</>
|
||||
) : (
|
||||
(isPaginatedList ? currentColumns : columns).map((column) => (
|
||||
<TableCell
|
||||
columns.map((column) => (
|
||||
<TableCell
|
||||
key={column}
|
||||
sx={{
|
||||
borderBottom: '1px solid',
|
||||
borderColor: darkMode ? '#3a4453' : '#dee2e6',
|
||||
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
@@ -471,24 +571,30 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{shouldShowAsKeyValue ? (
|
||||
// Single schema entry - show as key-value pairs
|
||||
currentColumns.map((column) => (
|
||||
columns.map((column) => (
|
||||
<TableRow key={column}>
|
||||
<TableCell sx={{ fontWeight: 500 }}>
|
||||
{column}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{currentData[0][column] === undefined || currentData[0][column] === "" ? "-" : currentData[0][column]}
|
||||
{data[0][column] === undefined || data[0][column] === ""
|
||||
? "-"
|
||||
: (typeof data[0][column] === 'object'
|
||||
? JSON.stringify(data[0][column])
|
||||
: String(data[0][column]))}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
// Multiple entries or list data - show as table
|
||||
currentData.map((row, index) => (
|
||||
data.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
{(isPaginatedList ? currentColumns : columns).map((column) => (
|
||||
{columns.map((column) => (
|
||||
<TableCell key={column}>
|
||||
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
|
||||
{row[column] === undefined || row[column] === ""
|
||||
? "-"
|
||||
: (typeof row[column] === 'object'
|
||||
? JSON.stringify(row[column])
|
||||
: String(row[column]))}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
@@ -601,23 +707,201 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
|
||||
{!isLegacyData && (
|
||||
<>
|
||||
{renderDataTable(
|
||||
schemaData,
|
||||
schemaColumns,
|
||||
t('run_content.captured_data.schema_title', 'Captured Texts'),
|
||||
'schema_data.csv',
|
||||
'schema_data.json',
|
||||
false,
|
||||
true
|
||||
{schemaData.length > 0 && (
|
||||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography variant='h6'>
|
||||
{t('run_content.captured_data.schema_title', 'Captured Texts')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{schemaKeys.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{schemaKeys.map((key, idx) => (
|
||||
<Box
|
||||
key={key}
|
||||
onClick={() => setCurrentSchemaIndex(idx)}
|
||||
sx={{
|
||||
px: 3,
|
||||
py: 1,
|
||||
cursor: 'pointer',
|
||||
backgroundColor:
|
||||
currentSchemaIndex === idx
|
||||
? (theme) => theme.palette.mode === 'dark'
|
||||
? '#121111ff'
|
||||
: '#e9ecef'
|
||||
: 'transparent',
|
||||
fontWeight: currentSchemaIndex === idx ? 600 : 400,
|
||||
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
}}
|
||||
>
|
||||
{key}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{renderDataTable(
|
||||
schemaDataByKey[schemaKeys[currentSchemaIndex]] || schemaData,
|
||||
schemaColumnsByKey[schemaKeys[currentSchemaIndex]] || schemaColumns,
|
||||
'',
|
||||
`${schemaKeys[currentSchemaIndex] || 'schema_data'}.csv`,
|
||||
`${schemaKeys[currentSchemaIndex] || 'schema_data'}.json`,
|
||||
false,
|
||||
true
|
||||
)}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)}
|
||||
|
||||
{listData.length > 0 && renderDataTable(
|
||||
[],
|
||||
[],
|
||||
t('run_content.captured_data.list_title', 'Captured Lists'),
|
||||
'list_data.csv',
|
||||
'list_data.json',
|
||||
true
|
||||
{listData.length > 0 && (
|
||||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography variant='h6'>
|
||||
{t('run_content.captured_data.list_title', 'Captured Lists')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{listKeys.map((key, idx) => (
|
||||
<Box
|
||||
key={key}
|
||||
onClick={() => setCurrentListIndex(idx)}
|
||||
sx={{
|
||||
px: 3,
|
||||
py: 1,
|
||||
cursor: 'pointer',
|
||||
backgroundColor:
|
||||
currentListIndex === idx
|
||||
? (theme) => theme.palette.mode === 'dark'
|
||||
? '#121111ff'
|
||||
: '#e9ecef'
|
||||
: 'transparent',
|
||||
fontWeight: currentListIndex === idx ? 600 : 400,
|
||||
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
}}
|
||||
>
|
||||
{key}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<TableContainer component={Paper} sx={{ maxHeight: 320 }}>
|
||||
<Table stickyHeader aria-label="captured-list-table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{(listColumns[currentListIndex] || []).map((column) => (
|
||||
<TableCell
|
||||
key={column}
|
||||
sx={{
|
||||
backgroundColor: (theme) => theme.palette.mode === 'dark' ? '#11111' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{(listData[currentListIndex] || []).map((rowItem, idx) => (
|
||||
<TableRow key={idx}>
|
||||
{(listColumns[currentListIndex] || []).map((column) => (
|
||||
<TableCell key={column}>
|
||||
{rowItem[column] === undefined || rowItem[column] === ''
|
||||
? '-'
|
||||
: typeof rowItem[column] === 'object'
|
||||
? JSON.stringify(rowItem[column])
|
||||
: String(rowItem[column])}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 2,
|
||||
mt: 2
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() =>
|
||||
downloadJSON(
|
||||
listData[currentListIndex],
|
||||
`${listKeys[currentListIndex] || 'list_data'}.json`
|
||||
)
|
||||
}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
mr: 2,
|
||||
p: 0,
|
||||
minWidth: 'auto',
|
||||
backgroundColor: 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t('run_content.captured_data.download_json', 'Download as JSON')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() =>
|
||||
downloadCSV(
|
||||
listData[currentListIndex],
|
||||
listColumns[currentListIndex] || [],
|
||||
`${listKeys[currentListIndex] || 'list_data'}.csv`,
|
||||
false,
|
||||
false
|
||||
)
|
||||
}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
p: 0,
|
||||
minWidth: 'auto',
|
||||
backgroundColor: 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t('run_content.captured_data.download_csv', 'Download as CSV')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -625,102 +909,73 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
)}
|
||||
|
||||
{hasScreenshots && (
|
||||
<>
|
||||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="screenshot-content"
|
||||
id="screenshot-header"
|
||||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography variant='h6'>
|
||||
{t('run_content.captured_screenshot.title', 'Captured Screenshots')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography variant='h6'>
|
||||
{t('run_content.captured_screenshot.title', 'Screenshots')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
fetch(row.binaryOutput[screenshotKeys[currentScreenshotIndex]])
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = url;
|
||||
a.download = screenshotKeys[currentScreenshotIndex];
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch(err => console.error('Download failed:', err));
|
||||
}}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
p: 0,
|
||||
minWidth: 'auto',
|
||||
backgroundColor: 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
{screenshotKeys.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{t('run_content.captured_screenshot.download', 'Download')}
|
||||
</Button>
|
||||
|
||||
{screenshotKeys.length > 1 && (
|
||||
<ButtonGroup size="small">
|
||||
<Button
|
||||
onClick={() => navigateScreenshots('prev')}
|
||||
disabled={currentScreenshotIndex === 0}
|
||||
{screenshotKeys.map((key, idx) => (
|
||||
<Box
|
||||
key={key}
|
||||
onClick={() => setCurrentScreenshotIndex(idx)}
|
||||
sx={{
|
||||
borderColor: '#FF00C3',
|
||||
color: currentScreenshotIndex === 0 ? 'gray' : '#FF00C3',
|
||||
'&.Mui-disabled': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.12)'
|
||||
}
|
||||
px: 3,
|
||||
py: 1,
|
||||
cursor: 'pointer',
|
||||
backgroundColor:
|
||||
currentScreenshotIndex === idx
|
||||
? (theme) => theme.palette.mode === 'dark'
|
||||
? '#121111ff'
|
||||
: '#e9ecef'
|
||||
: 'transparent',
|
||||
fontWeight: currentScreenshotIndex === idx ? 600 : 400,
|
||||
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
}}
|
||||
>
|
||||
<ArrowBackIcon />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigateScreenshots('next')}
|
||||
disabled={currentScreenshotIndex === screenshotKeys.length - 1}
|
||||
sx={{
|
||||
borderColor: '#FF00C3',
|
||||
color: currentScreenshotIndex === screenshotKeys.length - 1 ? 'gray' : '#FF00C3',
|
||||
'&.Mui-disabled': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.12)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArrowForwardIcon />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Box>
|
||||
<img
|
||||
src={row.binaryOutput[screenshotKeys[currentScreenshotIndex]]}
|
||||
alt={`Screenshot ${screenshotKeys[currentScreenshotIndex]}`}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
/>
|
||||
{key}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 1 }}>
|
||||
{screenshotKeys.length > 0 && (
|
||||
<img
|
||||
src={row.binaryOutput[screenshotKeyMap[screenshotKeys[currentScreenshotIndex]]]}
|
||||
alt={`Screenshot ${screenshotKeys[currentScreenshotIndex]}`}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)}
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
|
||||
import { useSocketStore } from "./socket";
|
||||
import { useGlobalInfoStore } from "./globalInfo";
|
||||
|
||||
export interface TextStep {
|
||||
id: number;
|
||||
@@ -8,11 +10,13 @@ export interface TextStep {
|
||||
isShadow?: boolean;
|
||||
selectorObj: SelectorObject;
|
||||
actionId?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
interface ScreenshotStep {
|
||||
export interface ScreenshotStep {
|
||||
id: number;
|
||||
type: 'screenshot';
|
||||
name?: string;
|
||||
fullPage: boolean;
|
||||
actionId?: string;
|
||||
screenshotData?: string;
|
||||
@@ -21,6 +25,7 @@ interface ScreenshotStep {
|
||||
export interface ListStep {
|
||||
id: number;
|
||||
type: 'list';
|
||||
name?: string;
|
||||
listSelector: string;
|
||||
isShadow?: boolean;
|
||||
fields: { [key: string]: TextStep };
|
||||
@@ -31,112 +36,331 @@ export interface ListStep {
|
||||
};
|
||||
limit?: number;
|
||||
actionId?: string;
|
||||
data?: any[];
|
||||
}
|
||||
|
||||
export type BrowserStep = TextStep | ScreenshotStep | ListStep;
|
||||
|
||||
export interface SelectorObject {
|
||||
selector: string;
|
||||
isShadow?: boolean;
|
||||
tag?: string;
|
||||
attribute?: string;
|
||||
isShadow?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface BrowserStepsContextType {
|
||||
browserSteps: BrowserStep[];
|
||||
addTextStep: (label: string, data: string, selectorObj: SelectorObject, actionId: string) => void;
|
||||
addListStep: (listSelector: string, fields: { [key: string]: TextStep }, listId: number, actionId: string, pagination?: { type: string; selector: string, isShadow?: boolean }, limit?: number, isShadow?: boolean) => void
|
||||
addTextStep: (
|
||||
label: string,
|
||||
data: string,
|
||||
selectorObj: SelectorObject,
|
||||
actionId: string
|
||||
) => void;
|
||||
addListStep: (
|
||||
listSelector: string,
|
||||
fields: { [key: string]: TextStep },
|
||||
listId: number,
|
||||
actionId: string,
|
||||
pagination?: {
|
||||
type: string;
|
||||
selector: string;
|
||||
isShadow?: boolean;
|
||||
},
|
||||
limit?: number,
|
||||
isShadow?: boolean
|
||||
) => void;
|
||||
addScreenshotStep: (fullPage: boolean, actionId: string) => void;
|
||||
deleteBrowserStep: (id: number) => void;
|
||||
updateBrowserTextStepLabel: (id: number, newLabel: string) => void;
|
||||
updateListTextFieldLabel: (listId: number, fieldKey: string, newLabel: string) => void;
|
||||
updateListTextFieldLabel: (
|
||||
listId: number,
|
||||
fieldKey: string,
|
||||
newLabel: string
|
||||
) => void;
|
||||
updateListStepLimit: (listId: number, limit: number) => void;
|
||||
updateListStepData: (listId: number, extractedData: any[]) => void;
|
||||
updateListStepName: (listId: number, name: string) => void;
|
||||
updateScreenshotStepName: (id: number, name: string) => void;
|
||||
removeListTextField: (listId: number, fieldKey: string) => void;
|
||||
deleteStepsByActionId: (actionId: string) => void;
|
||||
updateScreenshotStepData: (id: number, screenshotData: string) => void;
|
||||
emitActionForStep: (step: BrowserStep) => void;
|
||||
emitForStepId: (actionId: string, nameOverride?: string) => void;
|
||||
}
|
||||
|
||||
const BrowserStepsContext = createContext<BrowserStepsContextType | undefined>(undefined);
|
||||
|
||||
export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const { socket } = useSocketStore();
|
||||
const { currentTextGroupName } = useGlobalInfoStore();
|
||||
const [browserSteps, setBrowserSteps] = useState<BrowserStep[]>([]);
|
||||
const [discardedFields, setDiscardedFields] = useState<Set<string>>(new Set());
|
||||
|
||||
const browserStepsRef = useRef<BrowserStep[]>(browserSteps);
|
||||
useEffect(() => {
|
||||
browserStepsRef.current = browserSteps;
|
||||
}, [browserSteps]);
|
||||
|
||||
const currentTextGroupNameRef = useRef(currentTextGroupName);
|
||||
|
||||
useEffect(() => {
|
||||
currentTextGroupNameRef.current = currentTextGroupName;
|
||||
}, [currentTextGroupName]);
|
||||
|
||||
const getListSettingsObject = (listStep: ListStep) => {
|
||||
const fields: Record<string, {
|
||||
selector: string;
|
||||
tag?: string;
|
||||
[key: string]: any;
|
||||
isShadow?: boolean;
|
||||
}> = {};
|
||||
|
||||
Object.entries(listStep.fields).forEach(([id, field]) => {
|
||||
if (field.selectorObj?.selector) {
|
||||
fields[field.label] = {
|
||||
selector: field.selectorObj.selector,
|
||||
tag: field.selectorObj.tag,
|
||||
attribute: field.selectorObj.attribute,
|
||||
isShadow: field.selectorObj.isShadow
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
listSelector: listStep.listSelector,
|
||||
fields: fields,
|
||||
pagination: {
|
||||
type: listStep.pagination?.type || "",
|
||||
selector: listStep.pagination?.selector,
|
||||
isShadow: listStep.isShadow
|
||||
},
|
||||
limit: listStep.limit,
|
||||
isShadow: listStep.isShadow
|
||||
};
|
||||
};
|
||||
|
||||
const emitActionForStep = (step: BrowserStep) => {
|
||||
if (!socket) return;
|
||||
if (!step.actionId) return;
|
||||
if (!socket.connected) return;
|
||||
|
||||
let action = "";
|
||||
let settings: any = {};
|
||||
|
||||
// Always read the latest steps from the ref to prevent stale data
|
||||
const latestSteps = browserStepsRef.current;
|
||||
|
||||
if (step.type === "list") {
|
||||
action = "scrapeList";
|
||||
const baseSettings = getListSettingsObject(step);
|
||||
settings = {
|
||||
...baseSettings,
|
||||
name: step.name || `List Data ${latestSteps.filter(s => s.type === "list").length}`,
|
||||
};
|
||||
|
||||
} else if (step.type === "text") {
|
||||
action = "scrapeSchema";
|
||||
|
||||
const freshTextSteps = latestSteps.filter(
|
||||
(s): s is TextStep => s.type === "text" && s.actionId === step.actionId
|
||||
);
|
||||
|
||||
// Build schema settings from text steps
|
||||
const fieldSettings: Record<
|
||||
string,
|
||||
{
|
||||
selector: string;
|
||||
tag?: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
> = {};
|
||||
|
||||
freshTextSteps.forEach((textStep) => {
|
||||
if (textStep.selectorObj?.selector && textStep.label) {
|
||||
fieldSettings[textStep.label] = {
|
||||
selector: textStep.selectorObj.selector,
|
||||
tag: textStep.selectorObj.tag,
|
||||
attribute: textStep.selectorObj.attribute,
|
||||
isShadow: textStep.selectorObj.isShadow,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
settings = {
|
||||
...fieldSettings,
|
||||
name: currentTextGroupNameRef.current || "Text Data",
|
||||
};
|
||||
|
||||
} else if (step.type === "screenshot") {
|
||||
action = "screenshot";
|
||||
|
||||
const freshScreenshot = latestSteps.find(
|
||||
(s) => s.type === "screenshot" && s.actionId === step.actionId
|
||||
) as ScreenshotStep | undefined;
|
||||
|
||||
settings = {
|
||||
name:
|
||||
step.name ||
|
||||
freshScreenshot?.name ||
|
||||
`Screenshot ${latestSteps.filter((s) => s.type === "screenshot").length}`,
|
||||
type: "png",
|
||||
caret: "hide",
|
||||
scale: "device",
|
||||
timeout: 30000,
|
||||
fullPage: freshScreenshot?.fullPage ?? step.fullPage ?? true,
|
||||
animations: "allow",
|
||||
};
|
||||
}
|
||||
|
||||
socket.emit("action", { action, actionId: step.actionId, settings });
|
||||
};
|
||||
|
||||
const emitForStepId = (actionId: string, nameOverride?: string) => {
|
||||
const step = browserStepsRef.current.find(s => s.actionId === actionId);
|
||||
if (!step) return;
|
||||
|
||||
let enrichedStep = { ...step };
|
||||
|
||||
if (step.type === "text") {
|
||||
enrichedStep = { ...step, name: currentTextGroupNameRef.current };
|
||||
}
|
||||
|
||||
if (step.type === "screenshot") {
|
||||
const freshScreenshot = browserStepsRef.current.find(
|
||||
s => s.type === "screenshot" && s.actionId === actionId
|
||||
) as ScreenshotStep | undefined;
|
||||
|
||||
if (freshScreenshot) {
|
||||
enrichedStep = { ...freshScreenshot };
|
||||
|
||||
if (nameOverride && freshScreenshot.name !== nameOverride) {
|
||||
enrichedStep.name = nameOverride;
|
||||
browserStepsRef.current = browserStepsRef.current.map(s =>
|
||||
s.id === freshScreenshot.id ? { ...s, name: nameOverride } : s
|
||||
);
|
||||
setBrowserSteps(prev =>
|
||||
prev.map(s =>
|
||||
s.id === freshScreenshot.id ? { ...s, name: nameOverride } : s
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (step.type === "list") {
|
||||
const freshList = browserStepsRef.current.find(
|
||||
s => s.type === "list" && s.actionId === actionId
|
||||
) as ListStep | undefined;
|
||||
|
||||
if (freshList) {
|
||||
enrichedStep = { ...freshList };
|
||||
}
|
||||
}
|
||||
|
||||
emitActionForStep(enrichedStep);
|
||||
};
|
||||
|
||||
const addTextStep = (label: string, data: string, selectorObj: SelectorObject, actionId: string) => {
|
||||
setBrowserSteps(prevSteps => [
|
||||
...prevSteps,
|
||||
{ id: Date.now(), type: 'text', label, data, selectorObj, actionId }
|
||||
]);
|
||||
setBrowserSteps((prevSteps) => {
|
||||
const textCount = prevSteps.filter(s => s.type === 'text').length + 1;
|
||||
const generatedLabel = label || `Label ${textCount}`;
|
||||
return [
|
||||
...prevSteps,
|
||||
{
|
||||
id: Date.now(),
|
||||
type: "text",
|
||||
label: generatedLabel,
|
||||
data,
|
||||
selectorObj,
|
||||
actionId,
|
||||
},
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
const addListStep = (
|
||||
listSelector: string,
|
||||
newFields: { [key: string]: TextStep },
|
||||
listId: number,
|
||||
actionId: string,
|
||||
pagination?: { type: string; selector: string; isShadow?: boolean },
|
||||
listSelector: string,
|
||||
newFields: { [key: string]: TextStep },
|
||||
listId: number,
|
||||
actionId: string,
|
||||
pagination?: {
|
||||
type: string;
|
||||
selector: string;
|
||||
isShadow?: boolean;
|
||||
},
|
||||
limit?: number,
|
||||
isShadow?: boolean
|
||||
) => {
|
||||
setBrowserSteps(prevSteps => {
|
||||
const existingListStepIndex = prevSteps.findIndex(step => step.type === 'list' && step.id === listId);
|
||||
|
||||
setBrowserSteps((prevSteps) => {
|
||||
const existingListStepIndex = prevSteps.findIndex(
|
||||
(step) => step.type === "list" && step.id === listId
|
||||
);
|
||||
|
||||
if (existingListStepIndex !== -1) {
|
||||
const updatedSteps = [...prevSteps];
|
||||
const existingListStep = updatedSteps[existingListStepIndex] as ListStep;
|
||||
const existingListStep = updatedSteps[
|
||||
existingListStepIndex
|
||||
] as ListStep;
|
||||
|
||||
// Preserve existing labels for fields
|
||||
const mergedFields = Object.entries(newFields).reduce((acc, [key, field]) => {
|
||||
if (!discardedFields.has(`${listId}-${key}`)) {
|
||||
// If field exists, preserve its label
|
||||
if (existingListStep.fields[key]) {
|
||||
acc[key] = {
|
||||
...field,
|
||||
label: existingListStep.fields[key].label,
|
||||
actionId
|
||||
};
|
||||
} else {
|
||||
acc[key] = {
|
||||
...field,
|
||||
actionId
|
||||
};
|
||||
const mergedFields = Object.entries(newFields).reduce(
|
||||
(acc, [key, field]) => {
|
||||
if (!discardedFields.has(`${listId}-${key}`)) {
|
||||
// If field exists, preserve its label
|
||||
if (existingListStep.fields[key]) {
|
||||
acc[key] = {
|
||||
...field,
|
||||
label: existingListStep.fields[key].label,
|
||||
actionId,
|
||||
};
|
||||
} else {
|
||||
acc[key] = {
|
||||
...field,
|
||||
actionId,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {} as { [key: string]: TextStep });
|
||||
return acc;
|
||||
},
|
||||
{} as { [key: string]: TextStep }
|
||||
);
|
||||
|
||||
updatedSteps[existingListStepIndex] = {
|
||||
...existingListStep,
|
||||
listSelector,
|
||||
fields: mergedFields,
|
||||
pagination: pagination || existingListStep.pagination,
|
||||
limit: limit,
|
||||
isShadow: isShadow !== undefined ? isShadow : existingListStep.isShadow,
|
||||
actionId,
|
||||
isShadow: isShadow !== undefined ? isShadow : existingListStep.isShadow
|
||||
};
|
||||
return updatedSteps;
|
||||
} else {
|
||||
const fieldsWithActionId = Object.entries(newFields).reduce((acc, [key, field]) => {
|
||||
acc[key] = {
|
||||
...field,
|
||||
actionId
|
||||
};
|
||||
return acc;
|
||||
}, {} as { [key: string]: TextStep });
|
||||
const fieldsWithActionId = Object.entries(newFields).reduce(
|
||||
(acc, [key, field]) => {
|
||||
acc[key] = {
|
||||
...field,
|
||||
actionId,
|
||||
};
|
||||
return acc;
|
||||
},
|
||||
{} as { [key: string]: TextStep }
|
||||
);
|
||||
|
||||
const listCount = prevSteps.filter(s => s.type === 'list').length + 1;
|
||||
return [
|
||||
...prevSteps,
|
||||
{
|
||||
id: listId,
|
||||
type: 'list',
|
||||
listSelector,
|
||||
fields: fieldsWithActionId,
|
||||
pagination,
|
||||
limit,
|
||||
{
|
||||
id: listId,
|
||||
type: "list",
|
||||
name: `List Data ${listCount}`,
|
||||
listSelector,
|
||||
fields: fieldsWithActionId,
|
||||
pagination,
|
||||
limit,
|
||||
actionId,
|
||||
isShadow
|
||||
}
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
@@ -165,22 +389,39 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
);
|
||||
};
|
||||
|
||||
const updateListTextFieldLabel = (listId: number, fieldKey: string, newLabel: string) => {
|
||||
setBrowserSteps(prevSteps =>
|
||||
prevSteps.map(step => {
|
||||
if (step.type === 'list' && step.id === listId) {
|
||||
// Ensure deep copy of the fields object
|
||||
const updateListTextFieldLabel = (
|
||||
listId: number,
|
||||
fieldKey: string,
|
||||
newLabel: string
|
||||
) => {
|
||||
setBrowserSteps((prevSteps) =>
|
||||
prevSteps.map((step) => {
|
||||
if (step.type === "list" && step.id === listId) {
|
||||
const oldLabel = step.fields[fieldKey].label;
|
||||
|
||||
const updatedFields = {
|
||||
...step.fields,
|
||||
[fieldKey]: {
|
||||
...step.fields[fieldKey],
|
||||
label: newLabel
|
||||
}
|
||||
label: newLabel,
|
||||
},
|
||||
};
|
||||
|
||||
const updatedData = step.data?.map((row: any) => {
|
||||
if (row[oldLabel] !== undefined) {
|
||||
const { [oldLabel]: value, ...rest } = row;
|
||||
return {
|
||||
...rest,
|
||||
[newLabel]: value,
|
||||
};
|
||||
}
|
||||
return row;
|
||||
});
|
||||
|
||||
return {
|
||||
...step,
|
||||
fields: updatedFields
|
||||
fields: updatedFields,
|
||||
data: updatedData,
|
||||
};
|
||||
}
|
||||
return step;
|
||||
@@ -194,7 +435,7 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
if (step.type === 'list' && step.id === listId) {
|
||||
return {
|
||||
...step,
|
||||
data: extractedData // Add the extracted data to the step
|
||||
data: extractedData
|
||||
};
|
||||
}
|
||||
return step;
|
||||
@@ -217,49 +458,83 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
};
|
||||
|
||||
const updateListStepLimit = (listId: number, limit: number) => {
|
||||
setBrowserSteps(prevSteps =>
|
||||
prevSteps.map(step => {
|
||||
if (step.type === 'list' && step.id === listId) {
|
||||
return {
|
||||
...step,
|
||||
limit: limit
|
||||
};
|
||||
}
|
||||
return step;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const removeListTextField = (listId: number, fieldKey: string) => {
|
||||
setBrowserSteps(prevSteps =>
|
||||
prevSteps.map(step => {
|
||||
if (step.type === 'list' && step.id === listId) {
|
||||
const { [fieldKey]: _, ...remainingFields } = step.fields;
|
||||
return {
|
||||
...step,
|
||||
fields: remainingFields
|
||||
limit: limit
|
||||
};
|
||||
}
|
||||
return step;
|
||||
})
|
||||
);
|
||||
setDiscardedFields(prevDiscarded => new Set(prevDiscarded).add(`${listId}-${fieldKey}`));
|
||||
};
|
||||
|
||||
const updateListStepName = (listId: number, name: string) => {
|
||||
setBrowserSteps((prevSteps) =>
|
||||
prevSteps.map((step) => {
|
||||
if (step.type === "list" && step.id === listId) {
|
||||
return {
|
||||
...step,
|
||||
name: name,
|
||||
};
|
||||
}
|
||||
return step;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const updateScreenshotStepName = (id: number, name: string) => {
|
||||
setBrowserSteps(prevSteps => {
|
||||
const updated = prevSteps.map(step =>
|
||||
step.id === id && step.type === 'screenshot'
|
||||
? { ...step, name }
|
||||
: step
|
||||
);
|
||||
browserStepsRef.current = updated;
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const removeListTextField = (listId: number, fieldKey: string) => {
|
||||
setBrowserSteps((prevSteps) =>
|
||||
prevSteps.map((step) => {
|
||||
if (step.type === "list" && step.id === listId) {
|
||||
const { [fieldKey]: _, ...remainingFields } = step.fields;
|
||||
return {
|
||||
...step,
|
||||
fields: remainingFields,
|
||||
};
|
||||
}
|
||||
return step;
|
||||
})
|
||||
);
|
||||
setDiscardedFields((prevDiscarded) =>
|
||||
new Set(prevDiscarded).add(`${listId}-${fieldKey}`)
|
||||
);
|
||||
};
|
||||
return (
|
||||
<BrowserStepsContext.Provider value={{
|
||||
browserSteps,
|
||||
addTextStep,
|
||||
addListStep,
|
||||
addScreenshotStep,
|
||||
deleteBrowserStep,
|
||||
updateBrowserTextStepLabel,
|
||||
updateListTextFieldLabel,
|
||||
updateListStepLimit,
|
||||
updateListStepData,
|
||||
removeListTextField,
|
||||
deleteStepsByActionId,
|
||||
updateScreenshotStepData,
|
||||
}}>
|
||||
<BrowserStepsContext.Provider
|
||||
value={{
|
||||
browserSteps,
|
||||
addTextStep,
|
||||
addListStep,
|
||||
addScreenshotStep,
|
||||
deleteBrowserStep,
|
||||
updateBrowserTextStepLabel,
|
||||
updateListTextFieldLabel,
|
||||
updateListStepLimit,
|
||||
updateListStepData,
|
||||
updateListStepName,
|
||||
updateScreenshotStepName,
|
||||
removeListTextField,
|
||||
deleteStepsByActionId,
|
||||
updateScreenshotStepData,
|
||||
emitActionForStep,
|
||||
emitForStepId
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BrowserStepsContext.Provider>
|
||||
);
|
||||
|
||||
@@ -139,6 +139,8 @@ interface GlobalInfo {
|
||||
setCurrentListActionId: (actionId: string) => void;
|
||||
currentScreenshotActionId: string;
|
||||
setCurrentScreenshotActionId: (actionId: string) => void;
|
||||
currentTextGroupName: string;
|
||||
setCurrentTextGroupName: (name: string) => void;
|
||||
isDOMMode: boolean;
|
||||
setIsDOMMode: (isDOMMode: boolean) => void;
|
||||
currentSnapshot: ProcessedSnapshot | null;
|
||||
@@ -173,6 +175,7 @@ class GlobalInfoStore implements Partial<GlobalInfo> {
|
||||
currentTextActionId = '';
|
||||
currentListActionId = '';
|
||||
currentScreenshotActionId = '';
|
||||
currentTextGroupName = 'Text Data';
|
||||
isDOMMode = false;
|
||||
currentSnapshot = null;
|
||||
};
|
||||
@@ -282,6 +285,7 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
|
||||
const [currentTextActionId, setCurrentTextActionId] = useState<string>('');
|
||||
const [currentListActionId, setCurrentListActionId] = useState<string>('');
|
||||
const [currentScreenshotActionId, setCurrentScreenshotActionId] = useState<string>('');
|
||||
const [currentTextGroupName, setCurrentTextGroupName] = useState<string>('Text Data');
|
||||
const [isDOMMode, setIsDOMMode] = useState<boolean>(globalInfoStore.isDOMMode);
|
||||
const [currentSnapshot, setCurrentSnapshot] = useState<ProcessedSnapshot | null>(globalInfoStore.currentSnapshot);
|
||||
|
||||
@@ -363,6 +367,8 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
|
||||
setCurrentListActionId,
|
||||
currentScreenshotActionId,
|
||||
setCurrentScreenshotActionId,
|
||||
currentTextGroupName,
|
||||
setCurrentTextGroupName,
|
||||
isDOMMode,
|
||||
setIsDOMMode,
|
||||
currentSnapshot,
|
||||
|
||||
85
src/helpers/capturedElementHighlighter.ts
Normal file
85
src/helpers/capturedElementHighlighter.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Helper class for managing persistent highlights of captured elements.
|
||||
* Shows dotted highlights for elements that have been captured but not yet confirmed.
|
||||
*/
|
||||
class CapturedElementHighlighter {
|
||||
private static readonly STYLE_ID = 'maxun-captured-elements-style';
|
||||
|
||||
/**
|
||||
* Apply persistent dotted highlights to captured elements in the DOM iframe
|
||||
* @param selectors Array of captured element selectors
|
||||
*/
|
||||
public applyHighlights(selectors: Array<{ selector: string }>): void {
|
||||
const iframeDoc = this.getIframeDocument();
|
||||
if (!iframeDoc) return;
|
||||
|
||||
// Remove existing highlights
|
||||
this.clearHighlights();
|
||||
|
||||
// Create CSS rules for each captured selector
|
||||
const cssRules: string[] = [];
|
||||
|
||||
selectors.forEach(({ selector }) => {
|
||||
const cssSelector = this.getCSSSelector(selector);
|
||||
|
||||
if (cssSelector) {
|
||||
cssRules.push(`
|
||||
${cssSelector} {
|
||||
outline: 2px dotted #ff00c3 !important;
|
||||
outline-offset: 2px !important;
|
||||
background-color: rgba(255, 0, 195, 0.08) !important;
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
// Inject style element
|
||||
if (cssRules.length > 0) {
|
||||
const styleElement = iframeDoc.createElement('style');
|
||||
styleElement.id = CapturedElementHighlighter.STYLE_ID;
|
||||
styleElement.textContent = cssRules.join('\n');
|
||||
iframeDoc.head.appendChild(styleElement);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all persistent highlights from the DOM iframe
|
||||
*/
|
||||
public clearHighlights(): void {
|
||||
const iframeDoc = this.getIframeDocument();
|
||||
if (!iframeDoc) return;
|
||||
|
||||
const existingStyle = iframeDoc.getElementById(CapturedElementHighlighter.STYLE_ID);
|
||||
if (existingStyle) {
|
||||
existingStyle.remove();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the iframe document
|
||||
*/
|
||||
private getIframeDocument(): Document | null {
|
||||
const iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
|
||||
return iframeElement?.contentDocument || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert selector to CSS format for highlighting
|
||||
*/
|
||||
private getCSSSelector(selector: string): string {
|
||||
// Handle XPath selectors by extracting data-mx-id
|
||||
if (selector.startsWith('//') || selector.startsWith('(//')) {
|
||||
const mxIdMatch = selector.match(/data-mx-id='([^']+)'/);
|
||||
if (mxIdMatch) {
|
||||
return `[data-mx-id='${mxIdMatch[1]}']`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// Already a CSS selector
|
||||
return selector;
|
||||
}
|
||||
}
|
||||
|
||||
export const capturedElementHighlighter = new CapturedElementHighlighter();
|
||||
Reference in New Issue
Block a user