main into scrapper

src/api/analyzer.js

@@ -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;

src/components/homePage/algoComparision.js

@@ -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;

src/components/homePage/inSight.js

@@ -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>
+  );
+}

src/components/homePage/index.js

@@ -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("");
@@ -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);
@@ -44,6 +47,7 @@ function HomePage() {
 
   const handleUrlChange = (event) => {
     const inputValue = event.target.value;
+    // if(!inputValue)return false
 
     // const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
 
@@ -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);
@@ -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);
+      });
 
   };
 
@@ -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}>

src/components/homePage/tableComponent.js → src/components/homePage/recommendationTableComponent.js

@@ -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}`]: {
@@ -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>  
@@ -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>
@@ -66,6 +68,5 @@ export default function CustomizedTables({recommendationListData}) {
         </TableBody>
       </Table>
     </TableContainer>
-    </div>
   );
 }

src/components/homePage/scraperFrame.css

@@ -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;
 }

src/components/homePage/scraperTextFrame.js

@@ -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;