From 2a6764baa7c84cee8d6c801553241fdf46725e88 Mon Sep 17 00:00:00 2001
From: Rajshree Deshmukh <rajshreed@lbl.gov>
Date: Thu, 11 Jan 2024 13:28:10 -0800
Subject: [PATCH 1/4] Adding Intent-details

---
 .../design-system/task-flows/compare-data.mdx | 35 ++++++++++++++++---
 .../task-flows/contribute-data.mdx            |  1 +
 .../design-system/task-flows/explore-data.mdx |  1 +
 .../task-flows/manage-account.mdx             |  1 +
 .../task-flows/monitor-activities.mdx         |  1 +
 .../task-flows/run-computation.mdx            |  1 +
 .../run-interactive-computation.mdx           |  1 +
 .../task-flows/search-data-repositories.mdx   |  1 +
 .../design-system/task-flows/track-state.mdx  |  1 +
 src/components/layouts/TaskFlowLayout.tsx     |  1 +
 src/hooks/useTaskFlow.tsx                     |  1 +
 src/types/strudel-config.d.ts                 |  1 +
 12 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/content/design-system/task-flows/compare-data.mdx b/content/design-system/task-flows/compare-data.mdx
index faa03f0..14aa5ba 100644
--- a/content/design-system/task-flows/compare-data.mdx
+++ b/content/design-system/task-flows/compare-data.mdx
@@ -3,7 +3,8 @@ id: 'task-flows-compare-data'
 title: 'Compare Data'
 tagline: 'Comparing Scenarios/ Analyses / Simulations'
 tags: ['comparison', 'differences', 'analysis']
-intent: 'It enables users to scan and compare multiple complex entities with similar information categories and helps them make decisions based on the differences.'
+intent: 'Enables users to scan and compare multiple complex entities with similar information categories to support decision making based on the differences.'
+intentDetails:'something'
 exampleUrl: 'https://strudel.science/strudel-kit/#/compare-scenarios'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/compare-scenarios'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A65420&mode=design&t=w7GGrEXSOV1T8UCr-1'
@@ -27,11 +28,35 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    Consider whether the users would want to compare 2 sets of attributes or more than 2 sets. 
+    <ul>
+      <li>
+        When comparing 2 sets of attributes, you can represent the differences between the sets as a subtraction between values or showing side by side values. These deltas can also be represented as a plot. 
+      </li>
+      <li>
+        When comparing more than 2 sets of attributes, you can consider displaying values of each set as columns in a table. Also consider visualizations to aid in comparison.
+      </li>
+    </ul>
+  </li>
+  <li>
+    Data visualizations like graphs and charts can help to highlight the differences and similarities between  sets being compared.
+  </li>
+  <li>
+    Prioritize the attributes which are critical for comparison instead of exposing all of the attributes in a single view.
+  </li>
+  <li>
+    If there are too many attributes to compare, allow users to prioritize comparisons by providing ways to search & filter the attributes. This makes it easier for them to focus on their interests instead of getting overwhelmed by a large comparison matrix.
+  </li>
+  <li>
+   Consider offering an expanded view of a selected set or attribute to view additional related details, data tables, or diagrams. The expanded view could be displayed in a pop-up or a vertical or horizontal slide out panel.
+  </li>
+  <li>
+   Consider providing the ability to save or export comparison results.
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/contribute-data.mdx b/content/design-system/task-flows/contribute-data.mdx
index 1a1c890..ef5e4a5 100644
--- a/content/design-system/task-flows/contribute-data.mdx
+++ b/content/design-system/task-flows/contribute-data.mdx
@@ -4,6 +4,7 @@ title: 'Contribute Data'
 tagline: 'Consectetur magna ad non enim mollit ea Lorem ullamco.'
 tags: ['upload', 'dataset', 'register', 'repository']
 intent: 'Enables users to upload their work and data to a community managed repository.'
+intentDetails:''
 exampleUrl: 'https://strudel.science/strudel-kit/#/contributing-data'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/contributing-data'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/explore-data.mdx b/content/design-system/task-flows/explore-data.mdx
index 06e9589..26c9eb8 100644
--- a/content/design-system/task-flows/explore-data.mdx
+++ b/content/design-system/task-flows/explore-data.mdx
@@ -4,6 +4,7 @@ title: 'Explore Data'
 tagline: 'Esse exercitation cupidatat commodo eiusmod aliquip id ad.'
 tags: ['data table', 'data grid', 'summary', 'filter', 'facets', 'search']
 intent: 'Lorem fugiat culpa labore proident incididunt. Aliqua velit officia consectetur reprehenderit dolore dolore dolor labore laborum velit duis ullamco exercitation non.'
+intentDetails:''
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-entities'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-entities'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/manage-account.mdx b/content/design-system/task-flows/manage-account.mdx
index 2e6b361..85105f9 100644
--- a/content/design-system/task-flows/manage-account.mdx
+++ b/content/design-system/task-flows/manage-account.mdx
@@ -4,6 +4,7 @@ title: 'Manage Account'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['profile', 'settings']
 intent: 'Enables users to manage their individual or team account information and settings.'
+intentDetails:''
 exampleUrl: ''
 codeUrl: ''
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73769&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/monitor-activities.mdx b/content/design-system/task-flows/monitor-activities.mdx
index 433f817..1db2e84 100644
--- a/content/design-system/task-flows/monitor-activities.mdx
+++ b/content/design-system/task-flows/monitor-activities.mdx
@@ -4,6 +4,7 @@ title: 'Monitor Activities'
 tagline: 'Ullamco et dolor enim mollit aliqua.'
 tags: ['jobs', 'experiments', 'observations']
 intent: 'Minim tempor velit exercitation pariatur duis labore qui. Occaecat reprehenderit commodo eu non eu. Est mollit adipisicing exercitation non fugiat labore sint ex nisi in non dolore in.'
+intentDetails:''
 exampleUrl: 'https://strudel.science/strudel-kit/#/monitor-tasks'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/monitor-tasks'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/run-computation.mdx b/content/design-system/task-flows/run-computation.mdx
index 23665a7..7fea535 100644
--- a/content/design-system/task-flows/run-computation.mdx
+++ b/content/design-system/task-flows/run-computation.mdx
@@ -4,6 +4,7 @@ title: 'Run Computation'
 tagline: 'Running optimizations, simulations, analyses'
 tags: ['execution', 'scenario', 'job', 'simulation', 'optimization', 'stepper', 'wizard']
 intent: 'Enables users to run computation(s) through a multi-step flow to generate results.'
+intentDetails:''
 exampleUrl: 'https://strudel.science/strudel-kit/#/optimization'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/optimization'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/run-interactive-computation.mdx b/content/design-system/task-flows/run-interactive-computation.mdx
index f251d8a..77cb68d 100644
--- a/content/design-system/task-flows/run-interactive-computation.mdx
+++ b/content/design-system/task-flows/run-interactive-computation.mdx
@@ -4,6 +4,7 @@ title: 'Run Interactive Computation'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['execution', 'scenario','data analysis']
 intent: 'Enables querying, computation, and visual analysis of single or combined data entities to instantly derive insights, and create reports or dashboards.'
+intentDetails:''
 exampleUrl: ''
 codeUrl: ''
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73770&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/search-data-repositories.mdx b/content/design-system/task-flows/search-data-repositories.mdx
index 921f2a9..64910f7 100644
--- a/content/design-system/task-flows/search-data-repositories.mdx
+++ b/content/design-system/task-flows/search-data-repositories.mdx
@@ -4,6 +4,7 @@ title: 'Search Data Repositories'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['dataset', 'repository']
 intent: 'Enables exploration and evaluation of datasets from a repository, which users can download or export.'
+intentDetails:''
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-datasets'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-datasets'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A45832&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/track-state.mdx b/content/design-system/task-flows/track-state.mdx
index d0a46ed..7fd6dd2 100644
--- a/content/design-system/task-flows/track-state.mdx
+++ b/content/design-system/task-flows/track-state.mdx
@@ -4,6 +4,7 @@ title: 'Track State'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['account history', 'system status']
 intent: 'Enables users to look at historical status of an activity or document which can aid issue debugging or retrieval of old data.'
+intentDetails:''
 exampleUrl: ''
 codeUrl: ''
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=16%3A69738&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/src/components/layouts/TaskFlowLayout.tsx b/src/components/layouts/TaskFlowLayout.tsx
index a7ef5e1..204f059 100644
--- a/src/components/layouts/TaskFlowLayout.tsx
+++ b/src/components/layouts/TaskFlowLayout.tsx
@@ -46,6 +46,7 @@ const TaskFlowLayout: React.FC<PageProps<any, TaskFlowPageContext>> = ({ pageCon
                   key={`${tag}-${i}`}
                   label={tag}
                   variant="outlined"
+                  color="info"
                 />
               ))}
             </Stack>
diff --git a/src/hooks/useTaskFlow.tsx b/src/hooks/useTaskFlow.tsx
index 52c1c54..f3ff0ef 100644
--- a/src/hooks/useTaskFlow.tsx
+++ b/src/hooks/useTaskFlow.tsx
@@ -46,6 +46,7 @@ export const useTaskFlow = (name: string) => {
               tagline
               tags
               intent
+              intentDetails
               iconImage {
                 childImageSharp {
                   gatsbyImageData(width: 800)
diff --git a/src/types/strudel-config.d.ts b/src/types/strudel-config.d.ts
index 8648d4e..3c63194 100644
--- a/src/types/strudel-config.d.ts
+++ b/src/types/strudel-config.d.ts
@@ -27,6 +27,7 @@ export interface TaskFlowFrontmatter {
   tagline?: string;
   tags?: string[];
   intent?: string;
+  intentDetails?: string;
   exampleUrl?: string;
   codeUrl?: string;
   figmaUrl?: string;

From 14ff163cba701bcf0f69c01319c11bbd1562b1f3 Mon Sep 17 00:00:00 2001
From: Rajshree Deshmukh <rajshreed@lbl.gov>
Date: Thu, 11 Jan 2024 13:48:16 -0800
Subject: [PATCH 2/4] Adding  intentDetails to gatsby-node file + spaces in mdx

---
 content/design-system/task-flows/compare-data.mdx              | 3 ++-
 content/design-system/task-flows/contribute-data.mdx           | 2 +-
 content/design-system/task-flows/explore-data.mdx              | 2 +-
 content/design-system/task-flows/manage-account.mdx            | 2 +-
 content/design-system/task-flows/monitor-activities.mdx        | 2 +-
 content/design-system/task-flows/run-computation.mdx           | 2 +-
 .../design-system/task-flows/run-interactive-computation.mdx   | 2 +-
 content/design-system/task-flows/search-data-repositories.mdx  | 2 +-
 content/design-system/task-flows/track-state.mdx               | 2 +-
 gatsby-node.ts                                                 | 1 +
 10 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/content/design-system/task-flows/compare-data.mdx b/content/design-system/task-flows/compare-data.mdx
index 14aa5ba..153f447 100644
--- a/content/design-system/task-flows/compare-data.mdx
+++ b/content/design-system/task-flows/compare-data.mdx
@@ -4,7 +4,7 @@ title: 'Compare Data'
 tagline: 'Comparing Scenarios/ Analyses / Simulations'
 tags: ['comparison', 'differences', 'analysis']
 intent: 'Enables users to scan and compare multiple complex entities with similar information categories to support decision making based on the differences.'
-intentDetails:'something'
+intentDetails: 'something'
 exampleUrl: 'https://strudel.science/strudel-kit/#/compare-scenarios'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/compare-scenarios'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A65420&mode=design&t=w7GGrEXSOV1T8UCr-1'
@@ -28,6 +28,7 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
+### Guidelines
 
 <ul>
   <li>
diff --git a/content/design-system/task-flows/contribute-data.mdx b/content/design-system/task-flows/contribute-data.mdx
index ef5e4a5..b2f5d13 100644
--- a/content/design-system/task-flows/contribute-data.mdx
+++ b/content/design-system/task-flows/contribute-data.mdx
@@ -4,7 +4,7 @@ title: 'Contribute Data'
 tagline: 'Consectetur magna ad non enim mollit ea Lorem ullamco.'
 tags: ['upload', 'dataset', 'register', 'repository']
 intent: 'Enables users to upload their work and data to a community managed repository.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: 'https://strudel.science/strudel-kit/#/contributing-data'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/contributing-data'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/explore-data.mdx b/content/design-system/task-flows/explore-data.mdx
index 26c9eb8..a438c1f 100644
--- a/content/design-system/task-flows/explore-data.mdx
+++ b/content/design-system/task-flows/explore-data.mdx
@@ -4,7 +4,7 @@ title: 'Explore Data'
 tagline: 'Esse exercitation cupidatat commodo eiusmod aliquip id ad.'
 tags: ['data table', 'data grid', 'summary', 'filter', 'facets', 'search']
 intent: 'Lorem fugiat culpa labore proident incididunt. Aliqua velit officia consectetur reprehenderit dolore dolore dolor labore laborum velit duis ullamco exercitation non.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-entities'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-entities'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/manage-account.mdx b/content/design-system/task-flows/manage-account.mdx
index 85105f9..be16822 100644
--- a/content/design-system/task-flows/manage-account.mdx
+++ b/content/design-system/task-flows/manage-account.mdx
@@ -4,7 +4,7 @@ title: 'Manage Account'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['profile', 'settings']
 intent: 'Enables users to manage their individual or team account information and settings.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: ''
 codeUrl: ''
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73769&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/monitor-activities.mdx b/content/design-system/task-flows/monitor-activities.mdx
index 1db2e84..493e693 100644
--- a/content/design-system/task-flows/monitor-activities.mdx
+++ b/content/design-system/task-flows/monitor-activities.mdx
@@ -4,7 +4,7 @@ title: 'Monitor Activities'
 tagline: 'Ullamco et dolor enim mollit aliqua.'
 tags: ['jobs', 'experiments', 'observations']
 intent: 'Minim tempor velit exercitation pariatur duis labore qui. Occaecat reprehenderit commodo eu non eu. Est mollit adipisicing exercitation non fugiat labore sint ex nisi in non dolore in.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: 'https://strudel.science/strudel-kit/#/monitor-tasks'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/monitor-tasks'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/run-computation.mdx b/content/design-system/task-flows/run-computation.mdx
index 7fea535..2123e28 100644
--- a/content/design-system/task-flows/run-computation.mdx
+++ b/content/design-system/task-flows/run-computation.mdx
@@ -4,7 +4,7 @@ title: 'Run Computation'
 tagline: 'Running optimizations, simulations, analyses'
 tags: ['execution', 'scenario', 'job', 'simulation', 'optimization', 'stepper', 'wizard']
 intent: 'Enables users to run computation(s) through a multi-step flow to generate results.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: 'https://strudel.science/strudel-kit/#/optimization'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/optimization'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/run-interactive-computation.mdx b/content/design-system/task-flows/run-interactive-computation.mdx
index 77cb68d..50e59e3 100644
--- a/content/design-system/task-flows/run-interactive-computation.mdx
+++ b/content/design-system/task-flows/run-interactive-computation.mdx
@@ -4,7 +4,7 @@ title: 'Run Interactive Computation'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['execution', 'scenario','data analysis']
 intent: 'Enables querying, computation, and visual analysis of single or combined data entities to instantly derive insights, and create reports or dashboards.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: ''
 codeUrl: ''
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73770&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/search-data-repositories.mdx b/content/design-system/task-flows/search-data-repositories.mdx
index 64910f7..ae62bf4 100644
--- a/content/design-system/task-flows/search-data-repositories.mdx
+++ b/content/design-system/task-flows/search-data-repositories.mdx
@@ -4,7 +4,7 @@ title: 'Search Data Repositories'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['dataset', 'repository']
 intent: 'Enables exploration and evaluation of datasets from a repository, which users can download or export.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-datasets'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-datasets'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A45832&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/content/design-system/task-flows/track-state.mdx b/content/design-system/task-flows/track-state.mdx
index 7fd6dd2..73be65e 100644
--- a/content/design-system/task-flows/track-state.mdx
+++ b/content/design-system/task-flows/track-state.mdx
@@ -4,7 +4,7 @@ title: 'Track State'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['account history', 'system status']
 intent: 'Enables users to look at historical status of an activity or document which can aid issue debugging or retrieval of old data.'
-intentDetails:''
+intentDetails: ''
 exampleUrl: ''
 codeUrl: ''
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=16%3A69738&mode=design&t=YPdwq8c0BdXx5Um8-1'
diff --git a/gatsby-node.ts b/gatsby-node.ts
index 4a34c09..dc276a3 100644
--- a/gatsby-node.ts
+++ b/gatsby-node.ts
@@ -70,6 +70,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
               tagline
               tags
               intent
+              intentDetails
               exampleUrl
               codeUrl
               figmaUrl

From 99295ff633d02dcdd3fcdc73b430dc768e52629c Mon Sep 17 00:00:00 2001
From: Rajshree Deshmukh <rajshreed@lbl.gov>
Date: Thu, 11 Jan 2024 15:11:17 -0800
Subject: [PATCH 3/4] Adding content

---
 .../design-system/task-flows/compare-data.mdx |  2 +-
 .../task-flows/contribute-data.mdx            | 39 ++++++++++++--
 .../design-system/task-flows/explore-data.mdx | 54 ++++++++++++++++---
 .../task-flows/manage-account.mdx             | 31 +++++++++--
 .../task-flows/monitor-activities.mdx         | 42 ++++++++++++---
 .../task-flows/run-computation.mdx            | 39 ++++++++++++--
 .../run-interactive-computation.mdx           | 25 +++++++--
 .../task-flows/search-data-repositories.mdx   | 37 ++++++++++---
 .../design-system/task-flows/track-state.mdx  | 21 ++++++--
 src/components/layouts/TaskFlowLayout.tsx     |  2 +
 10 files changed, 252 insertions(+), 40 deletions(-)

diff --git a/content/design-system/task-flows/compare-data.mdx b/content/design-system/task-flows/compare-data.mdx
index 153f447..176b4b5 100644
--- a/content/design-system/task-flows/compare-data.mdx
+++ b/content/design-system/task-flows/compare-data.mdx
@@ -4,7 +4,7 @@ title: 'Compare Data'
 tagline: 'Comparing Scenarios/ Analyses / Simulations'
 tags: ['comparison', 'differences', 'analysis']
 intent: 'Enables users to scan and compare multiple complex entities with similar information categories to support decision making based on the differences.'
-intentDetails: 'something'
+intentDetails: 'Comparison may be between just two entities requiring a dedicated focus on differences in values, shown visually or numerically. Comparison may also be between multiple attributes — requiring a soft highlight on all differences and other visual representations.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/compare-scenarios'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/compare-scenarios'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A65420&mode=design&t=w7GGrEXSOV1T8UCr-1'
diff --git a/content/design-system/task-flows/contribute-data.mdx b/content/design-system/task-flows/contribute-data.mdx
index b2f5d13..fbe64eb 100644
--- a/content/design-system/task-flows/contribute-data.mdx
+++ b/content/design-system/task-flows/contribute-data.mdx
@@ -4,7 +4,7 @@ title: 'Contribute Data'
 tagline: 'Consectetur magna ad non enim mollit ea Lorem ullamco.'
 tags: ['upload', 'dataset', 'register', 'repository']
 intent: 'Enables users to upload their work and data to a community managed repository.'
-intentDetails: ''
+intentDetails: 'This type of Task Flow promotes community sharing of research data / knowledge and is essential for growth & promotion of open science.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/contributing-data'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/contributing-data'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1'
@@ -31,11 +31,40 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    Determine the primary information required to identify a contributed dataset, and use this to display the contribution table to the user
+  </li>
+  <li>
+    Define the process of data contribution and the stages involved in the verification and acceptance of submitted data. 
+  </li>
+  <li>
+    Group the data required from users into relevant categories and split the process into a small number of steps to keep the flow simple.
+  </li>
+  <li>
+    Give a progress indicator showing users where they are at in the overall flow.
+  </li>
+  <li>
+    The first step of collecting meta data and uploading files could get complex.  Users may need to work on the this step over multiple sessions and would need a ‘Save as draft’ option.
+  </li>
+  <li>
+    Uploading files could take long time and running in the background should be supported.
+  </li>
+  <li>
+    Provide a review step to confirm user submission details.
+  </li>
+  <li>
+    Provide a status indicator to show users where they are in the contribution lifecycle (i.e. draft, in review, etc) and whether their dataset is currently public or private.
+  </li>
+  <li>
+    A dataset submitted to a community repository will need to be verified for quality control and it will likely take some time before it is published. Associate statuses with every submission to show users what stage the submitted dataset is at in the process.
+  </li>
+  <li>
+    Consider offering an automated validation step to check file formats, sizes, and any other basic data checks which can save time during further manual verification work.
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/explore-data.mdx b/content/design-system/task-flows/explore-data.mdx
index a438c1f..a85bac1 100644
--- a/content/design-system/task-flows/explore-data.mdx
+++ b/content/design-system/task-flows/explore-data.mdx
@@ -3,8 +3,8 @@ id: 'task-flows-explore-data'
 title: 'Explore Data'
 tagline: 'Esse exercitation cupidatat commodo eiusmod aliquip id ad.'
 tags: ['data table', 'data grid', 'summary', 'filter', 'facets', 'search']
-intent: 'Lorem fugiat culpa labore proident incididunt. Aliqua velit officia consectetur reprehenderit dolore dolore dolor labore laborum velit duis ullamco exercitation non.'
-intentDetails: ''
+intent: 'Enables users to view and work with data in a tabular layout with search, sort, filter, and summary view interactions.'
+intentDetails: 'It is the most commonly used task flow to showcase any entity and make it easily consumable and accessible.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-entities'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-entities'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1'
@@ -31,11 +31,53 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+ <li>
+  <b>Data table:</b>
+    <ul>
+    <li>
+      Search and filter capabilities are very important to make information findable and accessible.
+    </li>
+    <li>
+      Data tables can have pagination or lazy load with scrolling option. Pagination is usually better interaction for data as users can refer to the page numbers to jump further to find a particular piece of information if they don’t want to use search and filter options. 
+    </li>
+    <li>
+      Consider giving options for number of rows that can be viewed in single page.
+    </li>
+    <li>
+      Clicking on row can trigger opening summary view in side panel for the selected entity.
+    </li>
+    <li>
+      Consider not displaying all data values in the data table to optimize signal to noise. Focus on showing only important fields, with ancillary fields as optional hidden fields or available through detail views. 
+    </li>
+    <li>
+      Pay attention to the principles of recognition over recall. Display as many fields in the data table as are necessary to accomplish a task or goal without needing further reference.
+    </li>
+    <li>
+      For a more detailed view, link the entity name or identifier to navigate to the detailed view page. It may also be triggered via a primary button on a summary view panel.
+    </li>
+    <li>
+      Data table can be accompanied with a graph or summary statistics to give overview about important data points. Consider brushing and linking between the graphs / plots and the data table. 
+    </li>
+    <li>
+      Individual rows may require actions. A single button may be displayed as a column at the end of the row. If there are multiple actions available, consider icons or a dropdown actions menu on each row. 
+    </li>
+    </ul>
+  </li>
+  <li>
+    <b>Data detail view:</b>
+    <ul>
+      <li>
+        Give proper title and breadcrumb navigation on top header to go back to main data table.
+      </li>
+      <li>
+        Consider giving in-page navigation section if it contains too many sections with lot of data.
+      </li>
+    </ul>
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/manage-account.mdx b/content/design-system/task-flows/manage-account.mdx
index be16822..413596f 100644
--- a/content/design-system/task-flows/manage-account.mdx
+++ b/content/design-system/task-flows/manage-account.mdx
@@ -25,11 +25,34 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    Determine type of account to be managed - user account/ team or project account
+  </li>
+  <li>
+    Determine primary account information needed to be accessible for viewing and editing to the users
+  </li>
+  <li>
+    If there is a long list of information & settings, organize them into smaller relevant category groups
+  </li>
+  <li>
+    If there are only a few settings, navigation can be on a single scrollable page
+  </li>
+  <li>
+    Tabs can be used when there are 2-5 categories of information & settings
+  </li>
+  <li>
+    If there many settings and categories (>5), consider a left panel for navigating through them
+  </li>
+  <li>
+    In case of many settings, give a search option to search for settings
+  </li>
+  <li>
+    Editing sensitive information & critical settings should give a confirmation prompt before saving the changes
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/monitor-activities.mdx b/content/design-system/task-flows/monitor-activities.mdx
index 493e693..774c5b3 100644
--- a/content/design-system/task-flows/monitor-activities.mdx
+++ b/content/design-system/task-flows/monitor-activities.mdx
@@ -3,8 +3,8 @@ id: 'task-flows-monitor-activities'
 title: 'Monitor Activities'
 tagline: 'Ullamco et dolor enim mollit aliqua.'
 tags: ['jobs', 'experiments', 'observations']
-intent: 'Minim tempor velit exercitation pariatur duis labore qui. Occaecat reprehenderit commodo eu non eu. Est mollit adipisicing exercitation non fugiat labore sint ex nisi in non dolore in.'
-intentDetails: ''
+intent: 'Enables users to monitor running tasks, jobs, experiments, and observational studies and make decisions based on the status of those activities.'
+intentDetails: 'Monitoring can be both real-time and asynchronous. Live monitoring of experiments helps teams determine if something has gone wrong and the experiment needs to be stopped (such as in cases where there are problems with an instrument). Asynchronous task monitoring can be used to determine if the task should be run again in cases of failures.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/monitor-tasks'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/monitor-tasks'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1'
@@ -28,11 +28,41 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    <b>Real-time experiments</b>
+    <ul>
+      <li>
+        The display should refresh to show new data as the data becomes available.
+      </li>
+      <li>
+        If data or events need to be reviewed, highlight the new data / events to draw attention to the ones needing review.
+      </li>
+      <li>
+        To support real-time decision making, keep the display as simple as possible with only what data is needed to make decisions. Plots and other quick analysis methods can be useful for these determinations.
+      </li>
+      <li>
+        Consider providing a simple way for users to add notes alongside monitored events.
+      </li>
+      <li>
+        If the monitor is to be used alongside other software, consider providing a smaller aspect ratio app for monitoring events. Provide a full desktop ratio version for more detailed work.
+      </li>
+    </ul>
+  </li>
+  <li>
+    <b>Asynchronous monitors</b>
+    <ul>
+      <li>
+        Users may rely on scanning states to help determine next steps. For example, in a job monitor, some indication if the job failed is helpful to determine if the job should be re-run. In cases of experimental observations, the state can determine if more observations are needed.
+      </li>
+      <li>
+        While real-time monitors should be kept simple, asynchronous monitors can be much more data dense, since time is not as constrained. Rich data access can help users determine next steps.
+      </li>
+    </ul>
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/run-computation.mdx b/content/design-system/task-flows/run-computation.mdx
index 2123e28..e9c545f 100644
--- a/content/design-system/task-flows/run-computation.mdx
+++ b/content/design-system/task-flows/run-computation.mdx
@@ -4,7 +4,7 @@ title: 'Run Computation'
 tagline: 'Running optimizations, simulations, analyses'
 tags: ['execution', 'scenario', 'job', 'simulation', 'optimization', 'stepper', 'wizard']
 intent: 'Enables users to run computation(s) through a multi-step flow to generate results.'
-intentDetails: ''
+intentDetails: 'Computations could be optimizations, calculations, or simulations for a model, scenario, or experiment with attributes to observe and compare results. Attributes may include input data and settings. Computations may be long running and require the ability for a user to leave the flow and return later.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/optimization'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/optimization'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1'
@@ -37,11 +37,40 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    Break the task flow into multiple workable steps and use a progress indicator / stepper to help users see the progress and remaining steps in the process to complete.
+  </li>
+  <li>
+    Organize information into sections that are easy to digest. This helps improve the readability and searchability.
+  </li>
+  <li>
+    Offer guidance, tips, and links to detailed documentation for complex inputs & interactions.
+  </li>
+  <li>
+    Pre-fill the forms with sensible default values wherever possible, especially if data inputs require long forms.
+  </li>
+  <li>
+    Consider allowing users to upload input data as external files or spreadsheets, especially for computations that require large amounts of input data. 
+  </li>
+  <li>
+    Make attributes searchable and filterable to make it easy to find attributes of interests.
+  </li>
+  <li>
+    Give real time error warnings for mis-configurations, especially for long complex forms. For example, specify bounds for values and provide warnings if values are outside of bounds.
+  </li>
+  <li>
+    Help users recover from failed computations by providing meaningful and actionable error messages and allow them to go back and change configurations and inputs.
+  </li>
+  <li>
+    Don’t break the workflow into too many small steps. Users may perceive this as a long and overwhelming process to complete.
+  </li>
+  <li>
+    Don’t assume users will understand each input field and the values to configure it. Provide contextual information when able.
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/run-interactive-computation.mdx b/content/design-system/task-flows/run-interactive-computation.mdx
index 50e59e3..30b01a7 100644
--- a/content/design-system/task-flows/run-interactive-computation.mdx
+++ b/content/design-system/task-flows/run-interactive-computation.mdx
@@ -28,11 +28,28 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    Start with a clear intent of what kind of insights users should be able to derive.
+  </li>
+  <li>
+    Organize the data points, constraints and controls in clear categories & groups which would be required to derive the analysis.
+  </li>
+  <li>
+    Try to reduce user mental effort by giving default values selected for analysis wherever possible.
+  </li>
+  <li>
+    Make selected variables / options visible if possible, to help users relate the selections to the analysis.
+  </li>
+  <li>
+    The layout should reflect these organized categories of data and controls, and should support the regeneration of insights with different controls & constraints of the user
+  </li>
+  <li>
+    Support the UI with export & save report features - users may want to save the reports or dashboard for quick access.
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/search-data-repositories.mdx b/content/design-system/task-flows/search-data-repositories.mdx
index ae62bf4..c03ff80 100644
--- a/content/design-system/task-flows/search-data-repositories.mdx
+++ b/content/design-system/task-flows/search-data-repositories.mdx
@@ -3,8 +3,8 @@ id: 'task-flows-search-data-repositories'
 title: 'Search Data Repositories'
 tagline: 'Mollit laboris nulla consectetur sint sunt.'
 tags: ['dataset', 'repository']
-intent: 'Enables exploration and evaluation of datasets from a repository, which users can download or export.'
-intentDetails: ''
+intent: 'Enables exploration and evaluation of datasets from a repository which users can download or export.'
+intentDetails: 'A dataset repository lists multiple verified datasets, often uploaded by the community and available to the community to evaluate, download, and use for further research.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-datasets'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-datasets'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A45832&mode=design&t=YPdwq8c0BdXx5Um8-1'
@@ -28,11 +28,36 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
-
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
+<ul>
+  <li>
+    Support search and filtering of the data itself, not just dataset metadata.
+  </li>
+  <li>
+    Allow for inspection of the data prior to downloading. This can include:
+    <ul>
+      <li>
+        For observational data - showing what types of data was collected, over what period of time, and the observation count.
+      </li>
+      <li>
+        Plots to describe characteristics of the data, such as gaps and quality.
+      </li>
+    </ul>
+  </li>
+  <li>
+    Expect that there may be many filtering options. Vertical sidebar filters can be useful for this, as well as “build your own” filters type patterns.
+  </li>
+  <li>
+    Where possible, allow users to filter within a specific dataset so that they don’t have to download an entire dataset that might not be relevant to their work.
+  </li>
+  <li>
+    Data should always include units so that it can be evaluated by the user or converted in analyses.
+  </li>
+  <li>
+    How the list of datasets is displayed can vary. For example, the list can be styled as citations or as a structured table.
+  </li>
+</ul>
 
 {/*
 ## Variations & Examples
diff --git a/content/design-system/task-flows/track-state.mdx b/content/design-system/task-flows/track-state.mdx
index 73be65e..841df62 100644
--- a/content/design-system/task-flows/track-state.mdx
+++ b/content/design-system/task-flows/track-state.mdx
@@ -25,11 +25,26 @@ import { InfoTable } from '/src/components/InfoTable';
   </Grid>
 </Grid>
 
-Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
+### Guidelines
 
-### Dos and Don'ts
+<ul>
+  <li>
+    Determine what entity history is important for users, and why
+  </li>
+  <li>
+    Determine the statuses if any associated with the entity, and the various data points relevant for the history of the entity
+  </li>
+  <li>
+    Consider a timeline graph or other visualization that will help give an overview of history
+  </li>
+  <li>
+    Determine the actions users can take from the history view
+  </li>
+  <li>
+    Give search and filter options, specially on date & time data points for users to easily access the data they are looking for.
+  </li>
+</ul>
 
-Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
 
 {/*
 ## Variations & Examples
diff --git a/src/components/layouts/TaskFlowLayout.tsx b/src/components/layouts/TaskFlowLayout.tsx
index 204f059..4b0c554 100644
--- a/src/components/layouts/TaskFlowLayout.tsx
+++ b/src/components/layouts/TaskFlowLayout.tsx
@@ -79,6 +79,8 @@ const TaskFlowLayout: React.FC<PageProps<any, TaskFlowPageContext>> = ({ pageCon
           </Typography>
           <p>
             {pageContext.frontmatter.intent}
+         <br/>
+            {pageContext.frontmatter.intentDetails}
           </p>
           <Box>
             <Grid container spacing={2} width="75%">

From 1f5aaa8f91689f65cc36721b522651d8c40e9058 Mon Sep 17 00:00:00 2001
From: Rajshree Deshmukh <rajshreed@lbl.gov>
Date: Thu, 11 Jan 2024 15:18:56 -0800
Subject: [PATCH 4/4] status chip size small + info table cell padding

---
 src/components/InfoTable.tsx              | 2 +-
 src/components/StatusChip.tsx             | 1 +
 src/components/layouts/TaskFlowLayout.tsx | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/InfoTable.tsx b/src/components/InfoTable.tsx
index 34e8624..d55d8f2 100644
--- a/src/components/InfoTable.tsx
+++ b/src/components/InfoTable.tsx
@@ -19,7 +19,7 @@ export const InfoTable: React.FC<TableContainerProps> = ({ children, ...rest })
           fontWeight: 'bold',
         },
         '& .MuiTableCell-root': {
-          padding: 1,
+          padding: 2,
         },
         '& a, & a:visited': {
           color: 'primary.main'
diff --git a/src/components/StatusChip.tsx b/src/components/StatusChip.tsx
index 9140d9c..3563a17 100644
--- a/src/components/StatusChip.tsx
+++ b/src/components/StatusChip.tsx
@@ -23,6 +23,7 @@ export const StatusChip: React.FC<StatusChipProps> = ({ status }) => {
       label={statusProps.label}
       icon={statusProps.icon}
       color={statusProps.color}
+      size="small"
     />
   );
 };
diff --git a/src/components/layouts/TaskFlowLayout.tsx b/src/components/layouts/TaskFlowLayout.tsx
index 4b0c554..bdb50ed 100644
--- a/src/components/layouts/TaskFlowLayout.tsx
+++ b/src/components/layouts/TaskFlowLayout.tsx
@@ -79,7 +79,7 @@ const TaskFlowLayout: React.FC<PageProps<any, TaskFlowPageContext>> = ({ pageCon
           </Typography>
           <p>
             {pageContext.frontmatter.intent}
-         <br/>
+            <br/>
             {pageContext.frontmatter.intentDetails}
           </p>
           <Box>