Skip to content
This repository has been archived by the owner on Dec 12, 2021. It is now read-only.

Commit

Permalink
Fixed following issues:
Browse files Browse the repository at this point in the history 
1. Pages updating constantly for search query
2. Enabled multiple queries
3. Fixed pagination when web search query is in progress
  • Loading branch information
@yamsgithub
yamsgithub committed Jun 18, 2017
1 parent aac6710 commit 69e5a90
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 36 deletions.
19 changes: 11 additions & 8 deletions client/src/components/Body.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ class Body extends Component{
iconDomainInfo:null,
stateDomainInfoCard:false,
stateSearchCard:false,
stateFiltersCard:false,
stateFiltersCard:false,
offset:0,
currentPagination:0,
sizeAvatar:25,
currentDomain:'',
sessionBody:{},
Expand Down Expand Up @@ -121,10 +123,6 @@ class Body extends Component{

//Verify if it is necessary an update.
shouldComponentUpdate(nextProps, nextState) {
/* console.log(nextProps.reloadBody);
if(nextProps.reloadBody !==undefined && !nextProps.reloadBody){
return false;
}*/
if (nextState.sessionString === this.state.sessionString) {
if(nextProps.updateCrawlerData==="updateCrawler" || nextProps.updateCrawlerData==="stopCrawler" || nextProps.filterKeyword !== null || nextProps.filterKeyword !== "" || nextState.stateDomainInfoCard!==this.state.stateDomainInfoCard || nextState.stateSearchCard!==this.state.stateSearchCard || nextState.stateFiltersCard!==this.state.stateFiltersCard){
return true;
Expand Down Expand Up @@ -175,7 +173,6 @@ class Body extends Component{
}

setActiveMenu (expanded, menu) {
//console.log("setActiveMenu " + expanded.toString() + " " + this.state.open.toString());
if(!this.state.open){
this.openMenu();
}
Expand Down Expand Up @@ -214,7 +211,7 @@ class Body extends Component{
getQueryPages(term){
if(this.state.intervalFuncId !== undefined)
this.queryPagesDone();
else this.setState({intervalFuncId: window.setInterval(function() {this.applyFilterByQuery(term);}.bind(this), 1000)});
this.setState({intervalFuncId: window.setInterval(function() {this.applyFilterByQuery(term);}.bind(this), 1000)});

}

Expand Down Expand Up @@ -247,6 +244,12 @@ class Body extends Component{
this.props.availableCrawlerButton(isthereModel);
}

// Update pagination
handlePageClick(offset, currentPagination){
this.setState({offset: offset, currentPagination:currentPagination});
}


render(){
//console.log("------body----------");
const sidebar = (<div style={{width:this.state.size}}>
Expand Down Expand Up @@ -288,7 +291,7 @@ class Body extends Component{
<Sidebar {...sidebarProps}>
<div>
<Row style={styles.content}>
<Views queryFromSearch={this.state.intervalFuncId} domainId={this.state.currentDomain} session={this.state.sessionBody} deletedFilter={this.deletedFilter.bind(this)} reloadFilters={this.reloadFilters.bind(this)} availableCrawlerButton={this.availableCrawlerButton.bind(this)}/>
<Views queryFromSearch={this.state.intervalFuncId} domainId={this.state.currentDomain} session={this.state.sessionBody} deletedFilter={this.deletedFilter.bind(this)} reloadFilters={this.reloadFilters.bind(this)} availableCrawlerButton={this.availableCrawlerButton.bind(this)} offset={this.state.offset} currentPagination={this.state.currentPagination} handlePageClick={this.handlePageClick.bind(this)}/>
</Row>
</div>
<Snackbar
Expand Down
72 changes: 44 additions & 28 deletions client/src/components/Views.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ class ViewTabSnippets extends React.Component{

componentWillMount(){
this.setState({
session:this.props.session, sessionString: JSON.stringify(this.props.session), pages:this.props.pages, currentPagination:0, offset:0, lengthTotalPages:this.props.lengthTotalPages,
session:this.props.session, sessionString: JSON.stringify(this.props.session), pages:this.props.pages, currentPagination:this.props.currentPagination, offset:this.props.offset, lengthTotalPages:this.props.lengthTotalPages,
});
this.updateOnlineClassifier(this.props.session);
}
Expand All @@ -261,7 +261,7 @@ class ViewTabSnippets extends React.Component{
if (JSON.stringify(nextProps.session) !== this.state.sessionString || this.props.queryFromSearch) {
if(!this.props.queryFromSearch) $("div").scrollTop(0);
this.setState({
session:nextProps.session, sessionString: JSON.stringify(nextProps.session), pages:nextProps.pages, lengthTotalPages:nextProps.lengthTotalPages, currentPagination:0, offset:0,
session:nextProps.session, sessionString: JSON.stringify(nextProps.session), pages:nextProps.pages, lengthTotalPages:nextProps.lengthTotalPages, currentPagination:nextProps.currentPagination, offset:nextProps.offset
});
}
return;
Expand Down Expand Up @@ -329,7 +329,8 @@ class ViewTabSnippets extends React.Component{
$("div").scrollTop(0);
let selected = data.selected; //current page (number)
let offset = Math.ceil(selected * this.perPage);
this.setState({offset: offset, currentPagination:data.selected});
this.setState({offset: offset, currentPagination:data.selected, pages:[]});
this.props.handlePageClick(offset, data.selected);
//Returns dictionary from server in the format: {url1: {snippet, image_url, title, tags, retrieved}} (tags are a list, potentially empty)
var tempSession = JSON.parse(JSON.stringify(this.props.session));
tempSession["from"] = offset;
Expand Down Expand Up @@ -466,11 +467,19 @@ class ViewTabSnippets extends React.Component{
var currentPageCount = (this.state.lengthTotalPages/this.perPage);
var messageNumberPages = (this.state.offset===0)?"About " : "Page " + (this.state.currentPagination+1) +" of about ";
this.currentUrls=[];
var relev_total = 0; var irrelev_total = 0; var neut_total = 0;
var urlsList = Object.keys(this.state.pages).map((k, index)=>{
if(this.state.pages[k]["tags"]){
var relev_total = 0; var irrelev_total = 0; var neut_total = 0;
var sorted_urlsList = Object.keys(this.state.pages).map((k, index)=>{
return [k, this.state.pages[k]]
});

sorted_urlsList.sort(function(first, second) {
return Number(first[1]["order"]) - Number(second[1]["order"])
});

var urlsList = sorted_urlsList.map((url_info, index)=>{
if(url_info[1]["tags"]){
let uniqueTag="";
uniqueTag = this.getTag(k);
uniqueTag = this.getTag(url_info[0]);
if(uniqueTag==='Relevant')relev_total++;
if(uniqueTag==='Irrelevant')irrelev_total++;
if(uniqueTag==='Neutral')neut_total++;
Expand All @@ -482,8 +491,8 @@ class ViewTabSnippets extends React.Component{
let colorTagIrrelev="";
let colorTagNeutral="";
let uniqueTag="";
if(this.state.pages[k]["tags"]){
uniqueTag = this.getTag(k);
if(url_info[1]["tags"]){
uniqueTag = this.getTag(url_info[0]);
colorTagRelev=(uniqueTag==='Relevant')?"#4682B4":"silver";
colorTagIrrelev=(uniqueTag==='Irrelevant')?"#CD5C5C":"silver";
colorTagNeutral=(uniqueTag==='Neutral')?'silver':"silver";
Expand All @@ -493,11 +502,11 @@ class ViewTabSnippets extends React.Component{
}

id++;
let urlLink= (k.length<110)?k:k.substring(0,109);
let tittleUrl = (this.state.pages[k]["title"] === "" || this.state.pages[k]["title"] === undefined )?k.substring(k.indexOf("//")+2, k.indexOf("//")+15) + "..." : this.state.pages[k]["title"] ;
let imageUrl=(this.state.pages[k]["image_url"]==="")? NoFoundImg:this.state.pages[k]["image_url"];
let urlLink= (url_info[0].length<110)?url_info[0]:url_info[0].substring(0,109);
let tittleUrl = (url_info[1]["title"] === "" || url_info[1]["title"] === undefined )?url_info[0].substring(url_info[0].indexOf("//")+2, url_info[0].indexOf("//")+15) + "..." : url_info[1]["title"] ;
let imageUrl=(url_info[1]["image_url"]==="")? NoFoundImg:url_info[1]["image_url"];

this.currentUrls.push(k);
this.currentUrls.push(url_info[0]);

return <ListItem key={index} >
<div style={{ minHeight: '60px', borderColor:"silver", marginLeft: '8px', marginTop: '3px', fontFamily:"arial,sans-serif"}}>
Expand All @@ -507,25 +516,25 @@ class ViewTabSnippets extends React.Component{
<ButtonGroup bsSize="small">
<OverlayTrigger placement="bottom" overlay={<Tooltip id="tooltip">Relevant</Tooltip>}>
<Button >
<IconButton onClick={this.onTagActionClicked.bind(this,k,"Relevant-"+id)} iconStyle={{width:25,height: 25,marginBottom:"-9px", color:colorTagRelev }} style={{height: 8, margin: "-10px", padding:0,}}><RelevantFace /></IconButton>
<IconButton onClick={this.onTagActionClicked.bind(this,url_info[0],"Relevant-"+id)} iconStyle={{width:25,height: 25,marginBottom:"-9px", color:colorTagRelev }} style={{height: 8, margin: "-10px", padding:0,}}><RelevantFace /></IconButton>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={<Tooltip id="tooltip">Irrelevant</Tooltip>}>
<Button>
<IconButton onClick={this.onTagActionClicked.bind(this,k,"Irrelevant-"+id)} iconStyle={{width:25,height: 25,marginBottom:"-9px", color:colorTagIrrelev }} style={{height: 8, margin: "-10px", padding:0,}}><IrrelevantFace /></IconButton>
<IconButton onClick={this.onTagActionClicked.bind(this,url_info[0],"Irrelevant-"+id)} iconStyle={{width:25,height: 25,marginBottom:"-9px", color:colorTagIrrelev }} style={{height: 8, margin: "-10px", padding:0,}}><IrrelevantFace /></IconButton>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={<Tooltip id="tooltip">Neutral</Tooltip>}>
<Button >
<IconButton onClick={this.onTagActionClicked.bind(this,k,"Neutral-"+id)} iconStyle={{width:25,height: 25,marginBottom:"-9px", color:colorTagNeutral }} style={{height: 8, margin: "-10px", padding:0,}}><NeutralFace /></IconButton>
<IconButton onClick={this.onTagActionClicked.bind(this,url_info[0],"Neutral-"+id)} iconStyle={{width:25,height: 25,marginBottom:"-9px", color:colorTagNeutral }} style={{height: 8, margin: "-10px", padding:0,}}><NeutralFace /></IconButton>
</Button>
</OverlayTrigger>
</ButtonGroup></p>
<p>
<a target="_blank" href={k} style={{ fontSize:'18px',color:'#1a0dab'}} >{tittleUrl}</a>
<a target="_blank" href={url_info[0]} style={{ fontSize:'18px',color:'#1a0dab'}} >{tittleUrl}</a>
<br/>
<p style={{fontSize:'14px', color:'#006621', marginBottom:4, marginTop:2}}>{urlLink}</p>
<p style={{ fontSize:'13px', color:'#545454'}}>{this.state.pages[k]["snippet"]}</p>
<p style={{ fontSize:'13px', color:'#545454'}}>{url_info[1]["snippet"]}</p>
</p>
</div>
<br/>
Expand Down Expand Up @@ -594,17 +603,19 @@ class Views extends React.Component {
session:{},
chipData: [],
lengthPages: 1,
lengthTotalPages:0,
lengthTotalPages:0,
offset:0,
currentPagination:0,
};
this.newPages = true;
this.queryFromSearch=true;
}

//Returns dictionary from server in the format: {url1: {snippet, image_url, title, tags, retrieved}} (tags are a list, potentially empty)
getPages(session){
var tempSession = session;
tempSession["from"]=0;
$.post(
getPages(session){
var tempSession = session;
tempSession["from"]=this.state.offset;
$.post(
'/getPages',
{'session': JSON.stringify(tempSession)},
function(pages) {
Expand All @@ -616,7 +627,7 @@ class Views extends React.Component {

//Loads pages in the first time.
componentWillMount(){
this.loadPages(this.props.session, this.queryFromSearch);
this.loadPages(this.props.session);
}

//Handling SwipeableViews.
Expand All @@ -627,10 +638,15 @@ class Views extends React.Component {
};

//Loads pages
loadPages(session, queryFromSearch){
loadPages(session){
this.getPages(session);
}

// Update pagination
handlePageClick(offset, currentPagination){
this.setState({offset: offset, currentPagination:currentPagination});
}

//If there are any change in the session like a new filter, then getPages() is called.
componentWillReceiveProps(nextProps, nextState){
this.queryFromSearch = (nextProps.queryFromSearch ===undefined)?false:true;
Expand All @@ -640,15 +656,15 @@ class Views extends React.Component {
}*/
if (JSON.stringify(nextProps.session) !== this.state.sessionString || this.queryFromSearch) {
this.newPages = false;
this.loadPages(nextProps.session, this.queryFromSearch);
this.loadPages(nextProps.session);
}else{
return;
}
}

//Updates selected filters.
deletedFilter(sessionTemp){
this.loadPages(sessionTemp, this.queryFromSearch);
this.loadPages(sessionTemp);
this.props.deletedFilter(sessionTemp);
}

Expand Down Expand Up @@ -681,7 +697,7 @@ class Views extends React.Component {
var messageSearch = (this.queryFromSearch)? "Searching..." :searchOtherEngine;
//if(!this.queryFromSearch && this.state.lengthTotalPages==0)
var showPages = (Object.keys(this.state.pages).length>0)?<ViewTabSnippets
lengthTotalPages={this.state.lengthTotalPages} session={this.state.session} pages={this.state.pages} deletedFilter={this.deletedFilter.bind(this)}
handlePageClick={this.handlePageClick.bind(this)} offset={this.state.offset} currentPagination={this.state.currentPagination} lengthTotalPages={this.state.lengthTotalPages} session={this.state.session} pages={this.state.pages} deletedFilter={this.deletedFilter.bind(this)}
reloadFilters={this.reloadFilters.bind(this)} queryFromSearch={this.queryFromSearch} availableCrawlerButton={this.availableCrawlerButton.bind(this)}/>
: (this.state.lengthPages===0)? <div style={{paddingTop:"20px", paddingLeft:"8px",}}> {messageSearch}</div> : <CircularProgressSimple />;

Expand Down

0 comments on commit 69e5a90

Please sign in to comment.