Merge pull request #123 from codytodonnell/feature/tutorial-doc

Update usrse tutorial doc
strudel-science · Sep 26, 2024 · d38ee77 · d38ee77
2 parents ee37797 + 965c438
commit d38ee77
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 3 deletions.
diff --git a/docs/docs/guides/tutorials/usrse/index.mdx → docs/docs/guides/tutorials/usrse.mdx b/docs/docs/guides/tutorials/usrse/index.mdx → docs/docs/guides/tutorials/usrse.mdx
@@ -417,4 +417,76 @@ const HelloWorldPage: React.FC = () => {
 </Typography>
 ```
 
-## Customizing the Task Flow
+## Customizing the Task Flow
+
+Now we will utilize the component we made in the preview panel and add some more custom data to the panel.
+
+For this exercise we will be working inside of `src/pages/explore-data/_components_/PreviewPanel.tsx`
+
+### 1. Import the `TagList` component to `PreviewPanel.tsx`
+
+```jsx title="src/pages/explore-data/_components/PreviewPanel.tsx"
+import { TagList } from '../../hello-world/_components/TagList';
+```
+
+### 2. Replace the row description with a `TagList`
+
+Replace:
+
+```jsx title="src/pages/explore-data/_components/PreviewPanel.tsx"
+<Typography variant="body2">Row description, subtitle, or helper text.</Typography>
+```
+
+With:
+```jsx title="src/pages/explore-data/_components/PreviewPanel.tsx"
+<TagList
+  tags={[
+    previewItem.kingdom,
+    previewItem.phylum,
+    previewItem.class,
+    previewItem.order,
+  ]}
+/>
+```
+
+### 3. Add another `TagList` directly after the first
+
+```jsx title="src/pages/explore-data/_components/PreviewPanel.tsx"
+<TagList
+  tags={[previewItem.family, previewItem.genus, previewItem.species]}
+/>
+```
+
+### 4. Replace Property Group 1 with Location data
+
+```jsx title="src/pages/explore-data/_components/PreviewPanel.tsx"
+<Box>
+  <Typography fontWeight="medium" mb={1}>
+    Location
+  </Typography>
+  <LabelValueTable
+    rows={[
+      { label: 'Continent', value: previewItem.continent },
+      { label: 'Country', value: previewItem.country },
+      { label: 'Municipality', value: previewItem.municipality },
+    ]}
+  />
+</Box>
+```
+
+### 4. Replace Property Group 2 with Record data
+
+```jsx title="src/pages/explore-data/_components/PreviewPanel.tsx"
+<Box>
+  <Typography fontWeight="medium" mb={1}>
+    Record
+  </Typography>
+  <LabelValueTable
+    rows={[
+      { label: 'Basis of Record', value: previewItem.basisOfRecord },
+      { label: 'Protocol', value: previewItem.protocol },
+      { label: 'Status', value: previewItem.occurrenceStatus },
+    ]}
+  />
+</Box>
+```
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
@@ -65,7 +65,12 @@ const sidebars: SidebarsConfig = {
                     'guides/tutorials/basic-app-with-strudel/customize-home-page',
                     'guides/tutorials/basic-app-with-strudel/continue-learning'
                   ]
-                }
+                },
+                {
+                  type: 'doc',
+                  label: 'US-RSE Follow Along',
+                  id: 'guides/tutorials/usrse'
+                },
               ]
             },
           ],

diff --git a/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts b/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts
@@ -44,7 +44,7 @@ export const taskflow: ExploreDataConfig = {
       /**
        * Title to appear at the top of the main page.
        */
-      title: "Explore Data App Test",
+      title: "Explore Data App",
       /**
        * Text to appear underneath the title at the top of the main page.
        */