Merge pull request #62 from microbiomedata/#48-tutorial-screen

#48 tutorial screen

package.json

@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",
+    "react-markdown": "^9.0.1",
     "react-minisearch": "^6.3.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4"

src/components/Tutorial/Tutorial.module.css

@@ -0,0 +1,12 @@
+.header {
+  padding: 10px 10px 10px 10px;
+}
+
+.header .title {
+  font-weight: bold;
+  color: var(--ion-color-primary);
+}
+
+.listItem {
+  color: var(--ion-color-primary);
+}

src/components/Tutorial/Tutorial.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  IonIcon,
+  IonContent,
+  IonAccordion,
+  IonAccordionGroup,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPopover,
+} from "@ionic/react";
+import { informationCircleOutline, checkmarkCircle } from "ionicons/icons";
+import { soilPackageTutorial } from "./md-in-js/soilPackageTutorial";
+import Markdown from "react-markdown";
+
+import styles from "./Tutorial.module.css";
+
+const Tutorial: React.FC = () => {
+  return (
+    <IonAccordionGroup>
+      <div className={styles.header}>
+        <span className={styles.title}>{soilPackageTutorial.header}</span>
+        <IonIcon
+          id="hover-trigger-soil"
+          icon={informationCircleOutline}
+          size="small"
+          color="primary"
+        ></IonIcon>
+        <IonPopover trigger="hover-trigger-soil" triggerAction="hover">
+          <IonContent class="ion-padding">
+            {soilPackageTutorial.info.split("\n").map(function (item, index) {
+              return (
+                <span key={index}>
+                  {item}
+                  <br />
+                </span>
+              );
+            })}
+          </IonContent>
+        </IonPopover>
+      </div>
+
+      {/* Render each section in its own accordion. */}
+      {soilPackageTutorial.sections.map((s) => (
+        <IonAccordion key={s.title}>
+          <IonItem slot={"header"}>
+            <IonLabel>{s.title}</IonLabel>
+          </IonItem>
+          <div className={"ion-padding"} slot={"content"}>
+            <Markdown
+              // Map Markdown elements to React elements.
+              components={{
+                ul: (props) => <IonList>{props!.children}</IonList>,
+                li: (props) => (
+                  <IonItem className={styles.listItem} lines={"none"}>
+                    <IonIcon
+                      size={"small"}
+                      slot={"start"}
+                      icon={checkmarkCircle}
+                      color={"primary"}
+                    />
+                    {props!.children as string}
+                  </IonItem>
+                ),
+              }}
+            >
+              {s.md}
+            </Markdown>
+          </div>
+        </IonAccordion>
+      ))}
+    </IonAccordionGroup>
+  );
+};
+
+export default Tutorial;

src/components/Tutorial/md-in-js/soilPackage-001.md.ts

@@ -0,0 +1,18 @@
+export const title = `What to consider bringing out to the field to collect sample metadata`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Way of measuring sampling depth e.g., ruler, measurement device
+- Sample storage method (e.g., preservative, cooler, freezer)
+- Way of labeling samples (e.g., labeled tubes, sharpies, barcodes); can also bring barcode reader to log sample numbers from barcodes in the app
+- Sample collection device (link the things from sample collection device field)
+- Thermometer, or way of measuring air temperature and sample temperature
+- Way of measuring elevation (e.g.,
+- Way of locating sampling point (latitude and longitude)
+- Slope aspect?
+- Way of collecting pH (e.g., pH strips)
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;

src/components/Tutorial/md-in-js/soilPackage-002.md.ts

@@ -0,0 +1,19 @@
+export const title = `Basic recommendations for fieldwork`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Bring sunscreen, hat, sunglasses, bug spray
+- Tell at least one person where you are going, when you are going, other information about your sampling trip
+- Know local animals and dangers they may pose
+- Check weather conditions and know risks for local weather events (e.g., flash floods)
+- Know risks for injuries in the sampling environment
+- Bring plenty of food and water
+- Bring communication device(s), know limitations of them (e.g., no cell phone service)
+- Proper shoes and clothes for the environment and weather
+- Always better to sample with a group or another individual, try to never go alone
+- Pack layers of clothing
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;

src/components/Tutorial/md-in-js/soilPackage-003.md.ts

@@ -0,0 +1,21 @@
+export const title = `All required fields of the NMDC soil metadata package relevant to the sample and the field collection`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Sample name
+- Broad-scale environmental context
+- Local environmental context
+- Environmental medium
+- Growth facility
+- Storage conditions
+- Collection date
+- Geographic location (country, and/or sea, region)
+- Geographic location (latitude and longitude)
+- Elevation, meters
+- Sample storage temperature
+- Depth, meters
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;

src/components/Tutorial/md-in-js/soilPackage-004.md.ts

@@ -0,0 +1,38 @@
+export const title = `All recommended fields of the NMDC soil metadata package relevant to the sample and the field collection`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Sample linkage
+- Ecosystem
+- Ecosystem category
+- Ecosystem type
+- Ecosystem subtype
+- Specific ecosystem
+- Composite design/sieving
+- Size-fraction lower threshold
+- Size-fraction upper threshold
+- Biotic regimen
+- Sample collection device
+- Air temperature regimen
+- Chemical administration
+- Climate environment
+- Gaseous environment
+- Humidity regimen
+- Light regimen
+- Watering regimen
+- pH
+- Collection time, GMT
+- Incubation collection date
+- Incubation collection time, GMT
+- Incubation start date
+- Incubation start time, GMT
+- Filter method
+- Experimental factor-other
+- Other treatments
+- Isotope exposure/addition
+- Microbial biomass carbon method
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;

src/components/Tutorial/md-in-js/soilPackage-005.md.ts

@@ -0,0 +1,64 @@
+export const title = `Other fields in the NMDC Submission Portal that may be relevant to the sample or to later processing steps`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Source material identifier
+- Slope aspect
+- History/agrochemical additions
+- Aluminum saturation/extreme unusual properties
+- Aluminum saturation method/extreme unusual properties
+- Mean annual precipitation
+- Mean annual temperature
+- History/crop rotation
+- Current land use
+- Current vegetation
+- Current vegetation method
+- Drainage classification
+- Experimental factor
+- History/extreme events
+- Soil taxonomic/FAO classification
+- History/fire
+- History/flooding
+- Heavy metals/extreme unusual properties
+- Heavy metals method/extreme unusual properties
+- Soil horizon method
+- Link to classification method
+- Link to climate information
+- Soil taxonomic/local classification
+- Miscellaneous parameter
+- Soil taxonomic/local classification method
+- Oxygenation status of sample
+- History/previous land use method
+- History/previous land use
+- Profile position
+- Average seasonal precipitation
+- Mean seasonal temperature 
+- Slope gradient
+- Soil horizon
+- Soil texture measurement
+- Soil texture method
+- Soil type
+- Soil type method
+- Temperature
+- History/tillage
+- Water content
+- Water content method
+- pH method
+- Microbial biomass
+- Microbial biomass method
+- Carbon/nitrogen ratio
+- Organic matter
+- Organic nitrogen
+- Total carbon
+- Total nitrogen content
+- Total nitrogen content method
+- Total organic carbon
+- Total organic carbon method
+- Total phosphorus
+- Phosphate
+- Salinity
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;

src/components/Tutorial/md-in-js/soilPackageTutorial.ts

@@ -0,0 +1,35 @@
+import * as s1 from "./soilPackage-001.md";
+import * as s2 from "./soilPackage-002.md";
+import * as s3 from "./soilPackage-003.md";
+import * as s4 from "./soilPackage-004.md";
+import * as s5 from "./soilPackage-005.md";
+
+type Section = {
+  title: string;
+  md: string; // Markdown content
+};
+
+// Put the sections into a specific order.
+const sections: Array<Section> = [
+  { title: s1.title, md: s1.markdownContent },
+  { title: s2.title, md: s2.markdownContent },
+  { title: s3.title, md: s3.markdownContent },
+  { title: s4.title, md: s4.markdownContent },
+  { title: s5.title, md: s5.markdownContent },
+];
+
+const header = "Soil Package";
+const info =
+  "Are you planning a trip to the field to collect soil samples and metadata? " +
+  "Below we have listed the NMDC soil package required metadata fields to ensure " +
+  "you pack the right tools and make required measurements in the field!\n\n" +
+  "Note: The NMDC metadata requirements also encompass fields required by NCBI and " +
+  "the Genomic Standards Consortium (GSC)";
+
+export const soilPackageTutorial = {
+  header: header,
+  info: info,
+  sections: sections,
+};
+
+export default soilPackageTutorial;

src/pages/TutorialPage/TutorialPage.tsx

@@ -1,14 +1,30 @@
 import React from "react";
-import { IonContent, IonPage, IonTitle } from "@ionic/react";
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import Tutorial from "../../components/Tutorial/Tutorial";
 
 import "./TutorialPage.css";
 
 const TutorialPage: React.FC = () => {
   return (
     <IonPage>
-      <IonContent fullscreen className={"ion-padding"}>
-        {/* TODO: Implement this page. */}
-        <IonTitle>TutorialPage</IonTitle>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/"></IonBackButton>
+          </IonButtons>
+          <IonTitle>Tutorial</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <Tutorial />
       </IonContent>
     </IonPage>
   );