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

feat: browser & right panel ui

Browse Source
This commit is contained in:
karishmas6
2024-10-11 10:20:24 +05:30
parent 3fa18aa45c
commit 8c86e84a19
23 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/AlertSnackbar.tsx
View File

@@ -31,7 +31,7 @@ export const AlertSnackbar = ({ severity, message, isOpen }: AlertSnackbarProps)
};
return (
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={5000} onClose={handleClose}>
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={3000} onClose={handleClose}>
<Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
{message}
</Alert>

2
src/components/atoms/GenericModal.tsx
View File

@@ -33,7 +33,7 @@ const defaultModalStyle = {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 500,
width: 300,
bgcolor: 'background.paper',
boxShadow: 24,
p: 4,

2
src/components/atoms/PairDisplayDiv.tsx
View File

@@ -35,7 +35,7 @@ export const PairDisplayDiv: FC<PairDisplayDivProps> = ({ index, pair }) => {
const DescriptionWrapper = styled.div`
margin: 0;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-weight: 400;
font-weight: 300;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.00938em;

2
src/components/atoms/RecorderIcon.tsx
View File

@@ -15,7 +15,7 @@ export const RecordingIcon = () => {
textTransform: 'none',
}}
fill="white"
d="m82.048,962.36c-0.18271-0.003-0.35147-0.001-0.53125,0.0312-0.69633,0.12662-1.3353,0.54943-1.7812,1.1562l-0.03125-0.0312-0.03125,0.0625-18.031,22.125h-44.438c-2.809,0-5.0938,2.2847-5.0938,5.0938v35.531c0,2.8091,2.2847,5.125,5.0938,5.125h20.562l-1.3125,4.5938h-0.71875c-1.1137,0-2.0312,0.9175-2.0312,2.0312v2.2188c0,1.1137,0.91751,2.0625,2.0312,2.0625h19.938c1.1137,0,2.0312-0.9488,2.0312-2.0625v-2.2188c0-1.1137-0.91751-2.0312-2.0312-2.0312h-0.71875l-1.3438-4.5938h20.438c2.809,0,5.0938-2.3159,5.0938-5.125v-35.531c0-1.7706-0.90663-3.3369-2.2812-4.25l10.531-17.625,0.03125-0.0625c0.84234-1.2783,0.51486-3.0308-0.75-3.9062l-3.0312-2.0938c-0.48208-0.33338-1.0456-0.49073-1.5938-0.5zm-0.21875,1.6875c0.28723-0.0523,0.57635,0.0338,0.84375,0.21875l3.0312,2.0938c0.53421,0.36973,0.65504,1.0569,0.28125,1.5938a0.85008,0.85008,0,0,0,-0.03125,0.0312l-17.906,30.062-9.0938-6.3125,22.094-27.125a0.85008,0.85008,0,0,0,0.03125,-0.0625c0.18694-0.26873,0.46277-0.4477,0.75-0.5zm-64.625,23.344,43.062,0-2.3438,2.9062-40.688,0c-0.0312-0.002-0.06255-0.002-0.09375,0-0.0312-0.002-0.06255-0.002-0.09375,0-0.38644,0.0753-0.69183,0.45007-0.6875,0.84375v34.844c0.003,0.4514,0.42377,0.857,0.875,0.8437h56.781c0.44088,0,0.84048-0.4028,0.84375-0.8437v-34.844c-0.008-0.25538-0.13841-0.50419-0.34375-0.65625l1.5-2.5c0.87419,0.61342,1.4375,1.6512,1.4375,2.8125v35.531c0,1.8967-1.5096,3.4063-3.4062,3.4063h-56.844c-1.8966,0-3.4062-1.5096-3.4062-3.4063v-35.531c0-1.8966,1.5096-3.4062,3.4062-3.4062zm0.875,4.5938,38.469,0-1.0312,1.25,0,0.0312c-0.48971,0.60518-0.64056,1.3922-0.5,2.0312,0.14234,0.64722,0.49536,1.1659,0.84375,1.6562a0.85008,0.85008,0,0,0,0.1875,0.21875l1.2812,0.875c-1.0387,0.79518-2.0706,1.1661-3.2188,1.6562-1.4337,0.61212-3.0045,1.4512-4.3438,3.375-1.1451,1.6448-1.0525,3.5446-0.78125,5.3437,0.27121,1.7991,0.70152,3.5802,0.5625,5.2188a0.85008,0.85008,0,0,0,1.2188,0.8437c1.4928-0.7039,3.3085-0.9361,5.0938-1.3125s3.6049-0.9489,4.75-2.5937c1.34-1.9249,1.5559-3.6628,1.625-5.2188,0.05552-1.2502,0.05447-2.363,0.4375-3.625l1.2812,0.875c1.2744,0.8814,3.0499,0.4785,3.8438-0.8437l0.03125-0.031,1.125-1.9063a0.85008,0.85008,0,0,0,0.03125,-0.0312l0.03125-0.0312a0.85008,0.85008,0,0,0,0.09375,-0.21875l4.0625-6.8125v32.406h-55.094v-33.156zm39.812,1.0625,9.3125,6.4375-0.84375,1.4062a0.85008,0.85008,0,0,0,-0.03125,0c-0.33037,0.5726-0.86691,0.7168-1.4062,0.3438l-2.1875-1.5-0.1875-0.15625-0.65625-0.4375-1.8438-1.2812-0.84375-0.59375-0.0625-0.0312-1.9688-1.3438c-0.25075-0.36937-0.4494-0.7387-0.5-0.96875-0.0558-0.25371-0.0497-0.34572,0.15625-0.59375l1.0625-1.2812zm0.84375,5.9688,0.34375,0.25,1.8438,1.25,0.375,0.25c-0.60662,1.6994-0.69236,3.2017-0.75,4.5-0.0657,1.481-0.18871,2.7295-1.3125,4.3438-0.76502,1.0988-2.0465,1.5537-3.7188,1.9062-1.3283,0.2801-2.854,0.5618-4.3438,1.0625-0.0521-1.5631-0.29881-3.0716-0.5-4.4062-0.25388-1.6841-0.29624-3.0262,0.46875-4.125,1.1246-1.6154,2.2602-2.1673,3.625-2.75,1.1932-0.5094,2.5901-1.1274,3.9688-2.2813zm-30.5,2.5313c-1.6815,0-3.0625,1.4119-3.0625,3.0937s1.381,3.0313,3.0625,3.0313,3.0625-1.3495,3.0625-3.0313-1.381-3.0937-3.0625-3.0937zm0,1.7187c0.76283,0,1.375,0.612,1.375,1.375s-0.61217,1.3438-1.375,1.3438-1.3438-0.5808-1.3438-1.3438,0.58092-1.375,1.3438-1.375zm8,5.6563c-3.3379,0.1812-7.1915,2.4749-10.344,4.6875-3.1522,2.2126-5.5625,4.4062-5.5625,4.4062-0.3273,0.3027-0.36527,0.8915-0.0625,1.2188,0.30273,0.3272,0.89151,0.334,1.2188,0.031,0,0,2.3185-2.1046,5.375-4.25s6.8989-4.2667,9.4688-4.4063c1.6177-0.088,4.3314,1.0381,6.5312,2.25,2.1999,1.212,3.9375,2.4375,3.9375,2.4375,0.35264,0.3353,1.001,0.2728,1.2812-0.125,0.28024-0.3977,0.12188-1.0307-0.3125-1.25,0,0-1.7602-1.2941-4.0625-2.5625-2.3024-1.2684-5.0831-2.567-7.4688-2.4375zm3.2812,22.562,12.344,0,1.3438,4.5312-15,0,1.3125-4.5312zm-3.7812,6.25,19.938,0c0.20135,0,0.3125,0.1424,0.3125,0.3437v2.2188c0,0.2013-0.11115,0.3437-0.3125,0.3437h-19.938c-0.20135,0-0.34375-0.1424-0.34375-0.3437v-2.2188c0-0.2013,0.1424-0.3437,0.34375-0.3437z" />
d="m82.048,962.36c-0.18271-0.003-0.35147-0.001-0.53125,0.0312-0.69633,0.12662-1.3353,0.54943-1.7812,1.1562l-0.03125-0.0312-0.03125,0.0625-18.031,22.125h-44.438c-2.809,0-5.0938,2.2847-5.0938,5.0938v35.531c0,2.8091,2.2847,5.125,5.0938,5.125h20.562l-1.3125,4.5938h-0.71875c-1.1137,0-2.0312,0.9175-2.0312,2.0312v2.2188c0,1.1137,0.91751,2.0625,2.0312,2.0625h19.938c1.1137,0,2.0312-0.9488,2.0312-2.0625v-2.2188c0-1.1137-0.91751-2.0312-2.0312-2.0312h-0.71875l-1.3438-4.5938h20.438c2.809,0,5.0938-2.3159,5.0938-5.125v-35.531c0-1.7706-0.90663-3.3369-2.2812-4.25l10.531-17.625,0.03125-0.0625c0.84234-1.2783,0.51486-3.0308-0.75-3.9062l-3.0312-2.0938c-0.48208-0.33338-1.0456-0.49073-1.5938-0.5zm-0.21875,1.6875c0.28723-0.0523,0.57635,0.0338,0.84375,0.21875l3.0312,2.0938c0.53421,0.36973,0.65504,1.0569,0.28125,1.5938a0.83008,0.83008,0,0,0,-0.03125,0.0312l-17.906,30.062-9.0938-6.3125,22.094-27.125a0.83008,0.83008,0,0,0,0.03125,-0.0625c0.18694-0.26873,0.46277-0.4477,0.75-0.5zm-64.625,23.344,43.062,0-2.3438,2.9062-40.688,0c-0.0312-0.002-0.06255-0.002-0.09375,0-0.0312-0.002-0.06255-0.002-0.09375,0-0.38644,0.0753-0.69183,0.43007-0.6875,0.84375v34.844c0.003,0.4514,0.42377,0.857,0.875,0.8437h56.781c0.44088,0,0.84048-0.4028,0.84375-0.8437v-34.844c-0.008-0.25538-0.13841-0.50419-0.34375-0.65625l1.5-2.5c0.87419,0.61342,1.4375,1.6512,1.4375,2.8125v35.531c0,1.8967-1.5096,3.4063-3.4062,3.4063h-56.844c-1.8966,0-3.4062-1.5096-3.4062-3.4063v-35.531c0-1.8966,1.5096-3.4062,3.4062-3.4062zm0.875,4.5938,38.469,0-1.0312,1.25,0,0.0312c-0.48971,0.60518-0.64056,1.3922-0.5,2.0312,0.14234,0.64722,0.49536,1.1659,0.84375,1.6562a0.83008,0.83008,0,0,0,0.1875,0.21875l1.2812,0.875c-1.0387,0.79518-2.0706,1.1661-3.2188,1.6562-1.4337,0.61212-3.0045,1.4512-4.3438,3.375-1.1451,1.6448-1.0525,3.5446-0.78125,5.3437,0.27121,1.7991,0.70152,3.5802,0.5625,5.2188a0.83008,0.83008,0,0,0,1.2188,0.8437c1.4928-0.7039,3.3085-0.9361,5.0938-1.3125s3.6049-0.9489,4.75-2.5937c1.34-1.9249,1.5559-3.6628,1.625-5.2188,0.05552-1.2502,0.05447-2.363,0.4375-3.625l1.2812,0.875c1.2744,0.8814,3.0499,0.4785,3.8438-0.8437l0.03125-0.031,1.125-1.9063a0.83008,0.83008,0,0,0,0.03125,-0.0312l0.03125-0.0312a0.83008,0.83008,0,0,0,0.09375,-0.21875l4.0625-6.8125v32.406h-55.094v-33.156zm39.812,1.0625,9.3125,6.4375-0.84375,1.4062a0.83008,0.83008,0,0,0,-0.03125,0c-0.33037,0.5726-0.86691,0.7168-1.4062,0.3438l-2.1875-1.5-0.1875-0.15625-0.65625-0.4375-1.8438-1.2812-0.84375-0.59375-0.0625-0.0312-1.9688-1.3438c-0.25075-0.36937-0.4494-0.7387-0.5-0.96875-0.0558-0.25371-0.0497-0.34572,0.15625-0.59375l1.0625-1.2812zm0.84375,5.9688,0.34375,0.25,1.8438,1.25,0.375,0.25c-0.60662,1.6994-0.69236,3.2017-0.75,4.5-0.0657,1.481-0.18871,2.7295-1.3125,4.3438-0.76502,1.0988-2.0465,1.5537-3.7188,1.9062-1.3283,0.2801-2.854,0.5618-4.3438,1.0625-0.0521-1.5631-0.29881-3.0716-0.5-4.4062-0.25388-1.6841-0.29624-3.0262,0.46875-4.125,1.1246-1.6154,2.2602-2.1673,3.625-2.75,1.1932-0.5094,2.5901-1.1274,3.9688-2.2813zm-30.5,2.5313c-1.6815,0-3.0625,1.4119-3.0625,3.0937s1.381,3.0313,3.0625,3.0313,3.0625-1.3495,3.0625-3.0313-1.381-3.0937-3.0625-3.0937zm0,1.7187c0.76283,0,1.375,0.612,1.375,1.375s-0.61217,1.3438-1.375,1.3438-1.3438-0.5808-1.3438-1.3438,0.58092-1.375,1.3438-1.375zm8,5.6563c-3.3379,0.1812-7.1915,2.4749-10.344,4.6875-3.1522,2.2126-5.5625,4.4062-5.5625,4.4062-0.3273,0.3027-0.36527,0.8915-0.0625,1.2188,0.30273,0.3272,0.89151,0.334,1.2188,0.031,0,0,2.3185-2.1046,5.375-4.25s6.8989-4.2667,9.4688-4.4063c1.6177-0.088,4.3314,1.0381,6.5312,2.25,2.1999,1.212,3.9375,2.4375,3.9375,2.4375,0.35264,0.3353,1.001,0.2728,1.2812-0.125,0.28024-0.3977,0.12188-1.0307-0.3125-1.25,0,0-1.7602-1.2941-4.0625-2.5625-2.3024-1.2684-5.0831-2.567-7.4688-2.4375zm3.2812,22.562,12.344,0,1.3438,4.5312-15,0,1.3125-4.5312zm-3.7812,6.25,19.938,0c0.20135,0,0.3125,0.1424,0.3125,0.3437v2.2188c0,0.2013-0.11115,0.3437-0.3125,0.3437h-19.938c-0.20135,0-0.34375-0.1424-0.34375-0.3437v-2.2188c0-0.2013,0.1424-0.3437,0.34375-0.3437z" />
</g>
</g>
</svg>

4
src/components/atoms/canvas.tsx
View File

@@ -140,8 +140,8 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
<canvas
tabIndex={0}
ref={canvasRef}
height={720}
width={1280}
height={300}
width={900}
/>
);

2
src/components/atoms/texts.tsx
View File

@@ -9,7 +9,7 @@ export const WarningText = styled.p`
background: rgba(255,165,0,0.15);
padding: 5px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-weight: 400;
font-weight: 300;
line-height: 1.5;
letter-spacing: 0.00938em;
`

2
src/components/molecules/BrowserNavBar.tsx
View File

@@ -77,7 +77,7 @@ const BrowserNavBar: FC<NavBarProps> = ({
};
return (
<StyledNavBar browserWidth={browserWidth}>
<StyledNavBar browserWidth={900}>
<NavBarButton
type="button"
onClick={() => {

2
src/components/molecules/BrowserTabs.tsx
View File

@@ -31,7 +31,7 @@ export const BrowserTabs = (
return (
<Box sx={{
width: `${width}px`,
width: 800,
display: 'flex',
overflow: 'auto',
alignItems: 'center',

2
src/components/molecules/InterpretationButtons.tsx
View File

@@ -160,7 +160,7 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 500,
width: 300,
background: 'white',
border: '2px solid #000',
boxShadow: '24',

6
src/components/molecules/InterpretationLog.tsx
View File

@@ -114,7 +114,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
background: '#3f4853',
border: 'none',
padding: '10px 20px',
width: 1280,
width: 900,
textAlign: 'left'
}}>
Interpretation Log
@@ -129,7 +129,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
background: 'white',
color: 'black',
padding: '10px',
height: 720,
height: 300,
width: width - 10,
display: 'flex'
}
@@ -173,7 +173,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
<FormLabel>
<h4>What is the maximum number of rows you want to extract?</h4>
</FormLabel>
<RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '500px' }}>
<RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '300px' }}>
<FormControlLabel value="10" control={<Radio />} label="10" />
<FormControlLabel value="100" control={<Radio />} label="100" />
<FormControlLabel value="custom" control={<Radio />} label="Custom" />

6
src/components/molecules/NavBar.tsx
View File

@@ -94,7 +94,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
color: 'white',
marginRight: '10px',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontWeight: '300',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',
@@ -112,7 +112,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
color: 'white',
marginRight: '10px',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontWeight: '300',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',
@@ -129,7 +129,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
color: 'white',
marginRight: '10px',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontWeight: '300',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',

2
src/components/molecules/SaveRecording.tsx
View File

@@ -78,7 +78,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
marginRight: '10px',
borderRadius: '5px',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontWeight: '300',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',

8
src/components/organisms/BrowserContent.tsx
View File

@@ -6,6 +6,7 @@ import { useBrowserDimensionsStore } from "../../context/browserDimensions";
import { BrowserTabs } from "../molecules/BrowserTabs";
import { useSocketStore } from "../../context/socket";
import { getCurrentTabs, getCurrentUrl, interpretCurrentRecording } from "../../api/recording";
import { Box } from '@mui/material';
// TODO: Tab !show currentUrl after recordingUrl global state
export const BrowserContent = () => {
@@ -114,7 +115,7 @@ export const BrowserContent = () => {
}, [])
return (
<BrowserContentWrapper>
<>
<BrowserTabs
tabs={tabs}
handleTabChange={handleTabChange}
@@ -125,14 +126,13 @@ export const BrowserContent = () => {
/>
<BrowserNavBar
// todo: use width from browser dimension once fixed
browserWidth={1270}
browserWidth={900}
handleUrlChanged={handleUrlChanged}
/>
<BrowserWindow/>
</BrowserContentWrapper>
</>
);
}
const BrowserContentWrapper = styled.div`
grid-area: browser;
`;

10
src/components/organisms/BrowserWindow.tsx
View File

@@ -360,15 +360,15 @@ export const BrowserWindow = () => {
<Highlighter
unmodifiedRect={highlighterData?.rect}
displayedSelector={highlighterData?.selector}
width={width}
height={height}
width={900}
height={300}
canvasRect={canvasRef.current.getBoundingClientRect()}
/>
: null}
<Canvas
onCreateRef={setCanvasReference}
width={width}
height={height}
width={900}
height={300}
/>
</div>
);
@@ -383,7 +383,7 @@ const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
img.src = image;
img.onload = () => {
URL.revokeObjectURL(img.src);
ctx?.drawImage(img, 0, 0, 1280, 720);
ctx?.drawImage(img, 0, 0, 900, 300);
};
};

2
src/components/organisms/LeftSidePanel.tsx
View File

@@ -63,7 +63,7 @@ export const LeftSidePanel = (
if (id) {
fetchWorkflow(id, workflowHandler);
}
}, (1000 * 60 * 15));
}, (900 * 60 * 15));
return () => clearInterval(interval)
}, [id]);

2
src/components/organisms/ProxyForm.tsx
View File

@@ -87,7 +87,7 @@ const ProxyForm: React.FC = () => {
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
Proxy Configuration
</Typography>
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 300, width: '100%' }}>
<FormControl>
<TextField
label="Proxy Server URL"

4
src/components/organisms/RightSidePanel.tsx
View File

@@ -78,7 +78,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
if (id) {
fetchWorkflow(id, workflowHandler);
}
}, (1000 * 60 * 15));
}, (900 * 60 * 15));
return () => {
socket?.off("workflow", workflowHandler);
clearInterval(interval);
@@ -408,7 +408,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
sx={{
display: 'flex',
flexDirection: 'column',
width: '500px'
width: '300px'
}}
>
<FormControlLabel value="10" control={<Radio />} label="10" />