update guideline text function, styling fix (#53)

Co-authored-by: Amy Chen <[email protected]>

Author: achen2401

src/components/Landing.js

@@ -39,7 +39,7 @@ export default class Landing extends Component {
     /*
      * passed down via fhir.js
      */
-    let patientBundle = (this.state.collector).filter(item => item.data && item.data.resourceType.toLowerCase() === "patient");
+    let patientBundle = (this.state.collector).filter(item => item.data && item.data.resourceType && item.data.resourceType.toLowerCase() === "patient");
     if (patientBundle.length) {
       this.setState({
         patientId: patientBundle[0].data.id
@@ -61,7 +61,7 @@ export default class Landing extends Component {
       response => {
         //set result from data from EPIC
         let EPICData = response[0];
-        result['Summary'] = {...EPICData['Summary']};
+        result['Summary'] = EPICData ? {...EPICData['Summary']} : {};
         const { sectionFlags, flaggedCount } = this.processSummary(result.Summary);
         this.setState({ result, sectionFlags, flaggedCount });
         this.setPatientId();

src/components/Summary.js

@@ -143,25 +143,34 @@ export default class Summary extends Component {
     return flagged;
   }
 
-  renderNoEntries(section, subSection) {
+  renderGuideLine(subSection) {
+    if (!subSection) return "";
     let guidelineElement = subSection["guideline"] ? subSection["guideline"]: null;
+    if (!guidelineElement) return "";
     let guidelineContent = "";
-    if (guidelineElement) {
-      guidelineContent = guidelineElement.map( (item, index) => {
-        return <div key={`guideline_${index}`} className={`flag-no-entry ${item.type}`}>
-          {/* <FontAwesomeIcon
-              className="flag"
-              icon="exclamation-circle"
-              tabIndex={0}
-          /> <span className="text">{item.text}</span> */}
-          <span className="text"><b className="title">{item.title}</b>: {item.text}</span>
-        </div>
-      });
-    }
+    guidelineContent = (<div className="guideline-wrapper">
+        {
+          guidelineElement.map( (item, index) => {
+          return <div key={`guideline_${index}`} className={`${item.type}`}>
+            {/* <FontAwesomeIcon
+                className="flag"
+                icon="exclamation-circle"
+                tabIndex={0}
+            /> <span className="text">{item.text}</span> */}
+            <span className="text"><b className="title">{item.title}</b>: {item.text}</span>
+          </div>
+          })
+        }
+      </div>);
+    return guidelineContent;
+  }
+
+  renderNoEntries(section, subSection) {
     const { sectionFlags } = this.props;
     let subSectionFlags = sectionFlags[section]? sectionFlags[section][subSection.dataKey] : null;
     let flagEntries = [];
     let flagContent = "";
+    let guidelineContent = this.renderGuideLine(subSection);
     if (subSectionFlags) {
       flagEntries = subSectionFlags.map((flag) => {
         return flag.flagText;
@@ -421,7 +430,6 @@ export default class Summary extends Component {
                     >more info</span>
                   </div>
               }</span>
-
           </h3>
 
           {panels && this.renderPanel(section, panels)}
@@ -430,6 +438,7 @@ export default class Summary extends Component {
           {hasEntries && subSection.tables.map((table, index) =>
             this.renderTable(table, entries, section, subSection, index))
           }
+          {hasEntries && this.isSubsectionFlagged(section, subSection.dataKey) && this.renderGuideLine(subSection)}
          </div>
       );
     });

src/styles/components/_Summary.scss

@@ -461,17 +461,18 @@
             color: $color-gold;
             font-size: 0.95em;
           }
+          .guideline-wrapper {
+            margin-left: 0;
+            padding-bottom: 0;
+          }
           .flag-guideline-content {
             .flag {
               color: $color-red;
             }
             margin-top: 12px;
             .guideline-content {
-              margin-top: 16px;
+              margin-top: 12px;
               font-style: normal;
-              .title {
-                font-weight: 600;
-              }
               // .CDC .text {
               //   color: $color-orange;
               // }
@@ -480,20 +481,6 @@
               // }
             }
           }
-          .flag-no-entry {
-            margin-right: 12px;
-            font-size: 1em;
-            &.CDC {
-              .flag {
-                color: $color-orange-light;
-              }
-            }
-            &.WA {
-              .flag {
-                color: $color-red-darker;
-              }
-            }
-          }
         }
 
         &.sub-section-notitle {
@@ -579,6 +566,32 @@
       }
     }
 
+    .flag-no-entry {
+      margin-right: 12px;
+      font-size: 1em;
+      // &.CDC {
+      //   .flag {
+      //     color: $color-orange-light;
+      //   }
+      // }
+      // &.WA {
+      //   .flag {
+      //     color: $color-red-darker;
+      //   }
+      // }
+    }
+    .sub-section {
+      .guideline-wrapper {
+        margin-left: 40px;
+        padding-bottom: 20px;
+        font-size: 0.95em;
+        line-height: 1.5;
+        .title {
+          font-weight: 600;
+        }
+      }
+    }
+
     .cdc-disclaimer {
       margin: 10px 40px 0 40px;
       &.data-source {