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" />

4
src/constants/const.ts
View File

@@ -1,5 +1,5 @@
export const VIEWPORT_W = 1280;
export const VIEWPORT_H = 720;
export const VIEWPORT_W = 900;
export const VIEWPORT_H = 300;
export const ONE_PERCENT_OF_VIEWPORT_W = VIEWPORT_W / 100;
export const ONE_PERCENT_OF_VIEWPORT_H = VIEWPORT_H / 100;

4
src/context/browserDimensions.tsx
View File

@@ -7,8 +7,8 @@ interface BrowserDimensions {
};
class BrowserDimensionsStore implements Partial<BrowserDimensions>{
width: number = 1280;
height: number = 720;
width: number = 900;
height: number = 300;
};
const browserDimensionsStore = new BrowserDimensionsStore();

2
src/pages/Login.tsx
View File

@@ -63,7 +63,7 @@ const Login = () => {
<Typography variant="h4" gutterBottom>
Welcome Back!
</Typography>
<Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
<Box component="form" onSubmit={submitForm} sx={{ maxWidth: 300, width: '100%' }}>
<TextField
fullWidth
label="Email"

2
src/pages/MainPage.tsx
View File

@@ -158,7 +158,7 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
}
return (
<Stack direction='row' spacing={0} sx={{ minHeight: '800px' }}>
<Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
<MainMenu value={content} handleChangeContent={setContent} />
{DisplayContent()}
</Stack>

50
src/pages/RecordingPage.tsx
View File

@@ -1,9 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Grid } from '@mui/material';
import { Grid, Box } from '@mui/material';
import { BrowserContent } from "../components/organisms/BrowserContent";
import { InterpretationLog } from "../components/molecules/InterpretationLog";
import { startRecording, getActiveBrowserId } from "../api/recording";
import { LeftSidePanel } from "../components/organisms/LeftSidePanel";
import { RightSidePanel } from "../components/organisms/RightSidePanel";
import { Loader } from "../components/atoms/Loader";
import { useSocketStore } from "../context/socket";
@@ -35,7 +34,6 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
const [showOutputData, setShowOutputData] = useState(false);
const browserContentRef = React.useRef<HTMLDivElement>(null);
const workflowListRef = React.useRef<HTMLDivElement>(null);
const { setId, socket } = useSocketStore();
const { setWidth } = useBrowserDimensionsStore();
@@ -52,7 +50,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
});
};
useEffect(() => changeBrowserDimensions(), [isLoaded])
// useEffect(() => changeBrowserDimensions(), [isLoaded])
useEffect(() => {
let isCancelled = false;
@@ -113,27 +111,19 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
return (
<ActionProvider>
<BrowserStepsProvider>
<div>
{isLoaded ?
<Grid container direction="row" spacing={0}>
<Grid item xs={2} ref={workflowListRef} style={{ display: "flex", flexDirection: "row" }}>
<LeftSidePanel
sidePanelRef={workflowListRef.current}
alreadyHasScrollbar={hasScrollbar}
recordingName={recordingName ? recordingName : ''}
handleSelectPairForEdit={handleSelectPairForEdit}
/>
</Grid>
<Grid id="browser-content" ref={browserContentRef} item xs>
<Box sx={{ flexGrow: 1 }}>
{isLoaded ? (
<Grid container spacing={1}>
<Grid id="browser-content" ref={browserContentRef} item xs={9}>
<BrowserContent />
<InterpretationLog isOpen={showOutputData} setIsOpen={setShowOutputData} />
</Grid>
<Grid item xs={2}>
<Grid item xs={3}>
<RightSidePanel onFinishCapture={handleShowOutputData} />
</Grid>
</Grid>
: <Loader />}
</div>
) : <Loader />}
</Box>
</BrowserStepsProvider>
</ActionProvider>
);
@@ -144,4 +134,24 @@ const RecordingPageWrapper = styled.div`
width: 100vw;
height: 100vh;
overflow: hidden;
`;
`;
// Fixed grid container to ensure elements stay next to each other
const FixedGridContainer = styled(Grid)`
display: flex;
height: 100vh;
overflow: hidden;
flex-direction: row;
align-items: stretch;
#browser-content {
flex: 1;
position: relative;
height: 100%;
}
.MuiGrid-item {
position: relative;
height: 100%;
}
`;

2
src/pages/Register.tsx
View File

@@ -61,7 +61,7 @@ const Register = () => {
<Typography variant="h4" gutterBottom>
Create an account
</Typography>
<Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
<Box component="form" onSubmit={submitForm} sx={{ maxWidth: 300, width: '100%' }}>
<TextField
margin="normal"
required