From c42d63aea2cd9d1ec109654e3103814d055b69f0 Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Thu, 13 Jun 2024 10:19:24 -0700 Subject: [PATCH 1/3] Fix tutorial page links --- content/design-system/tutorials.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/content/design-system/tutorials.mdx b/content/design-system/tutorials.mdx index db6025d..64f8576 100644 --- a/content/design-system/tutorials.mdx +++ b/content/design-system/tutorials.mdx @@ -32,8 +32,8 @@ import { Link } from 'gatsby'; > - - Getting Started with STRUDEL Kit (Beta) + + Getting Started with STRUDEL Kit @@ -48,7 +48,8 @@ import { Link } from 'gatsby'; > From a1ad20362a01c3d6bb4e9e70352ef6f19b874dcf Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Thu, 13 Jun 2024 11:23:58 -0700 Subject: [PATCH 2/3] Update code button links --- content/design-system/task-flows/compare-data.mdx | 2 +- content/design-system/task-flows/contribute-data.mdx | 2 +- content/design-system/task-flows/explore-data.mdx | 2 +- content/design-system/task-flows/monitor-activities.mdx | 2 +- content/design-system/task-flows/run-computation.mdx | 2 +- .../design-system/task-flows/search-data-repositories.mdx | 2 +- src/components/layouts/TaskFlowLayout.tsx | 6 +++--- src/hooks/useTaskFlow.tsx | 1 + 8 files changed, 10 insertions(+), 9 deletions(-) diff --git a/content/design-system/task-flows/compare-data.mdx b/content/design-system/task-flows/compare-data.mdx index 0b175ad..01fd152 100644 --- a/content/design-system/task-flows/compare-data.mdx +++ b/content/design-system/task-flows/compare-data.mdx @@ -6,7 +6,7 @@ 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: '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-data' -codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/compare-data' +codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/compare-data' figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A65420&mode=design&t=w7GGrEXSOV1T8UCr-1' iconImage: '../../images/task-flows/overview-icons/compare-data.png' --- diff --git a/content/design-system/task-flows/contribute-data.mdx b/content/design-system/task-flows/contribute-data.mdx index 8b081d4..2a3f874 100644 --- 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.' 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/#/contribute-data' -codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/contribute-data' +codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/contribute-data' figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1' iconImage: '../../images/task-flows/overview-icons/contribute-data.png' --- diff --git a/content/design-system/task-flows/explore-data.mdx b/content/design-system/task-flows/explore-data.mdx index 6ee9090..8d6c6a1 100644 --- 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: '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/#/explore-data' -codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/explore-data' +codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/explore-data' figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1' iconImage: '../../images/task-flows/overview-icons/explore-data.png' --- diff --git a/content/design-system/task-flows/monitor-activities.mdx b/content/design-system/task-flows/monitor-activities.mdx index e1f4bd3..66f8c7a 100644 --- 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: '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-activities' -codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/monitor-activities' +codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/' figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1' iconImage: '../../images/task-flows/overview-icons/monitor-activity.png' --- diff --git a/content/design-system/task-flows/run-computation.mdx b/content/design-system/task-flows/run-computation.mdx index 008da2c..6119731 100644 --- 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.' 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/#/run-computation' -codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/run-computation' +codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/run-computation' figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1' iconImage: '../../images/task-flows/overview-icons/run-computation.png' --- diff --git a/content/design-system/task-flows/search-data-repositories.mdx b/content/design-system/task-flows/search-data-repositories.mdx index 1fedfec..87d9320 100644 --- 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.' 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/#/search-data-repositories' -codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/search-data-repositories' +codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/search-data-repositories' figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A45832&mode=design&t=YPdwq8c0BdXx5Um8-1' iconImage: '../../images/task-flows/overview-icons/search-data-repository.png' --- diff --git a/src/components/layouts/TaskFlowLayout.tsx b/src/components/layouts/TaskFlowLayout.tsx index ab03559..80c6e9d 100644 --- a/src/components/layouts/TaskFlowLayout.tsx +++ b/src/components/layouts/TaskFlowLayout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Box, Chip, Grid, Link as MuiLink, Stack, Typography } from '@mui/material'; import VisibilityIcon from '@mui/icons-material/Visibility'; -import GitHubIcon from '@mui/icons-material/GitHub'; +import CodeIcon from '@mui/icons-material/Code'; import DrawIcon from '@mui/icons-material/Draw'; import BaseLayout from './BaseLayout'; import { PageProps, Link, HeadProps } from 'gatsby'; @@ -129,13 +129,13 @@ const TaskFlowLayout: React.FC> = ({ pageCon {hasCode && ( - )} {!hasCode && ( - )} diff --git a/src/hooks/useTaskFlow.tsx b/src/hooks/useTaskFlow.tsx index f3ff0ef..50ca6a5 100644 --- a/src/hooks/useTaskFlow.tsx +++ b/src/hooks/useTaskFlow.tsx @@ -60,6 +60,7 @@ export const useTaskFlow = (name: string) => { ); const taskFlowConfig = findPageByName(name, configJson.pages); if (taskFlowConfig) { + console.log(allMdx); const mdx = allMdx.nodes?.find((md) => md.frontmatter.id === taskFlowConfig.markdownId); return { ...taskFlowConfig, From 5bea5617de69ad936b03ff6cd35b81bb2587466f Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Thu, 13 Jun 2024 11:45:35 -0700 Subject: [PATCH 3/3] Update strudel kit page and links --- content/design-system/code-library.mdx | 49 +++++++++----------------- 1 file changed, 17 insertions(+), 32 deletions(-) diff --git a/content/design-system/code-library.mdx b/content/design-system/code-library.mdx index c1121ef..6dd8c0d 100644 --- a/content/design-system/code-library.mdx +++ b/content/design-system/code-library.mdx @@ -3,7 +3,8 @@ id: 'design-system-code-library' title: 'STRUDEL Kit' subtitle: 'Code templates for scientific task flow UIs' --- -import { Link as MuiLink, Button, Box } from '@mui/material'; +import { Link as MuiLink, Button, Stack } from '@mui/material'; +import ArticleIcon from '@mui/icons-material/Article'; import GitHubIcon from '@mui/icons-material/GitHub'; import { Hero } from '/src/components/Hero'; import { PageContainer } from '/src/components/PageContainer'; @@ -11,52 +12,36 @@ import { PageContainer } from '/src/components/PageContainer'; STRUDEL Kit is a React-based JavaScript library for building scientific UIs based on the STRUDEL Design System and Task Flows. The library provides scaffolding and templates to help scientific teams jumpstart their adaptation and use of common task flows in their products. - + + + - + - ## STRUDEL Tech Stack - - STRUDEL Kit is made up of two main products: **strudel-cli**, a command-line tool for quickly generating Task Flow template code, and the **STRUDEL React templates**, code templates for building STRUDEL Task Flows using the React web library. - - **strudel-cli** - - - [Command line](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) - - [Python](https://www.python.org/) - - [Cookiecutter](https://cookiecutter.readthedocs.io/en/latest/README.html) - - [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) - - **STRUDEL React Templates** - - - [TypeScript](https://www.typescriptlang.org/) - - [React](https://react.dev/) - - [Material UI Components](https://mui.com/material-ui/getting-started/) - - [Plotly.js](https://plotly.com/javascript/) - - ## Learning Resources + STRUDEL Kit is made up of two main products: **strudel-cli**, a command-line tool for quickly generating Task Flow template code, and the **STRUDEL React templates**, code templates for building STRUDEL Task Flows using the React web library. Check out the list of resources below to start learning the skills you need to get started building web applicaitons with STRUDEL Kit. - **STRUDEL** + **STRUDEL Kit** + - [Introduction and Getting Started](https://strudel.science/strudel-kit/docs/) - [Tutorials](https://strudel.science/design-system/tutorials/) - - [Task Flows](https://strudel.science/design-system/task-flows/overview/) - [Community Discussions](https://github.com/orgs/strudel-science/discussions) - - [Events](https://strudel.science/engage/events/) - - [Connect and Contribute](https://strudel.science/engage/contribute/) **Web Development** - [Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react) - - [TypeScript for JavaScript Programmers](https://www.typescriptlang.org/docs/handbook/-typescript-in-5-minutes.html) + - [Learn React: Describing the UI](https://react.dev/learn/describing-the-ui) + - [Learn TypeScript](https://www.typescriptlang.org/docs/) **Material UI**