Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fact checking page & status page fix #88

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Fact checking page & status page fix #88

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9776e90
init
BlankWheein Oct 19, 2022
75b2f9b
Fixed circles not being green
BlankWheein Oct 20, 2022
407dcbe
Updated Fact checking page so it shows status
BlankWheein Oct 20, 2022
407e7bf
Added Fact checker status on Status page
BlankWheein Oct 20, 2022
bd09ee7
removed redundant information
BlankWheein Oct 20, 2022
a2ab43a
here
BlankWheein Oct 24, 2022
8984d9a
Changed port back to 4600
BlankWheein Oct 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55,583 changes: 38,841 additions & 16,742 deletions knox-ui/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion knox-ui/src/Main_components/DatabaseStatus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ class DatabaseStatus extends Component {
isLoaded: false,
response: []
};
this.greenCircle = <div className="db-status-circle"/>;
this.greenCircle = <div className="db-status-circle db-status-circle-green"/>;
this.yellowCircle = <div className="db-status-circle db-status-circle-yellow"/>;
this.redCircle = <div className="db-status-circle db-status-circle-red"/>;
}
Expand Down
121 changes: 117 additions & 4 deletions knox-ui/src/Main_components/FactChecker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,114 @@
import React from 'react'
import Button from 'react-bootstrap/Button';
import SearchBar from '../Shared_components/SearchBar';
import '../Css/FactChecker.css';

import { useState } from 'react';
import PaginatedSearchResults from '../Shared_components/PaginatedSearchResultsFact'
import '../Css/HomePage.css';
import DatabaseStatus from "./DatabaseStatus";
import AdvancedSidebar from '../Shared_components/AdvancedSideBarFact'


const FactChecker = props => {
const onClick = (searchText) => {
console.log(searchText)
const [searchResults, setSearchResults] = useState([]);
const [confidence, setConfidence] = useState(0);
const [open, setOpen] = useState(false);
const [searching, setSearching] = useState(false);
const [firstSearchMade, setFirstSearchMade] = useState(false);
const EnumMaps = {
"DefaultPassageExtraction": 0,
"Rake": 1,
"TFIDF": 0,
"Levenshtein": 0,
"Jaccard": 1,
"Cosine": 2,
"WordEmbedding": 3,
"TMWIIS": 4,
"SimRank": 1
}
// OBS OBS OBS! if more databases are added, add the names here as well as in the checkboxes on Advanced Sidebar!
const [advancedOptions, setAdvancedOptions] = useState(["DefaultPassageExtraction", "TFIDF"])
const onClick = (searchText) => {
if (searching === true) return
if (searchText === "") {
setSearchResults([])
return
}
var Items = [];

var item = {
s: "",
r: "",
t: "",
"passage": ""
};
searchText.split(" ").forEach(element => {
if (item.s === "") {
item.s = element;
} else if (item.r === "") {
item.r = element;
} else if (item.t === "") {
item.t = element;
Items.push(item);
item = {
s: "",
r: "",
t: "",
"passage": ""
};
}
});
if (item.s !== "" || item.r !== "") {
Items.push(item);
}
console.log({"log":advancedOptions});
let body = {
"PassageExtraction": 0,
"ArticleRetrieval": 0,
"PassageRankings": [],
"ConfidenceEnum": 0,
"MultipleKnowledgeGraphItem": {
"Items": Items
},
"passage": ""
};
advancedOptions.forEach(e => {
if (e === "SimRank") body.ConfidenceEnum = 1;
else if (e === "Levenshtein") body.PassageRankings.push(EnumMaps["Levenshtein"]);
else if (e === "Jaccard") body.PassageRankings.push(EnumMaps["Jaccard"]);
else if (e === "Cosine") body.PassageRankings.push(EnumMaps["Cosine"]);
else if (e === "WordEmbedding") body.PassageRankings.push(EnumMaps["WordEmbedding"]);
else if (e === "TMWIIS") body.PassageRankings.push(EnumMaps["TMWIIS"]);
else if (e === "TFIDF") body.ArticleRetrieval = EnumMaps["TFIDF"];
else if (e === "Rake") body.PassageExtraction = EnumMaps["Rake"];
else if (e === "DefaultPassageExtraction") body.PassageExtraction = EnumMaps["DefaultPassageExtraction"];
});

body = JSON.stringify(body);
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json; charset=utf-8');
myHeaders.append('Access-Control-Allow-Origin', "*");
myHeaders.append('Access-Control-Allow-Headers', "Content-Type, Accept");
fetch("http://localhost:4605/Triple/AlgChooser", {
method: 'POST',
headers: myHeaders,
mode: 'cors',
cache: 'default',
body: body
}).then(response => response.json())
.then()
.then(json => {
setSearchResults(json.articles);
console.log({"CONF":json.confidence});
setConfidence(json.confidence);
setSearching(false)
setFirstSearchMade(true)
}
)
.catch(e => console.log(e))
.finally(() => {
console.log(advancedOptions);
})
}

return (
<div className="ContentOfPage">
Expand All @@ -20,7 +121,19 @@ const FactChecker = props => {
searchText="Enter potential truth"
onClick={onClick}
/>
<DatabaseStatus port="4605" apiName="Triple/HealthCheck" dbName="FacterChecker HealthCheck"/>
<Button data-testid="advancedButton"
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
className="ButtonStyle"
>
Advanced
</Button>
</div>
<PaginatedSearchResults itemsPerPage={25} searchResults={searchResults} firstSearchMade={firstSearchMade}/>
<AdvancedSidebar open={open} advancedOptions={advancedOptions} setAdvancedOptions={setAdvancedOptions}/>

</div>
)
}
Expand Down
2 changes: 2 additions & 0 deletions knox-ui/src/Main_components/Status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,8 @@ const Status = props => {

{/* Section for Database statistics */}
<div data-testid="databaseDiv" className="GroupSpecificlDiv">
<h3>FactChecker status</h3>
<DatabaseStatus port="4605" apiName="Triple/HealthCheck" dbName="Triple"/>
<h3>WordCount database status</h3>
<DatabaseStatus port="8000" apiName="wordCountStatus" dbName="WordCount"/>
<DatabaseStatus port="8000" apiName="rdfStatus" dbName="RDF"/>
Expand Down
147 changes: 147 additions & 0 deletions knox-ui/src/Shared_components/AdvancedSideBarFact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import React from 'react'
import Card from 'react-bootstrap/Card'
import Collapse from 'react-bootstrap/Collapse'
import StickyBox from "react-sticky-box";
import "../Css/AdvancedSidebar.css"

function AdvancedSideBar({open,advancedOptions, setAdvancedOptions}) {

const HandleCheck= (name, isChecked)=>{
if(isChecked) setAdvancedOptions([...advancedOptions, name])
else setAdvancedOptions(advancedOptions.filter(x=>x!==name))

}

return (
<div className="CollapseDiv">
<Collapse in={open} dimension="width">
<StickyBox offsetTop={50}>
<div>
<Card data-testid="card" body style={{
background: "#3874CB",
width: '400px',
height: "94vh",
border:"0px",
borderRadius: "0px" }}>
<div className="sidebar_component">
<h2 > Passage Extraction</h2>
<div className="checkbox">
<ul className="nobullets">
<li>
<label>
<p className="sidebar_option_text">Default</p>
<input type="checkbox"
id="option0"
name="DefaultPassageExtraction"
defaultChecked={true}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
<li>
<label>
<p className="sidebar_option_text">Rake</p>
<input type="checkbox"
id="option1"
name="Rake"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
</ul>
</div>
<h2 > Article Retrieval</h2>
<div className="checkbox">
<ul className="nobullets">
<li>
<label>
<p className="sidebar_option_text">TFIDF</p>
<input type="checkbox"
disabled
id="option2"
name="TFIDF"
defaultChecked={true}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
</ul>
</div>
<h2 > Passage Ranking</h2>
<div className="checkbox">
<ul className="nobullets">
<li>
<label>
<p className="sidebar_option_text">Levenshtein</p>
<input type="checkbox"
id="option3"
name="Levenshtein"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
<li>
<label>
<p className="sidebar_option_text">Cosine</p>
<input type="checkbox"
id="option4"
name="Cosine"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
<li>
<label>
<p className="sidebar_option_text">Jaccard</p>
<input type="checkbox"
id="option5"
name="Jaccard"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
<li>
<label>
<p className="sidebar_option_text">Embedding</p>
<input type="checkbox"
id="option6"
name="WordEmbedding"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
<li>
<label>
<p className="sidebar_option_text">TMWIIS</p>
<input type="checkbox"
id="option7"
name="TMWIIS"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
</ul>
</div>
<h2 > Confidence</h2>
<div className="checkbox">
<ul className="nobullets">
<li>
<label>
<p className="sidebar_option_text">SimRank</p>
<input type="checkbox"
id="option8"
name="SimRank"
defaultChecked={false}
onChange={(e)=>HandleCheck(e.target.name,e.target.checked)}/>
</label>
</li>
</ul>
</div>
</div>
</Card>
</div>
</StickyBox>
</Collapse>
</div>
)
}

export default AdvancedSideBar
48 changes: 48 additions & 0 deletions knox-ui/src/Shared_components/PaginatedSearchResultsFact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react'
import SearchResults from './SearchResultsFact';
import ReactPaginate from 'react-paginate';
import { useState, useEffect } from 'react';
import '../Css/PaginatedSearchResults.css';

function PaginatedSearchResults({ itemsPerPage, searchResults, firstSearchMade }) {
console.log({"SEARCH":searchResults});
const [currentSearchResults, setCurrentSearchResults] = useState([]);
const [pageCount, setPageCount] = useState(0);
// Start Location of shown searches
const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {
// Fetch items from another resources.
const endOffset = itemOffset + itemsPerPage;
setCurrentSearchResults(searchResults.slice(itemOffset, endOffset));
setPageCount(Math.ceil(searchResults.length / itemsPerPage));
}, [itemOffset, itemsPerPage, searchResults]);



// Invoke when user click to request another page.
const handlePageClick = (event) => {
setItemOffset((event.selected * itemsPerPage) % searchResults.length)
window.scrollTo(0,0)
}

return (
<div className="PaginateStyle">
<SearchResults searchResults={currentSearchResults} firstSearchMade={firstSearchMade} />
<ReactPaginate
breakLabel="..."
nextLabel="→"
onPageChange={handlePageClick}
pageRangeDisplayed={3}
pageCount={pageCount}
previousLabel="←"
renderOnZeroPageCount={null}
containerClassName='pagination' /* as this work same as bootstrap class */
subContainerClassName='pages pagination' /* as this work same as bootstrap class */
activeClassName='active' /* as this work same as bootstrap class */
/>
</div>
);
}

export default PaginatedSearchResults
35 changes: 35 additions & 0 deletions knox-ui/src/Shared_components/SearchResultFact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react'
import '../Css/SearchResult.css';



function SearchResult({searchResult}) {
const {id, passages} = searchResult
return (
<div className="searchResultDiv">
<h2 ><a href= {"http://localhost:8000/getpdf?id=" + id} target="_blank" rel="noreferrer">{id}</a></h2>
<small id="scoreField" class="text-muted">
{
passages.map(result => {
return (
<div className="passageResultDiv">
<p className='text-wrap'>{result.fullPassage}</p>
<div>Algo scores:</div>
{
Object.entries(result.keyValuePairs).map((key) => {
return (
<p class="mx-5">{key[0]}: {key[1]}</p>
)
}
)
}
</div>
)
})
}
</small>
</div>
)
}

export default SearchResult
Loading