Merge pull request #30 from strudel-science/update/merge-taskflow-con…

…tent Merging Update/merge taskflow content
strudel-science · Jan 10, 2024 · dd95536 · dd95536
2 parents 78124d3 + c443a65
commit dd95536
Show file tree

Hide file tree

Showing 11 changed files with 272 additions and 16 deletions.
diff --git a/config/strudel-config.json b/config/strudel-config.json
@@ -57,18 +57,18 @@
               "markdownId": "task-flows-contribute-data",
               "layoutComponent": "TaskFlowLayout"
             },
-            {
-              "name": "Search Data Repositories",
-              "path": "/design-system/task-flows/search-data-repositories",
-              "markdownId": "task-flows-search-data-repositories",
-              "layoutComponent": "TaskFlowLayout"
-            },
             {
               "name": "Explore Data",
               "path": "/design-system/task-flows/explore-data",
               "markdownId": "task-flows-explore-data",
               "layoutComponent": "TaskFlowLayout"
             },
+            {
+              "name": "Manage Account",
+              "path": "/design-system/task-flows/manage-account",
+              "markdownId": "task-flows-manage-account",
+              "layoutComponent": "TaskFlowLayout"
+            },
             {
               "name": "Monitor Activities",
               "path": "/design-system/task-flows/monitor-activities",
@@ -80,6 +80,24 @@
               "path": "/design-system/task-flows/run-computation",
               "markdownId": "task-flows-run-computation",
               "layoutComponent": "TaskFlowLayout"
+            },
+            {
+              "name": "Run Interactive Computation",
+              "path": "/design-system/task-flows/run-interactive-computation",
+              "markdownId": "task-flows-run-interactive-computation",
+              "layoutComponent": "TaskFlowLayout"
+            },
+            {
+              "name": "Search Data Repositories",
+              "path": "/design-system/task-flows/search-data-repositories",
+              "markdownId": "task-flows-search-data-repositories",
+              "layoutComponent": "TaskFlowLayout"
+            },
+            {
+              "name": "Track State",
+              "path": "/design-system/task-flows/track-state",
+              "markdownId": "task-flows-track-state",
+              "layoutComponent": "TaskFlowLayout"
             }
           ]
         },

diff --git a/content/design-system/overview.mdx b/content/design-system/overview.mdx
@@ -10,7 +10,7 @@ import { ContentCard } from '/src/components/ContentCard';
 import { ContentStepper, ContentStep } from '/src/components/ContentStepper';
 
 <Hero>
-  The Design System provides a set of reusable components and patterns along with guidelines for designing and implementing user interfaces.
+  STRUDEL Design System provides a set of reusable components and patterns along with guidelines for designing and implementing user interfaces in science and research domains. It is framed and guided by ‘Task flows’, which are step wise flows through a user interface to accomplish particular tasks. 
 
   ## The STRUDEL Design System
 
@@ -24,21 +24,31 @@ import { ContentStepper, ContentStep } from '/src/components/ContentStepper';
     </Grid>
     <Grid item md={4}>
       <ContentCard>
-        #### Designed for the sciences
+        #### Focuses on how the UI should function
 
-        Specifically designed for common patterns seen in scientific UIs that can be applied across different scientific domains
+       It focuses on the series of steps taken as part of a larger workflow. This provides the big picture of user journeys & aid to improve user experience
       </ContentCard>
     </Grid>
     <Grid item md={4}>
       <ContentCard>
-        #### Designed for the sciences
+        #### Good UX from experts in the sciences is baked in
 
-        Specifically designed for common patterns seen in scientific UIs that can be applied across different scientific domains
+        Informed by over a decade of collective UX experience in the sciences and encapsulates good UX practices
       </ContentCard>
     </Grid>
   </Grid>
 </Hero>
 <PageContainer>
+  ## STRUDEL products
+  STRUDEL task flows consists of a visual documentation and coded library:
+
+  ### Design template
+  Task Flows are visualized through step-by-step mockups (UI screens) documenting the process of completing a task and illustrating a user's journey through a UI. They also have corresponding design & usage guidelines.
+
+  ### Code library
+  The task-flows have their coded templates in the UI code library. This library uses the React JavaScript framework and is based on the popular Material UI (MUI) Components library.
+
+
   ## How to use the STRUDEL Design System
 
   <ContentStepper>

diff --git a/content/design-system/task-flows/compare-data.mdx b/content/design-system/task-flows/compare-data.mdx
@@ -20,6 +20,7 @@ Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure
 
 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
 
 Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
@@ -57,6 +58,7 @@ Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt co
     </TableRow>
   </TableBody>
 </InfoTable>
+*/}
 
 ## Other Relevant Task Flows
 

diff --git a/content/design-system/task-flows/contribute-data.mdx b/content/design-system/task-flows/contribute-data.mdx
@@ -6,7 +6,7 @@ tags: ['upload', 'dataset', 'register', 'repository']
 intent: 'Enables users to upload their work and data to a community managed repository.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/contributing-data'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/contributing-data'
-figmaUrl: ''
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1'
 ---
 import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import { TaskFlowCard } from '/src/components/TaskFlowCard';
@@ -20,6 +20,7 @@ Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure
 
 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
 
 Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
@@ -57,6 +58,7 @@ Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt co
     </TableRow>
   </TableBody>
 </InfoTable>
+*/}
 
 ## Other Relevant Task Flows
 

diff --git a/content/design-system/task-flows/explore-data.mdx b/content/design-system/task-flows/explore-data.mdx
@@ -6,7 +6,7 @@ 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.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-entities'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-entities'
-figmaUrl: ''
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1'
 ---
 import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import { TaskFlowCard } from '/src/components/TaskFlowCard';
@@ -20,6 +20,7 @@ Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure
 
 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
 
 Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
@@ -57,6 +58,7 @@ Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt co
     </TableRow>
   </TableBody>
 </InfoTable>
+*/}
 
 ## Other Relevant Task Flows
 

diff --git a/content/design-system/task-flows/manage-account.mdx b/content/design-system/task-flows/manage-account.mdx
@@ -0,0 +1,72 @@
+---
+id: 'task-flows-manage-account'
+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.'
+exampleUrl: ''
+codeUrl: ''
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73769&mode=design&t=YPdwq8c0BdXx5Um8-1'
+---
+import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import { TaskFlowCard } from '/src/components/TaskFlowCard';
+import { InfoTable } from '/src/components/InfoTable';
+
+## Overview
+
+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.
+
+{/*
+## Variations & Examples
+
+Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
+
+## Components & Patterns Used
+
+<InfoTable>
+  <TableHead>
+    <TableRow>
+      <TableCell>Component</TableCell>
+      <TableCell>Usage Context</TableCell>
+      <TableCell>Links to Libraries</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Stepper</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/material-ui/react-stepper/" target="_blank">MUI links to start with</a></TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Data Grid</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/x/react-data-grid/" target="_blank">MUI links to start with</a></TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Date Picker</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/x/react-date-pickers/" target="_blank">MUI links to start with</a></TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Select</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/material-ui/react-select/">MUI links to start with</a></TableCell>
+    </TableRow>
+  </TableBody>
+</InfoTable>
+*/}
+
+## Other Relevant Task Flows
+
+<Grid container spacing={4}>
+  <Grid item md={6}>
+    <TaskFlowCard name="Compare Data" />
+  </Grid>
+  <Grid item md={6}>
+    <TaskFlowCard name="Compare Data" />
+  </Grid>
+</Grid>
diff --git a/content/design-system/task-flows/monitor-activities.mdx b/content/design-system/task-flows/monitor-activities.mdx
@@ -6,7 +6,7 @@ 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.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/monitor-tasks'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/monitor-tasks'
-figmaUrl: ''
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1'
 ---
 import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import { TaskFlowCard } from '/src/components/TaskFlowCard';
@@ -20,6 +20,7 @@ Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure
 
 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
 
 Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
@@ -57,6 +58,7 @@ Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt co
     </TableRow>
   </TableBody>
 </InfoTable>
+*/}
 
 ## Other Relevant Task Flows
 

diff --git a/content/design-system/task-flows/run-computation.mdx b/content/design-system/task-flows/run-computation.mdx
@@ -6,7 +6,7 @@ tags: ['execution', 'scenario', 'job', 'simulation', 'optimization', 'stepper',
 intent: 'Enables users to run computation(s) through a multi-step flow to generate results.'
 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=039KVhiqqy4X7Gw7-1'
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1'
 ---
 import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import { TaskFlowCard } from '/src/components/TaskFlowCard';
@@ -20,6 +20,7 @@ Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure
 
 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
 
 Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
@@ -57,6 +58,7 @@ Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt co
     </TableRow>
   </TableBody>
 </InfoTable>
+*/}
 
 ## Other Relevant Task Flows
 

diff --git a/content/design-system/task-flows/run-interactive-computation.mdx b/content/design-system/task-flows/run-interactive-computation.mdx
@@ -0,0 +1,72 @@
+---
+id: 'task-flows-run-interactive-computation'
+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.'
+exampleUrl: ''
+codeUrl: ''
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73770&mode=design&t=YPdwq8c0BdXx5Um8-1'
+---
+import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import { TaskFlowCard } from '/src/components/TaskFlowCard';
+import { InfoTable } from '/src/components/InfoTable';
+
+## Overview
+
+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.
+
+{/*
+## Variations & Examples
+
+Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
+
+## Components & Patterns Used
+
+<InfoTable>
+  <TableHead>
+    <TableRow>
+      <TableCell>Component</TableCell>
+      <TableCell>Usage Context</TableCell>
+      <TableCell>Links to Libraries</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Stepper</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/material-ui/react-stepper/" target="_blank">MUI links to start with</a></TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Data Grid</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/x/react-data-grid/" target="_blank">MUI links to start with</a></TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Date Picker</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/x/react-date-pickers/" target="_blank">MUI links to start with</a></TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Select</TableCell>
+      <TableCell>Some blurb on how the component is useful in this taskflow</TableCell>
+      <TableCell><a href="https://mui.com/material-ui/react-select/">MUI links to start with</a></TableCell>
+    </TableRow>
+  </TableBody>
+</InfoTable>
+*/}
+
+## Other Relevant Task Flows
+
+<Grid container spacing={4}>
+  <Grid item md={6}>
+    <TaskFlowCard name="Compare Data" />
+  </Grid>
+  <Grid item md={6}>
+    <TaskFlowCard name="Compare Data" />
+  </Grid>
+</Grid>
diff --git a/content/design-system/task-flows/search-data-repositories.mdx b/content/design-system/task-flows/search-data-repositories.mdx
@@ -6,7 +6,7 @@ tags: ['dataset', 'repository']
 intent: 'Enables exploration and evaluation of datasets from a repository, which users can download or export.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-datasets'
 codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-datasets'
-figmaUrl: ''
+figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A45832&mode=design&t=YPdwq8c0BdXx5Um8-1'
 ---
 import { Grid, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import { TaskFlowCard } from '/src/components/TaskFlowCard';
@@ -20,6 +20,7 @@ Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure
 
 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
 
 Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt commodo. Officia ipsum magna laborum dolore mollit adipisicing eiusmod. Duis irure ullamco in aliquip eu ad aliquip elit cupidatat.
@@ -57,6 +58,7 @@ Aliquip ea ipsum Lorem amet incididunt excepteur Lorem aute proident deserunt co
     </TableRow>
   </TableBody>
 </InfoTable>
+*/}
 
 ## Other Relevant Task Flows