rubyforgood/flaredown

Flaredown web app and API

Flaredown

Flaredown makes it easy for people to track symptoms over time, and learn how to control them. Our goal is to analyze the aggregate data from users of this tool to understand the probable effects of treatments and environmental stressors on chronic illness.

Help would be appreciated! Please join us in slack #flaredown, raise a GitHub issue, or email contact@flaredown.

Environment

• PostgreSQL 12.8
• MongoDB 4.4.9
• Redis 6.2.3
• Ruby 3.2.3
• Node 12.22.6

Installation

The application and all dependencies are dockerized and can be run using docker compose, so there's no dependencies to install other than Docker. Alternatively, you can run the app using the make commands available: make help

If you want to run the application on your own machine see the next sections on dependency installations

Running natively

Mac Prerequisites

If you are running on an M1 mac, run the following command before you start the installation process:

$env /usr/bin/arch -arm64 /bin/zsh ---login

Remove all gems before you proceed

gem uninstall -aIx

Backend

You can install the dependencies via asdf-vm declared in the .tool-versions file, or:

• Ruby Version Manager
• MongoDB installation on OSX

On macOS, you can install libpq by running brew install libpq && brew link --force libpq && bundle config --local build.pg "--with-ldflags=-L$(brew --prefix libpq)/lib --with-pg-include=$(brew --prefix libpq)/include", which is required for bundle install to succeed.

cd backend
echo "gem: --no-ri --no-rdoc" > ~/.gemrc
bundle config set --local without 'production'
bundle config set --local jobs 5
bundle config set --local retry 10
bundle install
cp env-example .env # You may adjust it however you like
                    # RVM is going to autoload this on every 'cd' to the directory
bundle exec rake app:setup

gem install foreman

Frontend

cd frontend
npm install

React Native

cd native
npm install

Development

Prerequisites

• Populate the necessary environment parameters with cp backend/env-example backend/.env && cp backend/env-example frontend/.env
• Create a Facebook dev app and paste your own ID into frontend/.env file's FACEBOOK_APP_ID parameter.
  • Note: This is not necessary in backend/.env but we have not yet cleaned up these two files into the necessary components.
• Seed your database using make seed or bundle exec rails app:setup

Running

If you are running the application natively, run the following to start your server. If you're using docker, this should be up and running already.

rake run

Visit your app at http://localhost:4300 for the current ember application, or http://localhost:19006 for the React Native version.

Running tests locally

1. Run make build or docker compose build backend to ensure the latest backend is built and being run
2. To run all tests run make specs or script/backend rspec spec spec, or you can run a specific test suite such as script/backend rspec spec spec/services/weather_retriever_spec.rb
3. Debugging tip: in Ruby code you can add a line that says debugger and rspec will automatically break on that line and give you an interactive Ruby shell

CI

Several checks are configured to run on all commits using GitHub Actions, including lint, build and test steps. Definitions can be found in ./.github/workflows. Those checks which always run are required to be successful for pull requests to be merged.

Deployment

Deployments target Heroku. The traditional deployment is manually configured and is composed of two distinct applications (frontend and api) in two environments (staging and production), with automatic deployments to staging of commits to master:

• flaredown-staging-api
• flaredown-staging-webapp (https://app.flaredown.com)
• flaredown-api
• flaredown-webapp (https://staging.flaredown.com) (Temporarily https://flaredown-staging-webapp.herokuapp.com/login due to #506)

Addons are used for Heroku Postgres, Heroku Redis, Heroku Scheduler + Papertrail. MongoDB is provided by mongodb.com.

Style Guide

🎨 Figma Assets

Common Problems

• On first load, the app displays a blank beige screen instead of the login screen. Temporary fix is to add console.log(process.env.FACEBOOK_APP_ID) right inside of the module.exports at the top of the frontend/config/environment.js file. You can then refresh the page (no need to kill Docker) and this should fix it. You can now remove the log.

License

Copyright 2015-2024 Logan Merriam and contributors.

Flaredown is open source software made available under the GPLv3 License. For details see the LICENSE file.

flaredown's Issues

Pips stuck on hover

If you leave a summary screen open for a few minutes, it can get into a state where the first hover over a pip locks the rating in. Even clicking and changing the rating will not reset it.

If you refresh the page, it functions fine and you will see that any rating changes you made did register.

Video: https://www.dropbox.com/s/ff47v1ulcqteinx/pipBug.mov?dl=0

Set user’s most-recently used treatment doses as default when it's "turned-on"

The most recent dose used for a treatment has to be saved for each user, in order to allow him to quickly select it during checkin

Authentication-related features

• forgot password
• update password

ids param sent as object rather than as array to treatments endpoint

This is what's causing the following:
https://flaredown.airbrake.io/projects/121837/groups/1653854108580241014/notices/1653854106619961672

Here's the params:

{
  "action": "index",
  "controller": "api/v1/treatments",
  "format": "json",
  "ids": {
    "0": "4544",
    "1": "9213"
  }
}

ids should be an array, it is an object instead because the query string is ?ids[0]=4544&ids[1]=9213

@safeforge Any idea?

Line graphs should connect across empty days

Example: I record a rating for the Abdominal Pain symptom on Wednesday, I don't record one on Thursday, and I do record one on Friday.

Right now the line graph does not draw a line between Wednesday and Friday because Thursday had no value. We should connect the line graph across days, and add dots to show which days were explicitly rated. Quick example:

Fix menu on mobile

Right now I see this at mobile sizes:

Failure when clicking on a date with no checkin

Error: Assertion Failed: `store.queryRecord` expected the adapter to return one record but the response from the adapter was empty.

Do not create entry until user has entered data

If the user is just navigating through days by clicking the back arrow, we don't want to create an entry for each one (and thus turn them into empty summaries) until they actually enter data to be saved.

Link to check-in in navigation

Add a link to "Check-in" before the "Graph" link in the navigation, that goes to today's check-in

Graph: treatment dots too low

May be a regression from fixing the line graph recently?

Remove deprecation "property modified inside the didInsertElement hook"

Getting this deprecation when entering Checkin's 2nd screen (Conditions)

Graph lines interpolation

Currently, on days when the user does not rate a trackable, the graph returns to a midpoint. What it should do is interpolate between the points directly:

[Airbrake] message: Validation of Checkin failed. summary: The following errors were found: Date is already taken resolution: Try persisting the document with valid data or remove the validations.

Airbrake error: #3994
Airbrake project: Flaredown

Error type: Mongoid::Errors::Validations
Error message: message: Validation of Checkin failed. summary: The following errors were found: Date is already taken resolution: Try persisting the document with valid data or remove the validations.
Where: checkins#create
Occurred at: Apr 01, 2016 12:42:42 UTC
First seen at: Mar 26, 2016 01:22:44 UTC
Occurrences: 177 (0 since last deploy on <no information>)

URL: https://flaredown-api.herokuapp.com/api/checkins
File: /gems/mongoid-5.0.2/lib/mongoid/persistable.rb

Backtrace:

/gems/mongoid-5.0.2/lib/mongoid/persistable.rb:78:in fail_due_to_validation!
/gems/mongoid-5.0.2/lib/mongoid/persistable/updatable.rb:73:in update!
/app/app/services/checkin_creator.rb:28:in create!
/app/app/controllers/api/v1/checkins_controller.rb:13:in create

Improved history navigation

Navigating the chart on touch devices is particularly tough, because scrolling up and down to see different trackables conflicts with the left/right dragging gesture to navigate the chart viewport. The goal is to improve navigation patterns.

• Navigation buttons that move the chart backwards and forwards in time
• Calendar button that opens a datepicker (mockup uses a screenshot of the PickADate.js plugin). On selecting a date the chart viewport should be centered on that date.
• Tap anywhere on the charts to show the scrubber, along with a button displaying the date. Tap on the scrubber again to hide it. Tap the button to navigate to the check-in for that date. (extracted to #162)

After some experimenting, it looks like a good date range for mobile portrait is around 10 days. Maybe we can check the user's window width when the page is loaded up and adjust the amount of days in the view such that they are spaced ~32 pixels apart.

Demographic info: show description on "Day habits" options

Default route

If the user has already checked-in today, default route when they open the app should be the charts
If the user has no entry today, default route should be today's check-in

List Recent Tags

Hide and show trackables on history

For simplicity, the first version of the history showed all trackables by default. That means it's tough for users to compare the specific trackables they're interested in (for example, if I want to see the effects of a particular treatment on a symptom, and they are not both visible on the screen). To fix this, let's give users control over the visible trackables.

• Button in the history navbar that lists the number of visible trackables, which you can tap on to open the trackable selector modal.
• Dropdown in the modal to select different trackable types. As we are adding new types of trackables, we should try to make sure that new ones in the future show up in this list.
• List trackables of the currently selected type, with a switch to turn them on/off in the history

Show dot in chart for treatments taken with no dose specified

That means when the taken field is true

Chart: show treatments markers only when taken=true

Auto-suggest treatment doses

Most popular doses for the selected treatment should be suggested to users

Loading icon

We should throw in a spinner when the graph is loading up, otherwise it's just a blank page for several seconds

Graph lines are reversed

The line graphs are currently low when the user has indicated MORE active ratings in the check-in, and high when the user has indicated that a condition/symptom is less active (which is backwards). See here:

More pips selected by user should = higher line graph

Inject store into components using initializer

Remove "unsaved changes" message on Checkin's first screen

The message stays there because autosave isn't triggered on the first screen. I need to investigate about why the Ember record is dirty at that point, but anyways I don't think we need such message at all on this screen. @lmerriam Do you agree?

Duplicate trackables in autosuggest

See here:

Failed tracking new condition typed

On today's checkin, when typing a new condition not present in select box, I get the following failure:

POST http://localhost:4300/api/trackings 422

That's because trackable_id and trackable_type params are sent as null values.

Cache the history

Right now, if the user leaves the history to navigate to another section of the app, then returns to the history, they have to load the history again. If possible, it would be ideal to cache the currently visible history when the graph loads, so that the user can quickly switch between sections of the app.

Conditions/Symptoms checkin: color and tooltip on hover

Onboarding: demographic data

Trackable color different from chart to checkin

@safeforge found a case when trackable color differs from chart to checkin.
Not sure if this is an edge case, @lmerriam might help understanding this.

1. User adds a trackable to a past day's checkin; system assigns it a random color and saves it into checkin record. As per req., it won't be tracked on future days, and it won't appear in the chart either.
2. User adds the same trackable to today's checkin. As per req., it will be tracked on future days, so system assigns it a random color which gets saved in the tracking record.

Now that trackable appears on chart, but on that past day's checkin from step 1 it continues to appear with its original color, because at that date no tracking record exists for that trackable.

Color of trackable too close to default gray color

The gray color of a trackable item is too close to the default color and could be mistaken for the items not being clickable/working. I actually thought something was wrong with the Back Pain trackable and it wasn't clickable when I first noticed it. See screen shot.

http://prntscr.com/amthgn

Consider either darkening the gray or not using a color so close to the default color.

Can't add new trackables

Seems to be universal for me, I don't have to do anything to reproduce. Several users reporting same issue. Video: https://www.dropbox.com/s/brctlgw0nhvjz8z/cantAddTrackables.mov?dl=0

Routing to onboarding not working

There seems to be an issue when including more than 2 beforeModel hooks in the same route.
After implementing beforeModel hook in index route, the same hook in OnboardedRoute mixin stopped getting called for some reason.

UI feedback needed on checkin autosave

We need to provide some visual feedback to users:

• when there are unsaved changes
• while saving
• when all changes are saved

@lmerriam Hints welcome on UI!

Change email form

Give the user a way to change the email address they log in with and receive emails from Flaredown at

Error monitoring

Let's choose and implement a service to monitor exceptions in the production app

SSO with Discourse

Our existing app creates an account for our users on our discourse and logs them into it, let's get that working in flaredownember-2

Show count of users in autocomplete when adding trackable

Same way we had it in the original app [will add screenshot soon]

Integrate intercom

Send the same information as the existing app:

• Demographic and profile data
• Check-in event
• Onboarded event

Create a new "app" on intercom so stats are kept separate from the old app.

Static pages / external links

• Upcoming
• Discussion
• Terms of Service
• Privacy Policy
• Contact

Autosuggest improvements

1. A new trackable should only become visible in the autosuggest if 5 people independently add it, to make sure that we don't end up with a bunch of variations of the same thing. DONE

1. We should show the number of users like the existing app does:
   

Checkin Summary: new trackables added appear twice, page refresh fixes

When adding a new Condition, Symptom or Treatment from the Checkin Summary screen, it appears twice immediately after autosave. Refreshing the page shows it once as expected.
@lmerriam adding this to Launch milestone, feel free to change if disagree.

Developer note: this happens because the onCheckinSaved() method from trackables-step component needs to be invoked, rather than the generic one coming from the CheckinAutosave mixin, so that the deleteAddedTrackeds() method is invoked, which removes 'ghost' records

Optimize Checkin#most_recent_dose_for method

This method is causing Rack::Timeout::RequestTimeoutException

I need to find a better implementation

Date issues

Two issues I can reproduce:

• Clicking on a date on the graph takes me to the prior day in the check-in
• Clicking the arrow to move to the previous day in the check-in moves me back two days, clicking the arrow to move to the next day in the check-in does not do anything

Import users accounts from existing app

List Popular Tags

This feature is present in the old app, so I'm adding it to Launch milestone.
@lmerriam Feel free to change if you disagree.

Given URL is not allowed by the Application configuration

Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

Endless loading

Users report seeing the loading dots endlessly

Seeing lots of timeouts on the heroku dashboard:

Notes in summary

A place for the user to leave a freeform note about their day: https://paper.dropbox.com/doc/Design-Doc-Check-in-JXiQVK4KzNL9p4R9zBFro#:h=Summary