diff --git a/src/Router.tsx b/src/Router.tsx
index 85f1df4..c271990 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -4,7 +4,6 @@ import { IonRouterOutlet } from "@ionic/react";
import { Redirect, Route } from "react-router-dom";
import TokenPage from "./pages/TokenPage/TokenPage";
import WelcomePage from "./pages/WelcomePage/WelcomePage";
-import ChecklistPage from "./pages/ChecklistPage/ChecklistPage";
import AuthRoute from "./components/AuthRoute/AuthRoute";
import HomePage from "./pages/HomePage/HomePage";
import StudyViewPage from "./pages/StudyViewPage/StudyViewPage";
@@ -34,9 +33,6 @@ const Router: React.FC = () => {
-
-
-
{/*
TAB ROUTES
diff --git a/src/components/Checklist/Checklist.module.css b/src/components/Checklist/Checklist.module.css
deleted file mode 100644
index b1f7403..0000000
--- a/src/components/Checklist/Checklist.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.info {
- padding: 0px 15px 0px 15px;
- font-size: var(--nmdc-font-size-sm);
- opacity: 0.6;
-}
-
-.listItem {
- a {
- text-decoration: none;
- }
-}
-
-.listIcon {
- position: absolute;
- top: 5px;
- left: 15px;
-}
-
-.listLabel {
- margin-left: 25px;
-}
diff --git a/src/components/Checklist/Checklist.tsx b/src/components/Checklist/Checklist.tsx
deleted file mode 100644
index 8068c7c..0000000
--- a/src/components/Checklist/Checklist.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from "react";
-import { IonIcon, IonItem, IonLabel, IonList } from "@ionic/react";
-import { checkmarkCircle, checkmarkCircleOutline } from "ionicons/icons";
-import Markdown from "react-markdown";
-import SectionHeader from "../SectionHeader/SectionHeader";
-import { fieldworkChecklist } from "./md-in-js/fieldworkChecklist";
-import styles from "./Checklist.module.css";
-
-const Checklist: React.FC = () => {
- return (
-
-
- {fieldworkChecklist.info}
-
- {/* Render each section. */}
- {fieldworkChecklist.sections.map((s) => (
-
-
{s.title}
-
- {s.info}
- {props!.children},
- li: (props) => {
- // use different icon for the nested list item
- const match = /^NESTEDLISTITEM/.exec(
- props!.children?.toString() || "",
- );
- return match ? (
-
-
-
- {props!.children
- ?.toString()
- .replace(/^NESTEDLISTITEM /, "")}
-
-
- ) : (
-
-
-
- {props!.children}
-
-
- );
- },
- }}
- >
- {s.md}
-
-
-
- ))}
-
- );
-};
-
-export default Checklist;
diff --git a/src/components/Checklist/md-in-js/fieldwork-001.md.ts b/src/components/Checklist/md-in-js/fieldwork-001.md.ts
deleted file mode 100644
index 29836b2..0000000
--- a/src/components/Checklist/md-in-js/fieldwork-001.md.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export const title = `Basic recommendations for fieldwork`;
-
-// language=Markdown
-export const info = ``;
-// Mark nested list item with 'NESTEDLISTITEM'
-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 (designate a rendezvous point or time)
-* Know local wildlife and the dangers they may pose, and consider bringing wildlife deterrents (e.g., bear spray)
-* Check weather conditions and know risks for local weather events (e.g., flash floods, lightning storms)
-* Know risks for injuries in the sampling environment
-* Bring plenty of food and water (always bring more than you need)
-* Bring communication device(s), know limitations of them (e.g., no cell phone service, finite battery life)
-* Bring a battery pack or energy bank if possible
-* Wear or pack proper shoes and clothes for the environment and weather
- * NESTEDLISTITEM Pack layers of clothing (e.g., windbreaker, rain jacket, shell pants)
-* It is always better to sample with a group or another individual, try to never go alone
-* Only sample where you have permission to, ensure you have all proper permits
-* Have a sampling plan and sample/data management plan written and reviewed prior to going out into the field
- * NESTEDLISTITEM Consider how you will label and store your samples and data (e.g., labeling, barcodes, storage temperatures)
- * NESTEDLISTITEM Ensure you have a plan for chain of custody and who will handle your samples and data
-`;
-
-export const markdownContent = rawMarkdownContent.trim();
-
-export default markdownContent;
diff --git a/src/components/Checklist/md-in-js/fieldwork-002.md.ts b/src/components/Checklist/md-in-js/fieldwork-002.md.ts
deleted file mode 100644
index e99cf37..0000000
--- a/src/components/Checklist/md-in-js/fieldwork-002.md.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const title = `What to consider reviewing prior to going into the field`;
-
-// language=Markdown
-export const info = ``;
-// Mark nested list item with 'NESTEDLISTITEM'
-const rawMarkdownContent = `
-* Review the NMDC metadata requirements for your sample type(s)
- * NESTEDLISTITEM Review standard descriptors/ontologies to ensure you obtain the most accurate observations
-* Obtain topographical and geographical information for your sampling sites if that data will not be measured or recorded while on site
-* Test and calibrate all tools prior to use in the field
- * NESTEDLISTITEM Know how to read measurements from each specific tool you plan to use (e.g., compass, pH testing strips, maps)
-* Consider setting up a study in the app prior to going out into the field
-* Consider entering a test sample into the app to get familiar with the process and information needed
-* Review the CARE principles for proper data sovereignty for indigenous land. This figure from the Geological Society of America describes other aspects of [Field Ethics](https://www.geosociety.org/GSA/Education_Careers/GSA/edu-career/fieldethics.aspx?hkey=de4690fb-49ef-460a-8e86-21797ea969d8)
-`;
-
-export const markdownContent = rawMarkdownContent.trim();
-
-export default markdownContent;
diff --git a/src/components/Checklist/md-in-js/fieldwork-003.md.ts b/src/components/Checklist/md-in-js/fieldwork-003.md.ts
deleted file mode 100644
index 663a04e..0000000
--- a/src/components/Checklist/md-in-js/fieldwork-003.md.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createSchemasMD } from "./util";
-
-export const title = `Review relevant NMDC environment schemas`;
-
-// language=Markdown
-export const info = `
-Schema for biosamples based on MIxS and other standards
-`;
-
-// Generate schemas Markdown from the TEMPLATES
-const rawMarkdownContent = createSchemasMD();
-
-export const markdownContent = rawMarkdownContent.trim();
-
-export default markdownContent;
diff --git a/src/components/Checklist/md-in-js/fieldworkChecklist.ts b/src/components/Checklist/md-in-js/fieldworkChecklist.ts
deleted file mode 100644
index 4000051..0000000
--- a/src/components/Checklist/md-in-js/fieldworkChecklist.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as s1 from "./fieldwork-001.md";
-import * as s2 from "./fieldwork-002.md";
-import * as s3 from "./fieldwork-003.md";
-
-type Section = {
- title: string;
- md: string; // Markdown content
- info: string;
-};
-
-// Put the sections into a specific order.
-const sections: Array = [
- { title: s1.title, md: s1.markdownContent, info: s1.info },
- { title: s2.title, md: s2.markdownContent, info: s2.info },
- { title: s3.title, md: s3.markdownContent, info: s3.info },
-];
-
-const header = "Fieldwork";
-
-// language=Markdown
-const info = `
-Are you planning a trip to the field to collect samples and metadata? Here is some general guidance for conducting fieldwork as well as links to more specific information depending on your environment/sample type(s).
-
-Note: This guidance is not meant to be exhaustive and there are other considerations for fieldwork. Please consult your institutional policies regarding safety and security in the field and review existing fieldwork guidance. Review the protocols and/or guides from other groups and/or publications if you wish to more directly compare samples or data.
-`;
-
-export const fieldworkChecklist = {
- header: header,
- info: info,
- sections: sections,
-};
-
-export default fieldworkChecklist;
diff --git a/src/components/Checklist/md-in-js/util.tsx b/src/components/Checklist/md-in-js/util.tsx
deleted file mode 100644
index b9365f4..0000000
--- a/src/components/Checklist/md-in-js/util.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import config from "../../../config";
-import { TemplateName, TEMPLATES } from "../../../api";
-
-// Generate schemas Markdown from the TEMPLATES
-export function createSchemasMD() {
- let schemasMD = "";
-
- Object.keys(TEMPLATES).forEach((schema) => {
- const template = TEMPLATES[schema as TemplateName];
- schemasMD += `* [${template.displayName}](${config.NMDC_SUBMISSION_SCHEMA_DOCS_BASE_URL}/${template.schemaClass}/)\n`;
- });
-
- return schemasMD;
-}
diff --git a/src/components/Markdown/Markdown.module.css b/src/components/Markdown/Markdown.module.css
new file mode 100644
index 0000000..8d13fcd
--- /dev/null
+++ b/src/components/Markdown/Markdown.module.css
@@ -0,0 +1,29 @@
+.markdown {
+ font-size: var(--nmdc-font-size-sm);
+ line-height: 1.5;
+
+ a {
+ text-decoration: none;
+ }
+
+ ul {
+ padding-inline-start: 1.25em;
+ }
+
+ li {
+ margin: 10px 0;
+ }
+
+ li::marker {
+ color: var(--ion-color-primary);
+ font-size: 1.25em;
+ line-height: 0;
+ }
+
+ blockquote {
+ margin: 0;
+ border-left: 4px solid var(--ion-color-primary);
+ padding-left: 1em;
+ opacity: 0.8;
+ }
+}
diff --git a/src/components/Markdown/Markdown.tsx b/src/components/Markdown/Markdown.tsx
new file mode 100644
index 0000000..a4ad5fb
--- /dev/null
+++ b/src/components/Markdown/Markdown.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import SectionHeader, { Variant } from "../SectionHeader/SectionHeader";
+import ReactMarkdown from "react-markdown";
+
+import styles from "./Markdown.module.css";
+
+interface MarkdownProps {
+ /** The markdown content to render. */
+ children: string;
+
+ /** A CSS class name to apply to the container element */
+ className?: string;
+}
+
+const Markdown: React.FC = ({ children, className }) => {
+ return (
+ (
+ {children}
+ ),
+ blockquote: ({ children }) => (
+ {children}
+ ),
+ }}
+ >
+ {children}
+
+ );
+};
+
+export default Markdown;
diff --git a/src/components/SectionHeader/SectionHeader.tsx b/src/components/SectionHeader/SectionHeader.tsx
index 986e0d6..1530313 100644
--- a/src/components/SectionHeader/SectionHeader.tsx
+++ b/src/components/SectionHeader/SectionHeader.tsx
@@ -4,6 +4,7 @@ import styles from "./SectionHeader.module.css";
export enum Variant {
Default, // receives default styling
WithinListHeader, // receives custom styling that compensates for `` styling
+ NoMargin, // receives no margin
}
interface Props extends HTMLAttributes {
@@ -17,12 +18,19 @@ const SectionHeader: React.FC = ({
variant = Variant.Default,
}) => {
// Customize the `className` value based upon the specified variant.
- let classNameVal = `${styles.header} ion-margin ${className}`;
- if (variant === Variant.WithinListHeader) {
- classNameVal = `${styles.header} ${styles.withinListHeader} ${className}`;
+ const classNameSet = new Set([styles.header]);
+ if (className) {
+ classNameSet.add(className);
+ }
+ if (variant === Variant.Default) {
+ classNameSet.add("ion-margin");
+ } else if (variant === Variant.WithinListHeader) {
+ classNameSet.add(styles.withinListHeader);
+ } else if (variant === Variant.NoMargin) {
+ classNameSet.add("ion-no-margin");
}
- return {children}
;
+ return {children}
;
};
export default SectionHeader;
diff --git a/src/pages/ChecklistPage/ChecklistPage.stories.tsx b/src/pages/ChecklistPage/ChecklistPage.stories.tsx
deleted file mode 100644
index caa09b6..0000000
--- a/src/pages/ChecklistPage/ChecklistPage.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import ChecklistPage from "./ChecklistPage";
-import ionicApp from "../../lib/stories/decorators/ionicApp";
-
-// Export the component metadata as the default export.
-export default {
- title: "Pages/ChecklistPage",
- component: ChecklistPage,
- decorators: [ionicApp],
-} as Meta;
-
-// Export each story.
-export const Default: StoryObj = {
- render: (props) => ,
-};
diff --git a/src/pages/ChecklistPage/ChecklistPage.tsx b/src/pages/ChecklistPage/ChecklistPage.tsx
deleted file mode 100644
index 923dba0..0000000
--- a/src/pages/ChecklistPage/ChecklistPage.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import {
- IonBackButton,
- IonButtons,
- IonContent,
- IonHeader,
- IonPage,
- IonTitle,
-} from "@ionic/react";
-import Checklist from "../../components/Checklist/Checklist";
-import ThemedToolbar from "../../components/ThemedToolbar/ThemedToolbar";
-import paths from "../../paths";
-
-const ChecklistPage: React.FC = () => {
- return (
-
-
-
-
-
-
- Checklist
-
-
-
-
-
-
- );
-};
-
-export default ChecklistPage;
diff --git a/src/pages/GuidePage/GuidePage.tsx b/src/pages/GuidePage/GuidePage.tsx
index b249127..4c3926f 100644
--- a/src/pages/GuidePage/GuidePage.tsx
+++ b/src/pages/GuidePage/GuidePage.tsx
@@ -1,7 +1,9 @@
import React from "react";
import { IonContent, IonHeader, IonPage, IonTitle } from "@ionic/react";
-import Checklist from "../../components/Checklist/Checklist";
import ThemedToolbar from "../../components/ThemedToolbar/ThemedToolbar";
+import Markdown from "../../components/Markdown/Markdown";
+
+import guidePageMd from "./md/guide-page.md?raw";
const GuidePage: React.FC = () => {
return (
@@ -12,7 +14,7 @@ const GuidePage: React.FC = () => {
-
+ {guidePageMd}
);
diff --git a/src/pages/GuidePage/md/guide-page.md b/src/pages/GuidePage/md/guide-page.md
new file mode 100644
index 0000000..c30e94d
--- /dev/null
+++ b/src/pages/GuidePage/md/guide-page.md
@@ -0,0 +1,43 @@
+Are you planning a trip to the field to collect samples? Here is some general guidance for conducting fieldwork with the NMDC Field Notes mobile app.
+
+> **Note**: This guidance is not meant to be exhaustive and there are other considerations for fieldwork. Please consult your institutional policies regarding safety and security in the field and review existing fieldwork guidance.
+
+# How NMDC Field Notes works with the NMDC Submission Portal
+
+The NMDC Field Notes mobile app synchronizes data with the NMDC Submission Portal and vice versa. This means that changes made in one place will be reflected in the other. However, there are a few important considerations to note:
+
+- **Multiple collaborators**. NMDC Field Notes mobile app does not currently allow adding multiple collaborators when creating a study. If multiple people need access to a shared study, create the study in the Submission Portal first with the necessary collaborators before going into the field.
+- **Simultaneous modifications**. Similar to the Submission Portal, NMDC Field Notes mobile app allows only one person to modify a given study at a time in order to prevent conflicting updates. Therefore, you will see a warning in the app if you try to edit a study (including adding, updating, and removing samples associated with the study) while it is being edited by another collaborator.
+- **Finalizing a study**. NMDC Field Notes mobile app is designed for streamlined sample metadata collection. Once your sample collection is complete, return to the Submission Portal to fill in the final details of your study and submit it to NMDC for review.
+
+# Important details about working without internet access
+
+The NMDC Field Notes mobile app is designed to work with or without internet access (i.e., without Wi-Fi or cellular service). However, there are a few important limitations to be aware of when using it without internet access:
+
+- **ORCID sign-in**. Most features of the app require signing in via ORCID in order to get your NMDC user profile and any existing studies associated with your account. That information will be stored for offline use, but the initial sign-in must be done while you have internet access.
+- **Creating and deleting studies cannot be done while offline**. However, studies can be updated (including adding, updating, and removing samples associated with a study) while offline. Please create your study or studies while you have internet access.
+- **Once you are back in an area with internet access**, open the Field Notes mobile app again to sync the changes you made while offline with the server.
+- **Updating shared studies while offline can lead to data loss**. When using the app without an internet connection, the app cannot know whether a shared study (including its samples) is being edited by another collaborator. The app will allow you to make edits, and it will sync those edits with the server the next time you use the app while online. However, this delayed sync may overwrite edits made by other collaborators while you were offline. If you plan to work in an area with limited or no internet access, consider having each person work on separate studies and manually merge the separate studies together via the Submission Portal at a later time.
+- **Backup plan**. Consider keeping a duplicate copy of your sample metadata on paper if possible.
+
+# What to consider reviewing prior to going into the field
+
+- Review the NMDC metadata requirements for your sample type(s) along with standard descriptors/ontologies to ensure you obtain the most accurate observations.
+- Obtain topographical and geographical information for your sampling sites if that data will not be measured or recorded while on site.
+- Test and calibrate all tools prior to use in the field to ensure proper measurements.
+- Review the CARE principles for proper data sovereignty for indigenous land. This figure from the Geological Society of America describes other aspects of [Field Ethics](https://www.geosociety.org/GSA/Education_Careers/GSA/edu-career/fieldethics.aspx?hkey=de4690fb-49ef-460a-8e86-21797ea969d8).
+
+# Basic recommendations for fieldwork
+
+- Bring a hat, sunglasses, sunscreen, and bug spray.
+- Tell at least one person where you are going, when you are going, other information about your sampling trip (designate a rendezvous point or time).
+- It is always better to sample with a group or another individual. Try to never go alone.
+- Know local wildlife and the dangers they may pose, and consider bringing wildlife deterrents (e.g., bear spray).
+- Check weather conditions and know risks for local weather events (e.g., flash floods, lightning storms, coast guard warnings).
+- Know risks for injuries in the sampling environment and be aware of the symptoms of common stress (e.g., heat exhaustion, frostbite, motion sickness) to mitigate injuries.
+- Bring plenty of food and water. Always bring more than you need.
+- Bring communication device(s) and know limitations of them (e.g., no cell phone service, finite battery life).
+- Bring a battery pack or energy bank if possible.
+- Wear or pack proper shoes and clothes for the environment and weather.
+- Only sample where you have permission to. Ensure you have all proper permits.
+- Have a sampling plan and data management plan written and reviewed prior to going out into the field. Consider how you will label and store your samples and data (e.g., labeling, barcodes, storage temperatures).
diff --git a/src/paths.ts b/src/paths.ts
index 709ac7e..efeae04 100644
--- a/src/paths.ts
+++ b/src/paths.ts
@@ -5,7 +5,6 @@ const SETTINGS = `/settings`;
const paths = {
root: "/",
home: `${IN}${STUDY}`,
- checklist: "/checklist",
welcome: "/welcome",
login: "/login",
token: "/token",