Each Card will get data from datastore in isolation based on provided variables instead of having the data passed in. Will also need to refactor WithVariables to take in a load screen element probably

label says "4.8% of % of cases" oops

We're making a dev version, but as of now it's publicly accessible. We should make sure this isn't publicly accessible so we can iterate in a protected environment.

Chris pointed out that Netlify can do this with a paid plan: https://www.netlify.com/blog/2017/04/07/selective-password-protection/

Not sure what it would take to do this if we served the frontend from our own server, needs some investigation.

Once we have mocks, we'll need to update the UI to match them/resolve differences

This sort of depends on whether we continue using the material-ui library. For now I just used the material-ui CssBaseline component which gives some reasonable defaults. If we continue using the library we'll probably want to customize the theme. If not we'll need to do more of our own styling across various components.

Also, Chris initially suggested setting font-size to 62.5% so we can use rems for font-size elsewhere and 1rem == 10px, etc. I reset this to 100% because it was overriding the font-size in the material-ui library. Going to postpone this decision until we know whether we're even going to stick with that library (#10). After that we can look more into whether we can do the 62.5% strategy and not break the material-ui library, or if we want to drop that piece.

Create wrapper around Cards that require special key specifications so that the report level caller doesn't have to specify them

For creating or embedding any charts, maps, etc. Some options could be:

• A charting framework such as Vega/VegaLite, Chart.JS
• Using D3JS for charts
• Using a React / D3 abstraction layer
• Using an interactive geographic map library such as MapBox GL JS
• Using external software that allows for embedding / iframe'ing charts and maps such as Tableau, Data Wrapper, etc.

Can go in DataFetcher
Result of this call could be stored in Redux

https://www.figma.com/file/O27O3VUTAzrdNlSlAO8myk/Health-Equity-Tracker?node-id=520%3A12494

Would be nice to show as an example of what we can do if data is missing or problematic

Recommendation (based on Chris's suggestion):

src/
  -> features/
      -> dataset_explorer/ (may want to rename this to dataset_catalog or something since I think the term "data explorer" is being used in other contexts)
  -> data_processing/ (IMO it would be good to have this for anything that gets/processes data, separate from components)
      -> DataFetcher.ts
  -> utils/

I have a working prototype of this, some stuff needs to be fleshed out though

some sort of indicator of which index out of how many indicies there are in the carousel would be nice to orient users

example could be several dots with the current index colored in

Can use drawer when width is small: https://material-ui.com/components/drawers/

This depends on UX deciding on a design system. Looks like UX is leaning towards material.

Some popular options for libraries include:

• material: https://www.npmjs.com/package/@material-ui/core
• ant: https://www.npmjs.com/package/antd

I'm sure there are many more but these are both widely used/supported/documented.

Alternatively we could create our own component library, which would allow much more granular control and customizability, but at the cost of extra time to develop and maintain it. Chris suggested that if we do this, use https://storybook.js.org/ to manage/document the library.

My instinct is to use an existing design system and use a popular library that implements it to save ourselves the additional work. Note that if we do use an existing component library we should make sure it supports the customizations we need.

Is it possible to have the MadLib Carousel stick to the top when you scroll past it so you can always see the MadLib text

Right now it's getting deployed to some generated netlify domain. We want to move it to healthequitytracker.org or possibly app.healthequitytracker.org

All dropdowns should be a button with text underline (with offset of 3px) and also the same font size
All popups open underneath the madlib (like the geo one does)

For instance, on landing page, scroll down and click a link to the explore data page, notice that the page doesn't start off at the top again

Update card footer text per mock to spell out names of data sources and last update times

Current values for the breakdown variable are hardcoded, ideally they should instead be pulled straight from the dataset

We should generalize how variables are configured so we can reuse logic across charts/madlibs/variables. Here's a very rough draft of how we might structure configuration:

VariableConfig: {
  variableId
  fullName
  shortName
  variableType
  description?
}

VariableType: count | pct_share | pct_share_to_pop_ratio | per100k | percentile | index

MadlibVariable: {
  Variable: {
    Metric: VariableConfig
    ...
  }
}

// Example:
covid: { // MadlibVariable
  cases: { // Variable
    count: { // Metric
      id: “covid_cases”,
      fullName: “Covid19 cases”,
      shortName: “cases”,
      variableType: “count”
    },
    pct_share: {
      id: “covid_pct_share”,
      fullName: “Share of COVID-19 cases”,
      shortName: “...”,
      variableType: “pct_share”
    }
  },
  deaths: {
    ...
  }

The goal should be that we can write generalized code in the UI that doesn't need to know about the specifics of what variables we're using, and allows us to add more variables without making significant UI code changes.

Right now we're using a netlify setup, which has a lot of conveniences like automatic previews from github, but is much less flexible. For features that require more server support like an admin login, we'd need to switch to a Node.js or Flask server (or other, but those are the two natural choices so we don't have to fragment our codebase into three languages).

With a Node.js or Flask server, you don't get as much out of the box like with Netlify, but they have other flexibility benefits like being able to implement features that require server-side support and hosting in GCP (which means it can be managed the same as other resources, we can control backend API access, etc).

Some other considerations with Netlify:

• Requires a paid account for more than one login. This would very likely be a requirement for the main website as we'd want developers to be able to access it
• The marketing/informational website is on Netlify. It may be convenient to have both of them there. Is this website going to stick around long-term or be turned into a landing page for the main website?
• Does netlify scale with production apps?

We should definitely sort this out but I'd recommend punting the decision until we've built more of the frontend and data server.

Component will display metadata in the DatasetListing component

We should explicitly use null/undefined and make sure charts don't show misleading 0s

Add 404 page for unknown routing

Heat map only lets you filter by race- ideally we would have a multi tiered filter
Age -> [age options as supported by the dataset]
Gender -> [gender options as supported by the dataset]
Race -> [race options as supported by the dataset]

Ideally we should migrate the frontend to the health-equity-tracker repo. Our codebase isn't large enough for a monorepo to be an issue, and long-term this will simplify deploy deploy processes and open source contributions. This also allows us to unify github actions, terraform config, etc under one repo. We still plan on prod releases being separate, but dev releases can happen automatically after any merge to master.

That being said, we should be careful not to cause development strain while doing this. We need to make sure presubmits for the frontend aren't interfering with the backend and vice versa. If there are issues, we can keep the repo as is but will need to revisit our cloud run deployment flow.

We should also provide an option to run locally with a local file to allow quick iteration

Cards should have a clear marker of how recent the data used is

So each unique madlib can have its own unique link

Variable provider is returning Row[] or error and it's being packaged into MetricQueryResponse upstream, ideally we could avoid the error catching

Adjust current layout to be closer to Ken's draft mocks here: https://drive.google.com/corp/drive/folders/1yu4gG5Kpkmhv7f49lizwS2AKTZ2uSecY

Use Create React App with:

• Typescript enabled
• Sass enabled
• polyfills for older browsers via react-app-polyfill

According to the docs, I think the above should be achievable by doing:

npx create-react-app my-app --template typescript 
yarn add node-sass react-app-polyfill

Up for discussion:

• One caveat will be that the above command will install everything to my-app and not this repo het-frontend. We may need to cp -r from the CRA output dir to this repo as I'm not sure if we can use an existing dir with the npx create-react-app cmd.
• We should pin a NodeJS version, probably whatever the latest LTS version is, via the package.json engine field or a .nvmrc file if using Node Version Manager.
• We should decide on whether or not to use npm or yarn as a package manager. CRA uses yarn by default but by passing the --use-npm flag when running the above cmd we can default to npm.
• Code formatting: are we okay with using Prettier to automatically format our files? (this can be set up to happen on a git commit hook)
• add an .editorconfig file to help normalize various IDEs & code editors? Prettier may take care of this as well?

Make sure our unit tests are set up properly and run on presubmit and submit