Next.JS project: X-Stance Dashboard

This is the repository of the X-Stance Dashboard as described in my bachelor thesis. It is implemented with Next.JS (in case you need routing and other stuff) on top of ReactJS. It is hosted on a NodeJS Express Server and has a path /files where static files (our predictions) are served

External interfaces:

The dashboard has two external interfaces:

• The first is fetching of a JSON results file per model, containing it's training information (duration, losses and id) as well as the predictions it did on the test set. This is achieved using a standardized JSON format that is written in the Python code to it's .results folder. The location of this folder (you can also download the folder as a .zip) must then be set as FILE_DIR variable as the GUI creates a static file server on the corresponding location and loads it from there via REST call.

• The second, real-live evaluation is again done via a REST call, but needs setup of an additional service: The python flask web_app. It also fetches a standardized model via REST, but from a different origin (CORS)

Structure

This is a standard NextJS project. It only contains one route (the root, respectively /stance). This is where the dashboard is located. All other paths return the default 404 screen of NextJS. next-**.js/ts are next-specific configuration files.

Otherwise it is structured as follows:

• pages: public routes
  • index is root path
  • stance is /stance
  • _app for styling with material UI theme (may be a bit of a hack)
  • _document for general meta tags
• public: static assets
  • image for og image (whatsapp etc)
  • favicon
  • robots.txt which is basically empty
  • uzh logo for dashboard
• src: React Subcomponents, Models, theme and HttpClient as well as Utilities for the Dashboard
  • components: React Components that are used in the Dashboard page
    • Confusion Matrix
    • Filter dropdowns
    • Model Selection dropdown
    • Queston View
    • Initial table
    • Scores view (overall and per language)
  • http: Http Clients
    • BackendClient: Client to fetch predictions by models (from own static server) as well as predictions from flask backend
  • models: Typescript types (inline enums) as well as interfaces for data representation
    • evaluation: Interface for calls to evaluation backend
    • internal: Used internally for representation of state (and not component-specific)
    • results: Representation that is generated by the Python code that evaluates the whole test set
    • Metric/ModelType: Inline Enums
  • styles: Custom Material UI Theme for project
  • utils: PredictionUtils that contain mapping and data formatting functionality
• server.js: Entry script for node: Starts express server that serves static files on /files and nextjs application on all other paths

Running

Before running, you need to set the environment variable FILE_DIR to a valid path from where to serve the /files directory (where result JSON files are located as described in external interfaces section)

First, you need Node 10.14 and a corresponding NPM version. Then, run npm install to install the required packages.

In case you do not want to build (because being a dev), run npm run dev locally.

In case you build it, run npm run build followed by npm run start or npm run start_windows depending on the platform.

The link of the evaluation backend can be overridden by setting the environment variable EVALUATION_URL to the desired value (remember to include the last / in the url).

The X-Stance dashboard is also deployed on https://x-stance.iten.engineering/