Skip to content

Commit

Permalink
Merge pull request #6 from PALLAVIKHEDLE/main
Browse files Browse the repository at this point in the history
main into scrapper
  • Loading branch information
PALLAVIKHEDLE authored Oct 27, 2023
2 parents eb7c6df + 2b94776 commit d7e632c
Show file tree
Hide file tree
Showing 7 changed files with 202 additions and 28 deletions.
27 changes: 27 additions & 0 deletions src/api/analyzer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
async function AnalyzerList(payload) {
let final_response
try {
const response = await fetch('http://34.105.100.197/api/v1/analyzer/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
})
.then((response) => {
if (response.status==200) {
return response.json();
}
})
.then(data => {
console.log('API response:', data);
final_response = data
return data
})
return final_response;
} catch (error) {
console.error("Error fetching scraper text:", error);
return [];
}
}
export default AnalyzerList;
4 changes: 2 additions & 2 deletions src/components/homePage/algoComparision.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,15 @@ const AlgoComparision = ({ multialgo }) => {
// const name = algoData[context.dataIndex].algoName;
// return `${label}: ${name}`;
return `${label}`

},
},
},
},
};


return <Bar options={options} data={data} style={{ marginLeft: '18%',marginTop:'10%' }} />;
return <Bar options={options} data={data} style={{ marginRight:'10%',marginLeft:'13%' }} />;
};

export default AlgoComparision;
64 changes: 64 additions & 0 deletions src/components/homePage/inSight.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import * as React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, styled } from '@mui/material';

const StyledTableCell = styled(TableCell)(({ theme }) => ({
backgroundColor: '#FABB2E',
color: theme.palette.common.black,
padding: '8px',
fontWeight: 'bold',
marginRight: '3px',
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
padding: '8px',
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));

const StickyTableHead = styled(TableHead)({
position: 'sticky',
top: 0,
zIndex: 1,
backgroundColor: '#FABB2E',
});

const TableWrapper = styled('div')({
overflowY: 'auto',
maxHeight: '43%',
marginRight:'10%',
marginTop:'5%',
marginLeft: '10%'
})

export default function InsightTable({ analyzerData }) {
console.log('analyzerData', analyzerData);

return (
<TableWrapper>
<TableContainer component={Paper}>
<Table aria-label="customized table">
<StickyTableHead>
<TableRow>
<StyledTableCell align='center'>Insights</StyledTableCell>
</TableRow>
</StickyTableHead>
<TableBody>
{analyzerData && analyzerData.pages.map((page, pageIndex) => (
// Create a new row for each warning
page.warnings.map((warning, warningIndex) => (
<StyledTableRow key={`${pageIndex}-${warningIndex}`}>
{warning}&nbsp;
</StyledTableRow>
))
))}
</TableBody>
</Table>
</TableContainer>
</TableWrapper>
);
}
45 changes: 32 additions & 13 deletions src/components/homePage/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import MultiAlgoComparision from "../../api/multiAlgo";
import keywordList from "../../api/keyword";
import KeywordListFrame from './keywordListFrame';
import AlgoComparision from './algoComparision';
import TableComponent from './tableComponent';
import TableComponent from './recommendationTableComponent';
import RecommendationList from "../../api/recommendation";
import AnalyzerList from "../../api/analyzer"
import InsightTable from './inSight'

function HomePage() {
const [urlInput, setUrlInput] = useState("");
Expand All @@ -19,6 +21,7 @@ function HomePage() {
const [keywordListData, setKeywordListData] = useState("");
const [multialgo, setMultialgo] = useState("");
const [recommendationListData, setRecommendationListData]=useState('')
const [analyzerData, setAnalyzerData]= useState("");
const [scrollPosition, setScrollPosition] = useState(0);
const [scrollUp, setScrollUp] = useState(false);
const [resetScroll, setResetScroll] = useState(false);
Expand All @@ -44,6 +47,7 @@ function HomePage() {

const handleUrlChange = (event) => {
const inputValue = event.target.value;
// if(!inputValue)return false

// const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;

Expand All @@ -58,11 +62,11 @@ function HomePage() {
setSelectedAlgorithm(event.target.value);
};

const handleDownload = () => {
// const element = document.getElementById('pdf-container');
// html2pdf(element);
window.print();
};
// const handleDownload = () => {
// // const element = document.getElementById('pdf-container');
// // html2pdf(element);
// window.print();
// };

const handleScrollUp = () => {
setScrollUp(true);
Expand Down Expand Up @@ -124,6 +128,15 @@ function HomePage() {
setLoading(false);
});

const urlAnalyzerData=AnalyzerList(payload)
urlAnalyzerData.then((response) =>
setAnalyzerData(response))
.catch(error => {
console.error('API error:', error);
})
.finally(() => {
setLoading(false);
});

};

Expand Down Expand Up @@ -172,16 +185,22 @@ function HomePage() {
</div>
</div>
)}
{scraperData && <ScraperTextFrame url={urlInput} scraperData={scraperData}/>}
{scraperData&&keywordListData&& <KeywordListFrame keywordListData={keywordListData}/>}
{scraperData && <ScraperTextFrame url={urlInput} scraperData={scraperData} analyzerData={analyzerData}/>}
{scraperData && keywordListData&& <KeywordListFrame keywordListData={keywordListData}/>}

<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
<div style={{ flex: 1 }}>
{keywordListData&&recommendationListData && <TableComponent recommendationListData={recommendationListData}/>}
</div>
<div style={{ flex: 1 }}>
{multialgo && <AlgoComparision multialgo={multialgo}/>}
<div style={{ width:'40%' }}>
{scraperData && keywordListData&&recommendationListData && <TableComponent recommendationListData={recommendationListData}/>}
</div>
<div style={{ width: '60%' }}>
<div style={{ height: '15%' }}>
{scraperData && keywordListData && multialgo && <AlgoComparision multialgo={multialgo} />}
</div>
<div style={{ height: '80%', width: '100%', overflow: 'auto' }}>
{scraperData && analyzerData && <InsightTable analyzerData={analyzerData} />}
</div>
</div>



{/* <button className="downloadButton" onClick={handleDownload}>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import{Table, TableBody, TableCell, TableContainer, tableCellClasses, TableHead, TableRow, Paper} from '@mui/material'
import{Table, TableBody, TableCell, TableContainer, tableCellClasses, TableHead, TableRow, Paper,styled} from '@mui/material'

const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
Expand Down Expand Up @@ -28,14 +27,14 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({

export default function CustomizedTables({recommendationListData}) {
return (
<div style={{ width: '500px' }}>
<TableContainer component={Paper} style={{padding:3, marginLeft:'10%'}}>
<Table aria-label="customized table">
<TableContainer component={Paper} style={{padding:3, marginLeft:'10%', minidth:'40%'}}>
<Table aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Original Keywords</StyledTableCell>
<StyledTableCell align='center'>Count</StyledTableCell>
<StyledTableCell align='center' >Possible Replacements</StyledTableCell>
<StyledTableCell align='center'>Recommendation Words</StyledTableCell>
<StyledTableCell align='center'>Major Search Phrases</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -44,6 +43,9 @@ export default function CustomizedTables({recommendationListData}) {
<StyledTableCell component="th" scope="row">
{keyword.originalKeyword}
</StyledTableCell>
<StyledTableCell align='center'>
{keyword.count}
</StyledTableCell>
<StyledTableCell align='center'>
{keyword.probableReplacements?.map((replacements, altIndex) =>
<span key={altIndex}>{replacements+","}&nbsp;</span>
Expand All @@ -66,6 +68,5 @@ export default function CustomizedTables({recommendationListData}) {
</TableBody>
</Table>
</TableContainer>
</div>
);
}
49 changes: 48 additions & 1 deletion src/components/homePage/scraperFrame.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,63 @@
height: 100vh;
}

.h1container {
display: flex;
align-self: flex-start;
margin-left: 9.4%;
}

.h1textStyle {
color: #FABB2E;
font-size: larger;
margin-top:5%;
}

.urlText {
color: white;
margin-left: 10px;
}

.scraperData {
color: white;
border: 2px solid #FABB2E;
padding: 10px;
min-width: 80%;
max-width: 80%;
text-align: center;
overflow-y: auto;
max-height: 50vh;
min-height: 50vh;

}
.cardStyle{
width: 81%;
margin-bottom: 4%;
border: 3px solid white;
height:2%;
padding-bottom: 3%;

}
.cardContentStyle {
background-color: #FABB2E;
color: black;
align-items: center;
font-weight: bold;
overflow-y: auto;
max-height: 5vh;
}

.cardContentStyle::-webkit-scrollbar {
width: 6px;
}

.cardContentStyle::-webkit-scrollbar-thumb {
background-color: black;
border-radius: 6px;
}

.cardContentStyle::-webkit-scrollbar-track {
background-color: transparent; /* Color of the track */
}
.scraperData::-webkit-scrollbar {
width: 6px;
}
Expand Down
26 changes: 21 additions & 5 deletions src/components/homePage/scraperTextFrame.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,30 @@
import React from 'react';
import './scraperFrame.css';
import { Card, CardContent } from '@mui/material';


function ScraperTextFrame(props) {
console.log('props', props);
return (
<div className='scrapercontainer'>
<h1 className='h1textStyle'>Scraper context for {props.url}</h1>
<div className='scraperData'>
<p>{props.scraperData?.scrapedContent}</p>
</div>
<div className='h1container'>
<h1 className='h1textStyle'>Scrapper context for </h1>
{props&&<h2 className='urlText'>{props?.url}</h2>}
</div>

{props.analyzerData&&props?.analyzerData.pages[0]?.description &&
<Card className='cardStyle'>
<CardContent className='cardContentStyle'>
Description: {props?.analyzerData.pages[0].description}
</CardContent>
</Card>
}


<div className='scraperData'>
<p>{props?.scraperData?.scrapedContent}</p>
</div>
</div>
);
}
export default ScraperTextFrame;
export default ScraperTextFrame;

0 comments on commit d7e632c

Please sign in to comment.