InteractOut Timeline Visualization

This interactive tool is designed to assist researchers and analysts in monitoring and understanding user behavior within the InteractOut app. Through real-time data collection and visual analytics, this web app offers a comprehensive view of user interactions and app usage patterns, providing insights for lab and field studies.

Prerequisites

This project requires NodeJS (version 16 or later) and NPM. Node and NPM are easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
8.19.3
v18.13.0

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

$ git clone git@github.com:HumanAILab/interactout-timeline-viz.git
$ cd interactout-timeline-viz

To install and set up the library, run:

$ npm install

Usage

Serving the app

$ npm start

Building a distribution version

$ npm run build

This task will create a distribution version of the project inside your local dist/ folder

Security

Multiple levels of security checks are enforced in this web app.

1. API key restrictions on Google Cloud Platform
2. Authorized domains on Firebase Console
3. Firebase App Check with public keys in index.html
4. Firebase Security Rules

Resources

• Cloud Firestore
• vis-timeline JS Library
• Observable Plot
• Date Range Picker
• FirebaseUI for Web
• Bootstrap & Webpack
• PurgeCSS
• HTML Webpack Plugin
• Webpack Production