05/12 React + Flask

Purpose

Today I started to explore the presentaion part of the EECS6893 Big Data project. In this project, we want to do a toxic comment classfication. It’s based on the same competition on Kaggle. After training the model, we want to apply our model to classify some toxic tweets on Twitter and make some data visualizations.

React

A Javascript library maintained by Facebook. I use it for the front-end part.
Could be simply deployed by using create-react-app, but I followed another tutorial. First establish two folders: static & server. We add webpack.config.js in static folder.
In package.json file, add some commands:

1
2
3

"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"watch": "webpack --progress -d --config webpack.config.js --watch"

Then we can simply use command npm run watch to build and run our program.
The input data should be a list of json object, I want to draw Pie Chart to reflect the proportion of each type of toxic comment. To implement that, Ajax should be used to fetch input data from server. Once receive the data, modify the default state (an important concept in React).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//index.jsx
componentDidMount() {
  fetch(url)
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        isLoaded: true,
        items: result
      });
    },
    (error) => {
      //Deal with Error
    }
   )
}

To draw the Pie Chart, I used the fantastic react-easy-chart. Can be found here.

Flask

Not my first time using Flask, so this part didn’t take me long time to complete. However, Twitter Streaming part is worth noting. At first, I can’t figure out how to stop the streaming. Tried to set a timeout but didn’t work. It turned out that timeout should be configured in the self-defined class by setting a time limit, and monitor current time by using time.time().
Also, I met CORS error problem at first for the AJAX part. Solved it by adding a header in response sent by server. response.headers.add('Access-Control-Allow-Origin', '*')