From e5d97d0def9c7e3cf04314102d3852d6a25d7fd5 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Thu, 26 Sep 2024 14:00:28 -0700
Subject: [PATCH 1/2] Add customize section to tutorial doc

---
 .../tutorials/{usrse/index.mdx => usrse.mdx}  | 74 ++++++++++++++++++-
 .../explore-data/_config/taskflow.config.ts   |  2 +-
 2 files changed, 74 insertions(+), 2 deletions(-)
 rename docs/docs/guides/tutorials/{usrse/index.mdx => usrse.mdx} (82%)

diff --git a/docs/docs/guides/tutorials/usrse/index.mdx b/docs/docs/guides/tutorials/usrse.mdx
similarity index 82%
rename from docs/docs/guides/tutorials/usrse/index.mdx
rename to docs/docs/guides/tutorials/usrse.mdx
index 09d4e5c3..dc33fb20 100644
--- a/docs/docs/guides/tutorials/usrse/index.mdx
+++ b/docs/docs/guides/tutorials/usrse.mdx
@@ -417,4 +417,76 @@ const HelloWorldPage: React.FC = () => {
 </Typography>
 ```
 
-## Customizing the Task Flow
\ No newline at end of file
+## 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/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts b/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts
index a3e89c20..b42ca89c 100644
--- 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.
        */

From 965c43820e2895ded6a9b0ebbe59e2b3f773017a Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Thu, 26 Sep 2024 14:02:55 -0700
Subject: [PATCH 2/2] Add tutorial doc to sidebar

---
 docs/sidebars.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/sidebars.ts b/docs/sidebars.ts
index b725a48c..db9cee59 100644
--- 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'
+                },
               ]
             },
           ],