✨Dashboard V1 (#3)

* Initial commit from Create React App

* ✨ Basic results and search UI for FHIR

App has ability to query both the HAPI and SyntheticMass APIs for results, and do a basic query on the results with an input box.

* 🚨 ESLint compliance

Fixing ESLint configuration to lint all files recursively, and fixing errors that came up.

* 🐛 Initial authorization bug fix

OAuth request was not returned before the data loaded on the initial page load - fixed the order of resolving.

* 📝 Updated README

Updated README to include installation and running instructions, as well as information on the HAPI and Synthea APIs.

* 🗑️ Cleaning up README and gitignore

* ➖ Package-lock wasn't updated

Updated package-lock to remove dependency not in package.json

* 🐛 Doesn't case error if no data returned

If there are no Patient results, the page will say 0 Results instead of throwing an error

* 🔧 Added Prettier configuration

Added Prettier configuration per the KF Dev Guidelines

* 🎨 Applying Prettier, removing Airbnb ESLint

Removed the Airbnb ESlint config and defaulted to Prettier standards.

* ✨ Results in table that dynamically fetches

The results from the API are pulled into a table that will fetch the next batch on scroll

* ♻️ Moving components out

Moved table to its own component

* ♻️ Refactoring to include some error handling and cut down on redundant code.

Refactoring to include some error handling and cut down on redundant code.

* ♻️ Refactoring loading state

Refactoring loading state for fetching more rows.

* 💄 Reformatting table

Reformatting table to look better on page.

* ✨ Turning cohort builder into dashboard

Home page that pulls all resources, and detail page routes set up.

* ✨ Added Redux store

Added a Redux store to the application to cache query results

* ⚡ Resource details page uses Redux store

Resource details page is hooked up to the Redux store to avoid redundant queries and used cached information if possible.

* ✨ Pulling stats on a resource's attributes

Displaying pie charts showing distribution of queries of a resource's attributes.

* 💄 Pie chart styles

Cleaning up pie charts for each attribute.

* 💄 Adding search bar and collapsible sections

User can search for a resource to filter results. The sections with each resource also collapse.

* 💄 Kids First color scheme

Add Kids First color scheme and logo to app.

* ♻️ Refactored homepage

Renamed AllResources to Homepage and cleaned up code for readability and optimization.

* ♻️ Refactoring query attributes for a resource

Querying attributes in a more extensible way. Also updated pie chart rendering.

* ✨ Ability to query on all search params of strings, enums, and bools

Queries on all available search parameters including defaults, and displays either as a count or in a pie chart.

* 💄 Updating to D3b theme

Using D3b colors and fonts instead of KF

* 💄 Styling resource details dashboard

sorted charts to display in more organized way.

* ⚡ Using _summary

Instead of querying resources and using _total, using the _summary query parameter to improve speed for getting query results.

* 💄 Adding human readable numbers

Numbers are formatted with commas to make them more readable.

* 💄 Updating header styling and README

* 💡 Updating README

Updating to be about data dashboard vs. cohort builder

* 📱 Homepage is responsive

* 📱 Details page responsive

* 🔥 Removing _total queries

Removed unnecessary use of _total and _count as query parameters

* 🎨 Refactoring to adhere more to React patterns

Updated prop types to be more accurate, removed unnecessary states for components.

* ⚡ Optimizations when formatting responses

Using Sets for faster look up, trying to combine loops to avoid redundant looping.

* ✨ Able to get queries on extensions

Shows stats for attributes that are extensions

* 💄 Updating details page styles

Ordered data by chart type to organize page more.

* 💄 Fixing pie chart styles

* 💄 More updates to chart styling

* ✨ Ability to switch between FHIR APIs

Added a dropdown menu for user to dynamically switch between the HAPI and KF APIs

* 💄 Updated dropdown and input styles to be D3b colors

* 🐛 Using _profile to query specific resource types

Was querying base types only - using this in the url queries the specific resource type

* 🐛 Add :below to profile query

.circleci/config.yml

@@ -0,0 +1,26 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:10.8
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: npm i
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: npm run build

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": "react-app",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+  }
+}

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-recommended"
+}

README.md

@@ -1,2 +1,39 @@
-# kf-ui-fhir-cohort-builder
-💡📊Prototype cohort builder for FHIR data
+# Kids First FHIR Data Dashboard
+
+💡📊A prototype data dashboard for any FHIR server. Spin this up in front of your server so people can get a quick visual understanding of what's in this server.
+
+## Development
+
+This application utilizes `create-react-app`. To run it, install the dependencies
+and start the server:
+
+```
+npm install
+npm start
+```
+
+This will open up the application at `localhost:3000`.
+More on `create-react-app` [here](https://reactjs.org/docs/create-a-new-react-app.html).
+
+### FHIR APIs
+
+Creating a data dashboard over the FHIR API standard means that a user potentially
+has the ability to search over multiple datasets. This application has the ability
+to utilize either the [HAPI FHIR API](http://hapi.fhir.org/) or [Synthea's FHIR API](https://synthea.mitre.org/) from SyntheticMass. To switch between the two,
+set the `REACT_APP_FHIR_API` from the command line, with the options being
+`hapi`, `synthea`, or empty. An empty variable will default to `synthea`.
+
+Due to issues with cross origin requests, a "proxy url" is used instead of hitting the
+API endpoints directly.
+
+### Authentication with Synthea
+
+Utilizing the Synthea FHIR API requires a token. Generating the OAuth token is built into
+the app, but the API key and secret pair must be generated manually from the website.
+
+1. Go to the [Synthea](https://synthea.mitre.org/) website and register for a free account.
+2. Navigate to the Apps page, located under your email address.
+3. Create a new App if not already created. This will generate an API key/secret pair.
+4. Produce the base64 encoded value of your API key and secret pair separated by a semicolon (ie. `APIKey123:APISecret456`).
+5. This is the value that will be used to get OAuth tokens from Synthea. Set this as the environment
+   variable `REACT_APP_SECRET` for local development.