V1.1.0/add compat functions, script to update, data source select

2021-04-21 00:00:42 -04:00
parent 50f1f53669
commit 36674febe4
5 changed files with 595 additions and 126 deletions
@@ -392,6 +392,37 @@ footer .by {
  animation: 2s ease-out 0s infinite loading;
 }

+.result-header-contianer {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 5rem;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+
+.result-header-contianer .symptom-container {
+  margin-top: 0;
+  flex: 1;
+  width: 100%;
+}
+
+.result-header-select {
+  width: 100%;
+}
+
+.result-header-select .overline {
+  font-size: 1.6rem;
+  margin-bottom: 0.75rem;
+}
+
+.result-header-select select {
+  background-color: var(--color-tertiary);
+  border-radius: 1rem;
+  padding: 1rem 2rem;
+  outline: none;
+  width: 100%;
+}
+
@media (hover: hover) and (pointer: fine) {
  .answer:hover,
  .answer.unselected:hover {
@@ -106,4 +106,24 @@ footer {

 .tip-container {
  width: fit-content;
-}
+}
+
+
+.result-header-contianer {
+  margin-bottom: 0;
+  flex-direction: row;
+}
+
+.result-header-contianer .symptom-container {
+  width: fit-content;
+}
+
+.result-header-select {
+  width: fit-content;
+  padding-left: 3rem;
+  border-left: 1px solid var(--color-secondary);
+}
+
+.result-header-select select {
+  width: fit-content;
+}
@@ -18,9 +18,9 @@ if (window.location.host.startsWith("localhost")) {
  firebase.functions().useEmulator("localhost", 5001);
 }
 const fb_functions = firebase.functions();
-const saveResult = fb_functions.httpsCallable("saveResult");
-const getPastResult = fb_functions.httpsCallable("getPastResult");
-const getStats = fb_functions.httpsCallable("getStats");
+const saveResult = fb_functions.httpsCallable("saveResultV1");
+const getPastResult = fb_functions.httpsCallable("getPastResultV1");
+const getStats = fb_functions.httpsCallable("getStatsV1");

 const VAX_NAMES = {
  PB: "Pfizer-BioNTech",
@@ -61,7 +61,7 @@ const VAX_EFFICACY = {
    "18 - 59": 66.1,
    "60 & Older": 66.2,
  },
-}
+};

 const PB_DOSE1_YOUNGER_RESULT = {
  "PAIN AT SITE": 1904,
@@ -69,7 +69,7 @@ const PB_DOSE1_YOUNGER_RESULT = {
  "SWELLING AT SITE": 132,
  FATIGUE: 1085,
  HEADACHE: 959,
-  "NEED PAIN MED":638,
+  "NEED PAIN MED": 638,
  "MUSCLE PAIN": 487,
  CHILLS: 321,
  DIARRHEA: 255,
@@ -120,74 +120,74 @@ const PB_DOSE2_OLDER_RESULT = {
  VOMITING: 11,
 };
 const MD_DOSE1_YOUNGER_RESULT = {
-  "PAIN AT SITE": "9",
-  "RED AT SITE": "<1",
-  "SWELLING AT SITE": "<1",
-  HEADACHE: "4",
-  FATIGUE: "4",
-  "MUSCLE PAIN": "2",
-  "JOINT PAIN": "2",
-  "NAUSEA OR VOMITING": "1",
-  FEVER: "1",
-  CHILLS: "1",
+  "PAIN AT SITE": 9908,
+  "RED AT SITE": 344,
+  "SWELLING AT SITE": 2089,
+  HEADACHE: 4030,
+  FATIGUE: 4384,
+  "MUSCLE PAIN": 2699,
+  "JOINT PAIN": 1893,
+  "NAUSEA OR VOMITING": 1068,
+  FEVER: 105,
+  CHILLS: 1051,
 };
 const MD_DOSE2_YOUNGER_RESULT = {
-  "PAIN AT SITE": "9",
-  "RED AT SITE": "1",
-  "SWELLING AT SITE": "1",
-  FATIGUE: "7",
-  HEADACHE: "6",
-  "JOINT PAIN": "5",
-  CHILLS: "5",
-  FEVER: "2",
-  "NAUSEA OR VOMITING": "2",
-  "MUSCLE PAIN": "1",
+  "PAIN AT SITE": 9873,
+  "RED AT SITE": 982,
+  "SWELLING AT SITE": 3164,
+  FATIGUE: 7430,
+  HEADACHE: 6898,
+  "JOINT PAIN": 4993,
+  CHILLS: 5341,
+  FEVER: 1908,
+  "NAUSEA OR VOMITING": 2348,
+  "MUSCLE PAIN": 6769,
 };
 const MD_DOSE1_OLDER_RESULT = {
-  "PAIN AT SITE": "7",
-  "RED AT SITE": "<1",
-  "SWELLING AT SITE": "<1",
-  HEADACHE: "3",
-  FATIGUE: "3",
-  "MUSCLE PAIN": "2",
-  "JOINT PAIN": "2",
-  "NAUSEA OR VOMITING": "1",
-  CHILLS: "1",
-  FEVER: "<1",
+  "PAIN AT SITE": 2782,
+  "RED AT SITE": 86,
+  "SWELLING AT SITE": 396,
+  HEADACHE: 921,
+  FATIGUE: 1251,
+  "MUSCLE PAIN": 742,
+  "JOINT PAIN": 618,
+  "NAUSEA OR VOMITING": 194,
+  CHILLS: 202,
+  FEVER: 10,
 };
 const MD_DOSE2_OLDER_RESULT = {
-  "PAIN AT SITE": "8",
-  "RED AT SITE": "1",
-  "SWELLING AT SITE": "1",
-  FATIGUE: "6",
-  HEADACHE: "5",
-  "MUSCLE PAIN": "5",
-  "JOINT PAIN": "4",
-  CHILLS: "3",
-  "NAUSEA OR VOMITING": "1",
-  FEVER: "1",
+  "PAIN AT SITE": 3070,
+  "RED AT SITE": 275,
+  "SWELLING AT SITE": 715,
+  FATIGUE: 2152,
+  HEADACHE: 1704,
+  "MUSCLE PAIN": 1739,
+  "JOINT PAIN": 1291,
+  CHILLS: 1141,
+  "NAUSEA OR VOMITING": 437,
+  FEVER: 370,
 };
 const JJ_YOUNGER_RESULT = {
-  "PAIN AT SITE": "6",
-  "RED AT SITE": "1",
-  "SWELLING AT SITE": "1",
-  HEADACHE: "4",
-  FATIGUE: "4",
-  "MUSCLE PAIN": "4",
-  "NEED PAIN MED": "3",
-  "NAUSEA OR VOMITING": "2",
-  FEVER: "1",
+  "PAIN AT SITE": 1193,
+  "RED AT SITE": 184,
+  "SWELLING AT SITE": 142,
+  HEADACHE: 905,
+  FATIGUE: 891,
+  "MUSCLE PAIN": 796,
+  "NEED PAIN MED": 538,
+  "NAUSEA OR VOMITING": 315,
+  FEVER: 261,
 };
 const JJ_OLDER_RESULT = {
-  "PAIN AT SITE": "3",
-  "RED AT SITE": "<1",
-  "SWELLING AT SITE": "<1",
-  HEADACHE: "3",
-  FATIGUE: "3",
-  "MUSCLE PAIN": "2",
-  "NAUSEA OR VOMITING": "1",
-  "NEED PAIN MED": "1",
-  FEVER: "<1",
+  "PAIN AT SITE": 439,
+  "RED AT SITE": 61,
+  "SWELLING AT SITE": 36,
+  HEADACHE: 401,
+  FATIGUE: 392,
+  "MUSCLE PAIN": 317,
+  "NAUSEA OR VOMITING": 162,
+  "NEED PAIN MED": 130,
+  FEVER: 41,
 };

 const VAX_COUNTS = {
@@ -203,17 +203,17 @@ const VAX_COUNTS = {
  },
  Moderna: {
    "Dose 1": {
-      "18 - 64": 1,
-      "65 & Older": 1,
+      "18 - 64": 11406,
+      "65 & Older": 3762,
    },
    "Dose 2": {
-      "18 - 64": 1,
-      "65 & Older": 1,
+      "18 - 64": 10985,
+      "65 & Older": 3692,
    },
  },
  "J&J Janssen": {
-    "18 - 59": 1,
-    "60 & Older": 1,
+    "18 - 59": 2036,
+    "60 & Older": 1320,
  },
 };

@@ -260,6 +260,12 @@ const ICONS = {
  "NAUSEA OR VOMITING": "🤮",
 };

+const DATA_CHOICES = {
+  VNM: "Vax&Me Only",
+  VNM_FDA: "Vax&Me + FDA",
+  FDA: "FDA Only",
+};
+
 class App extends React.Component {
  constructor(props) {
    super(props);
@@ -270,9 +276,10 @@ class App extends React.Component {
      gid: "",
      showInputPopup: false,
      answers: {},
-      fetchedResult : {},
+      fetchedResult: {},
      stats: {},
      loading: true,
+      dataSource: DATA_CHOICES.FDA,
    };
  }
  componentDidMount() {
@@ -321,7 +328,15 @@ class App extends React.Component {
              const { data } = v;
              if (!!data) {
                const { name, age, dose } = data;
-                this.setState({ name, age, dose, showInputPopup: true, fetchedResult: data, answers: data, loading: false });
+                this.setState({
+                  name,
+                  age,
+                  dose,
+                  showInputPopup: true,
+                  fetchedResult: data,
+                  answers: data,
+                  loading: false,
+                });
                const inputPopupSubmit = document.querySelector(
                  ".input-popup-submit"
                );
@@ -344,7 +359,7 @@ class App extends React.Component {
      this.setState({ loading: false });
    }

-    getStats().then(v => this.setState({ stats: v.data }));
+    getStats().then((v) => this.setState({ stats: v.data }));
  }
  shouldShowDoses = () => {
    const { name } = this.state;
@@ -449,7 +464,7 @@ class App extends React.Component {
    delete answers.name;
    delete answers.dose;
    delete answers.age;
-    if(!!dose) {
+    if (!!dose) {
      symptoms[VAX_DOSES.ONE] = {};
      symptoms[VAX_DOSES.TWO] = {};
      Object.keys(VAX_DOSES).forEach((dose) => {
@@ -477,7 +492,7 @@ class App extends React.Component {
    saveResult(submitAnswers)
      .then(() => {
        delete submitAnswers.gid;
-        this.setState({ fetchedResult : submitAnswers });
+        this.setState({ fetchedResult: submitAnswers });
        const inputPopupSubmit = document.querySelector(".input-popup-submit");
        if (inputPopupSubmit.classList.contains("errored")) {
          inputPopupSubmit.classList.remove("errored");
@@ -508,39 +523,51 @@ class App extends React.Component {
  getAnswerOptions = (answerDose) => {
    const { answers, dose } = this.state;
    const result = this.getResults();
-    return <div className="question-container" key={`answer-dose-${answerDose}`}>
-      {!!answerDose ? (
-        <h6 className="overline" data-font="sans">
-          {answerDose}
-        </h6>
-      ) : null}
-      <p className="question" data-font="sans-italic">
-        { ((dose === VAX_DOSES.ONE) && (answerDose === VAX_DOSES.TWO)) ? "(You can comeback later to tell us about Dose 2)":"(Select all side effects that you experienced)" }
-      </p>
-      <div className="answers-container">
-        {Object.keys(result).map((symptom) => (
-          <button
-            key={`ans-${answerDose}-${symptom}`}
-            data-font="sans-bold"
-            className={`answer${
-              !!answerDose
-                ? (answers[answerDose] && answers[answerDose][symptom])
+    return (
+      <div className="question-container" key={`answer-dose-${answerDose}`}>
+        {!!answerDose ? (
+          <h6 className="overline" data-font="sans">
+            {answerDose}
+          </h6>
+        ) : null}
+        <p className="question" data-font="sans-italic">
+          {dose === VAX_DOSES.ONE && answerDose === VAX_DOSES.TWO
+            ? "(You can comeback later to tell us about Dose 2)"
+            : "(Select all side effects that you experienced)"}
+        </p>
+        <div className="answers-container">
+          {Object.keys(result).map((symptom) => (
+            <button
+              key={`ans-${answerDose}-${symptom}`}
+              data-font="sans-bold"
+              className={`answer${
+                !!answerDose
+                  ? answers[answerDose] && answers[answerDose][symptom]
+                    ? " selected"
+                    : ""
+                  : answers[symptom]
                  ? " selected"
                  : ""
-                : answers[symptom]
-                ? " selected"
-                : ""
-            }`}
-            onClick={() => this.updateAnswers(symptom, answerDose)}
-          >
-            {symptom}
-          </button>
-        ))}
+              }`}
+              onClick={() => this.updateAnswers(symptom, answerDose)}
+            >
+              {symptom}
+            </button>
+          ))}
+        </div>
      </div>
-    </div>;
+    );
  };
  render() {
-    const { name, dose, age, showInputPopup, loading, fetchedResult } = this.state;
+    const {
+      name,
+      dose,
+      age,
+      showInputPopup,
+      loading,
+      fetchedResult,
+      dataSource,
+    } = this.state;
    let result = {};
    let resultAtSite = {};
    if (this.shouldShowResults()) {
@@ -663,20 +690,37 @@ class App extends React.Component {
          ) : null}

          {this.shouldShowResults() ? (
-            <div className="symptom-container subheader">
-              <h3 data-font="sans-bold">Here's what to expect.</h3>
-              <h6
-                id="share-result"
-                onClick={this.copyShareLink}
-                className="overline"
-                data-font="sans"
-                data-button
-              >
-                Share ↗
-              </h6>
-              <h6 className="overline" data-font="sans" data-button>
-                <a href="/vaxandme_chart.pdf">Download Chart ↗</a>
-              </h6>
+            <div className="result-header-contianer">
+              <div className="symptom-container subheader">
+                <h3 data-font="sans-bold">Here's what to expect.</h3>
+                <h6
+                  id="share-result"
+                  onClick={this.copyShareLink}
+                  className="overline"
+                  data-font="sans"
+                  data-button
+                >
+                  Share ↗
+                </h6>
+                <h6 className="overline" data-font="sans" data-button>
+                  <a href="/vaxandme_chart.pdf">Download Chart ↗</a>
+                </h6>
+              </div>
+              <div className="result-header-select">
+                <h6 className="overline" data-font="sans-italic">
+                  Use data from:
+                </h6>
+                <select
+                  onChange={(e) =>
+                    this.setState({ dataSource: e.target.value })
+                  }
+                  value={dataSource}
+                >
+                  {Object.keys(DATA_CHOICES).map((dataKey) => (
+                    <option key={dataKey}>{DATA_CHOICES[dataKey]}</option>
+                  ))}
+                </select>
+              </div>
            </div>
          ) : null}

@@ -684,7 +728,11 @@ class App extends React.Component {
            <div className="tip-container">
              <div className="tip-icon">&#9432;</div>
              <div className="tip">
-                <h6 style={{marginBottom: '1.2rem'}} className="overline" data-font="sans">
+                <h6
+                  style={{ marginBottom: "1.2rem" }}
+                  className="overline"
+                  data-font="sans"
+                >
                  NET EFFICACY
                </h6>
                <h6 className="overline" data-font="sans-italic">
@@ -698,8 +746,7 @@ class App extends React.Component {
                </h6>
              </div>
            </div>
-          ) : null
-          }
+          ) : null}

          {this.shouldShowResults() ? (
            <div className="symptom-container">
@@ -710,7 +757,12 @@ class App extends React.Component {
                    {symptom}
                  </p>
                  <p data-font="sans-bold" className="symptom-chance">
-                    {resultAtSite[symptom]}/10
+                    {Math.ceil(
+                      (!!dose
+                        ? resultAtSite[symptom] / VAX_COUNTS[name][dose][age]
+                        : resultAtSite[symptom] / VAX_COUNTS[name][age]) * 10
+                    )}
+                    /10
                  </p>
                </div>
              ))}
@@ -721,13 +773,17 @@ class App extends React.Component {
                    {symptom}
                  </p>
                  <p data-font="sans-bold" className="symptom-chance">
-                    {result[symptom]}/10
+                    {Math.ceil(
+                      (!!dose
+                        ? result[symptom] / VAX_COUNTS[name][dose][age]
+                        : result[symptom] / VAX_COUNTS[name][age]) * 10
+                    )}
+                    /10
                  </p>
                </div>
              ))}
            </div>
          ) : null}
-
        </main>
        {this.shouldShowResults() ? (
          <div className={`input-popup${showInputPopup ? " expanded" : ""}`}>