Merge pull request #50 from ViDA-NYU/customTag

Custom tag
VIDA-NYU · Jul 14, 2017 · fe235b0 · fe235b0
2 parents aa6616e + 5dacf55
commit fe235b0
Show file tree

Hide file tree

Showing 5 changed files with 343 additions and 120 deletions.
diff --git a/client/package.json b/client/package.json
@@ -29,7 +29,8 @@
     "react-tap-event-plugin": "^2.0.1",
     "react-highlight-words": "^0.8.0",
     "react-vis": "^0.6.4",
-    "spawn-sync": "^1.0.15"
+    "spawn-sync": "^1.0.15",
+    "react-select": "^1.0.0-rc.5"
   },
   "scripts": {
     "start": "react-scripts start && react-scripts build",

diff --git a/client/src/components/Body.js b/client/src/components/Body.js
@@ -10,6 +10,7 @@ import Terms from './Terms';
 import Views from './Views';
 import '../css/Components.css';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
+import 'react-select/dist/react-select.css';
 import Sidebar from 'react-sidebar';
 import Plus from 'material-ui/svg-icons/action/swap-horiz';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
@@ -275,7 +276,7 @@ class Body extends Component{
      this.props.availableCrawlerButton(isthereModel);
    }
 
-    // Update pagination  
+    // Update pagination
     handlePageClick(offset, currentPagination){
 	this.setState({offset: offset, currentPagination:currentPagination});
   }

diff --git a/client/src/components/FiltersTabs.js b/client/src/components/FiltersTabs.js
@@ -119,7 +119,7 @@ class LoadQueries extends React.Component {
 		}
 		checked = (new_prev_selected.length > 0)?new_prev_selected.concat(checked):checked;
 	    }
-	    
+
 	}else{
 	    checked = object["checked"];
 	    if(prev_selected_queries.length > 0){
@@ -402,7 +402,7 @@ class LoadTLDs extends React.Component {
     this.setState({checked: checked });
     this.props.addTLD(checked);
   }
-    
+
     render(){
 	if(this.state.currentTLDs!==undefined && Object.keys(this.state.currentTLDs).length > 0){
 	    var nodes = this.state.tldNodes;
@@ -425,7 +425,7 @@ class LoadTLDs extends React.Component {
 		}
 		nodesTemp.push(node);
 	    });
-	    
+
       return(
         <div>
         <CheckboxTree
@@ -598,6 +598,7 @@ class LoadTag extends React.Component {
   }
 
   getAvailableTags(){
+
       $.post(
     	  '/getAvailableTags',
     	  {'session': JSON.stringify(this.props.session), 'event': 'Tags'},
@@ -766,7 +767,7 @@ class LoadModel extends React.Component {
 	  </IconButton>
 	  </div>
 	  :<div/>;
-	  
+
     if(this.state.currentModelTags!==undefined && Object.keys(this.state.currentModelTags).length > 0){
       var nodes = this.state.modeltagNodes;
       var nodesTemp = [];
@@ -1010,6 +1011,7 @@ class FiltersTabs extends React.Component {
     var sessionTemp = this.props.session;
     var newTags = checked.toString();
     if(newTags !== ""){
+      console.log("add crawled tags first if");
       if(sessionTemp['selected_queries']!=="" || sessionTemp['selected_tlds']!=="" || sessionTemp['selected_tags'] !== "" || sessionTemp['selected_model_tags']!== "" ){
         sessionTemp['newPageRetrievalCriteria'] = "Multi";
         sessionTemp['pageRetrievalCriteria'] = {'crawled_tag':newTags};
@@ -1023,10 +1025,12 @@ class FiltersTabs extends React.Component {
         sessionTemp['pageRetrievalCriteria']['model_tag'] = sessionTemp['selected_model_tags'];
 
       } else{
+        console.log("add crawled tags first else");
         sessionTemp['newPageRetrievalCriteria'] = "one";
         sessionTemp['pageRetrievalCriteria'] = "Crawled Tags";
       }
     } else if(sessionTemp['newPageRetrievalCriteria'] === "Multi"){
+      console.log("add crawled tags second else");
       delete sessionTemp['pageRetrievalCriteria']['crawled_tag'];
     }
 

diff --git a/client/src/components/SearchTabs.js b/client/src/components/SearchTabs.js
@@ -11,6 +11,7 @@ import {fullWhite} from 'material-ui/styles/colors';
 import Search from 'material-ui/svg-icons/action/search';
 import TextField from 'material-ui/TextField';
 import Dialog from 'material-ui/Dialog';
+import Select from 'react-select';
 import $ from 'jquery';
 
 const styles = {
@@ -45,13 +46,34 @@ class SearchTabs extends React.Component {
     };
       uploadTag: "Neutral";
       fromFile: false;
+      this.availableTags=[];
+
   }
 
     //Handling changes in SearchTabs
     handleChange = (value) => {
       this.setState({  slideIndex: value,  });
     };
 
+    getAvailableTags(){
+      $.post(
+    	  '/getAvailableTags',
+    	  {'session': JSON.stringify(this.props.session), 'event': 'Tags'},
+    	  function(tagsDomain) {
+    	      var selected_tags = [];
+    	      if(this.props.session['selected_tags'] !== undefined && this.props.session['selected_tags'] !== ""){
+    		        selected_tags = this.props.session['selected_tags'].split(",");
+    	      }
+            this.availableTags = Object.keys(tagsDomain['tags'] || {})
+                                 .filter(tag => ["Neutral", "Irrelevant", "Relevant"].indexOf(tag) === -1)
+                                 .map(tag => { return {value: tag, label: tag}; });
+
+    	  }.bind(this)
+      );
+    }
+    componentWillMount(){
+      this.getAvailableTags();
+    }
   resetAllFilters(session){
     session['newPageRetrievalCriteria'] = "one";
     session['pageRetrievalCriteria'] = "Queries";
@@ -70,7 +92,7 @@ class SearchTabs extends React.Component {
     session['search_engine']=this.state.search_engine;
     session = this.resetAllFilters(session);
     this.props.getQueryPages(this.state.valueQuery);
-      
+
     $.post(
       '/queryWeb',
       {'terms': this.state.valueQuery,  'session': JSON.stringify(session)},
@@ -129,19 +151,25 @@ class SearchTabs extends React.Component {
 	this.uploadTag = "Relevant";
         this.runLoadUrls(this.state.valueLoadUrls);
     }
-    
+
     addNegURLs(){
 	this.handleCloseLoadURLs();
 	this.uploadTag = "Irrelevant";
-	this.runLoadUrls(this.state.valueLoadUrls);	
+	this.runLoadUrls(this.state.valueLoadUrls);
     }
 
     addNeutralURLs(){
 	this.handleCloseLoadURLs();
 	this.uploadTag = "Neutral";
-	this.runLoadUrls(this.state.valueLoadUrls);	
+	this.runLoadUrls(this.state.valueLoadUrls);
+    }
+    addCustomTagURLs(event){
+      this.handleCloseLoadURLs();
+      this.uploadTag = event.value;
+      this.runLoadUrls(this.state.valueLoadUrls);
     }
 
+
     loadFromFile = () => {
 	this.fromFile = true;
 	this.handleOpenLoadURLs();
@@ -151,7 +179,7 @@ class SearchTabs extends React.Component {
 	this.fromFile = false;
 	this.handleOpenLoadURLs();
     }
-    
+
     // Handling search engine DropdownButton.
     handleDropdownButton(eventKey){
       this.setState({"search_engine":eventKey})
@@ -194,24 +222,33 @@ class SearchTabs extends React.Component {
     focusTextField() {
       setTimeout(() => this.textInput.focus(), 100);
     }
-    
+
     render() {
 	const actionsLoadURLs = [
 		<FlatButton label="Cancel" primary={true} onTouchTap={this.handleCloseLoadURLs}/>,
 		<FlatButton label="Relevant" style={{marginLeft:10}} primary={true} keyboardFocused={true} onTouchTap={this.addPosURLs.bind(this)}/>,
 		<FlatButton label="Irrelevant" primary={true} keyboardFocused={true} onTouchTap={this.addNegURLs.bind(this)}/>,
 		<FlatButton label="Neutral" style={{marginLeft:10}} primary={true} keyboardFocused={true} onTouchTap={this.addNeutralURLs.bind(this)}/>,
-	];
+    <div style={{float:"left",fontSize: "14px", fontWeight: "500",width: '18%'}}>
+      <Select.Creatable
+        placeholder="Add Tag"
+        multi={false}
+        options={this.availableTags}
+        onChange={this.addCustomTagURLs.bind(this)}
+        ignoreCase={true}
+      />
+      </div>
+  ];
 	let show_choose_file = (this.fromFile || this.fromFile === undefined)? <Row style={{marginTop:30}}> <p style={{fontSize:12, marginLeft:10}}>"Upload URLs from file"</p> <br />
 	                                         <FlatButton style={{marginLeft:'15px'}}
 	                                         label="Choose URLs File"
 	                                         labelPosition="before"
-	                                         containerElement="label"> 
+	                                         containerElement="label">
 	                                         <input type="file" id="csvFileInput" onChange={this.handleFile.bind(this)} name='file' ref='file' accept=".txt"/>
 	                                         </FlatButton>
 	                                         </Row>
                                     	         :<div/>;
-	
+
 	return (
 		<div>
 		<Tabs
@@ -285,10 +322,10 @@ class SearchTabs extends React.Component {
                 <br />
 
 	      <Dialog  title={"Upload URLs"} actions={actionsLoadURLs} modal={false} open={this.state.openLoadURLs} onRequestClose={this.handleCloseLoadURLs.bind(this)}>
-	      {show_choose_file}               
+	      {show_choose_file}
                 <br />
                 </Dialog>
-	      
+
 	      </Row>
             </div>
             <div style={styles.slide}>