diff --git a/package-lock.json b/package-lock.json
index 43fb0483..45439eda 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2892,6 +2892,14 @@
"postcss-value-parser": "^4.1.0"
}
},
+ "autosuggest-highlight": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/autosuggest-highlight/-/autosuggest-highlight-3.1.1.tgz",
+ "integrity": "sha512-MQ6GNIGMMZbeA5FlBLXXgkZEthysCdYNkMV4MahB2/qB/9cwBnVsePUPnIqkMuzjzclTtDa67xln7cgLDu2f/g==",
+ "requires": {
+ "diacritic": "0.0.2"
+ }
+ },
"aws-sign2": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -5786,6 +5794,11 @@
}
}
},
+ "diacritic": {
+ "version": "0.0.2",
+ "resolved": "https://registry.npmjs.org/diacritic/-/diacritic-0.0.2.tgz",
+ "integrity": "sha1-/CqIe1pbwKCoVPthTHwvIJBh7gQ="
+ },
"diff-sequences": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
@@ -13424,6 +13437,18 @@
"whatwg-fetch": "^3.0.0"
}
},
+ "react-autosuggest": {
+ "version": "10.0.3",
+ "resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-10.0.3.tgz",
+ "integrity": "sha512-h+Cv1emcw7AQsDuN5MYPkmpDvg14jScmKyiQv5LqYRn/gqI6VHzmBdL2I2CHVFARHOvK2R+D35sNd5AEvGc3mQ==",
+ "requires": {
+ "es6-promise": "^4.2.8",
+ "prop-types": "^15.7.2",
+ "react-themeable": "^1.1.0",
+ "section-iterator": "^2.0.0",
+ "shallow-equal": "^1.2.1"
+ }
+ },
"react-bootstrap": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.3.0.tgz",
@@ -13960,6 +13985,21 @@
"raf": "^3.3.0"
}
},
+ "react-themeable": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz",
+ "integrity": "sha1-fURm3ZsrX6dQWHJ4JenxUro3mg4=",
+ "requires": {
+ "object-assign": "^3.0.0"
+ },
+ "dependencies": {
+ "object-assign": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+ "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
+ }
+ }
+ },
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -14891,6 +14931,11 @@
"ajv-keywords": "^3.5.2"
}
},
+ "section-iterator": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz",
+ "integrity": "sha1-v0RNev7rlK1Dw5rS+yYVFifMuio="
+ },
"seedrandom": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
@@ -15106,6 +15151,11 @@
"resolved": "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz",
"integrity": "sha1-QV9CcC1z2BAzApLMXuhurhoRoXA="
},
+ "shallow-equal": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+ "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+ },
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
diff --git a/package.json b/package.json
index 40e9fb55..bd81241a 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
+ "autosuggest-highlight": "^3.1.1",
"bootstrap": "^4.5.2",
"d3": "^6.2.0",
"date-fns": "^2.16.1",
@@ -13,6 +14,7 @@
"query-string": "^6.13.5",
"rc-slider": "^9.5.3",
"react": "^16.13.1",
+ "react-autosuggest": "^10.0.3",
"react-bootstrap": "^1.3.0",
"react-bootstrap-range-slider": "^1.2.2",
"react-dom": "^16.13.1",
diff --git a/src/_App/AboutSticky.js b/src/_App/AboutSticky.js
new file mode 100644
index 00000000..e9db3240
--- /dev/null
+++ b/src/_App/AboutSticky.js
@@ -0,0 +1,119 @@
+
+import React from 'react'
+import Container from 'react-bootstrap/Container'
+//import Row from 'react-bootstrap/Row'
+//import Col from 'react-bootstrap/Col'
+import Card from 'react-bootstrap/Card'
+
+import { StickyContainer, Sticky } from 'react-sticky';
+
+const styles = {
+
+};
+
+export default function AboutSticky() {
+
+ return (
+
+
+
+
+
+
+
+ {({ style }) => (
+
+
+
+ About
+ This project builds upon the research of Tauhid Zaman, Nicolas Guenon Des Mesnards, et. al., as described by the paper: "Detecting Bots and Assessing Their Impact in Social Networks" (2018).
+
+
+
+ For this project, we analyzed tweets about the Trump Impeachment proceedings, with the aim of identifying automated Twitter accounts known as "bots," analyzing their behaviors, and assessing their impact on the conversation.
+ {" "}We then use bot community language patterns to train opinion models to measure media bias on Twitter.
+
+
+
+
+
+
+
+
+
+
+ Methodology
+ Read about our methodology in chronological order by following the outline below:
+
+
+ {/* todo: make this from the sidebar sitemap */}
+
+ Tweet Collection
+
+ Collection Topics Collection Timeline Collection Results
+
+
+ Bot Analysis
+
+ Bot Classification Bot Communities Bot Language Bot Impact
+
+
+
+ Opinion Analysis
+
+ Opinion Models User Opinions Top User Opinions
+
+
+
+
+
+
+
+ Team
+
+
+
+
+ Source Code
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/_App/App.css b/src/_App/App.css
index 78534ab2..1893dd6b 100644
--- a/src/_App/App.css
+++ b/src/_App/App.css
@@ -173,6 +173,73 @@ top:300px;
}
+
+/* React type ahead search */
+
+.react-autosuggest__container {
+ position: relative;
+}
+
+.react-autosuggest__input {
+ width: 240px;
+ height: 30px;
+ padding: 10px 20px;
+ font-family: Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 16px;
+ border: 1px solid #aaa;
+ border-radius: 4px;
+}
+
+.react-autosuggest__input--focused {
+ outline: none;
+}
+
+.react-autosuggest__input--open {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+ display: none;
+}
+
+.react-autosuggest__suggestions-container--open {
+ display: block;
+ position: absolute;
+ top: 51px;
+ width: 280px;
+ border: 1px solid #aaa;
+ background-color: #fff;
+ font-family: Helvetica, sans-serif;
+ font-weight: 300;
+ font-size: 16px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ z-index: 2;
+}
+
+.react-autosuggest__suggestions-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+ cursor: pointer;
+ padding: 10px 20px;
+}
+
+.react-autosuggest__suggestion--highlighted {
+ background-color: #ddd;
+}
+
+.react-autosuggest__suggestion-match {
+ color: #00276c;
+ font-weight: bold;
+}
+
+
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
diff --git a/src/_App/App.js b/src/_App/App.js
index 5ccbed69..cd66a4da 100644
--- a/src/_App/App.js
+++ b/src/_App/App.js
@@ -10,13 +10,15 @@ import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
//import Card from 'react-bootstrap/Card'
-
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import Home from './Home.js'
import About from './About.js'
import sidebar from './sidebar.js'
+import AboutSticky from './AboutSticky'
+
+
ReactGA.initialize(process.env.REACT_APP_GA_TRACKER_ID, {debug: true})
@@ -76,6 +78,7 @@ export default function App() {
About
+ About
@@ -118,6 +121,7 @@ export default function App() {
diff --git a/src/_App/OpinionAnalysis/User/Section.js b/src/_App/OpinionAnalysis/User/Section.js
index 8fd3f399..6bef56de 100644
--- a/src/_App/OpinionAnalysis/User/Section.js
+++ b/src/_App/OpinionAnalysis/User/Section.js
@@ -13,6 +13,11 @@ import queryString from 'query-string'
import UserOpinionDashboard from "./Dashboard"
+import TypeAheadSearchForm from './TypeAheadSearchForm';
+
+//import List from './List.js'
+import cachedData from './data.js'
+
export default class UserOpinionSection extends PureComponent {
constructor(props) {
@@ -21,17 +26,27 @@ export default class UserOpinionSection extends PureComponent {
var screenName = params["sn"] || "POLITICO" // append ?sn=BERNIESANDERS to the URL to customize via URL params!!!
this.state = {screenName: screenName}
this.handleSubmit = this.handleSubmit.bind(this)
+
+
}
handleSubmit(event){
event.preventDefault() // prevent page reload
- var screenName = document.getElementById("inputScreenName").value
+ // var screenName = document.getElementById("inputScreenName").value
+
+ var screenName = document.getElementsByClassName("react-autosuggest__input")[0].value
console.log("YOU CLICKED ME!", screenName)
- this.setState({screenName: screenName})
+
+ this.setState({ screenName: screenName })
+
+
+
}
render() {
var screenName = this.state.screenName
+
+
return (
@@ -50,6 +65,7 @@ export default class UserOpinionSection extends PureComponent {