### Install Project Dependencies Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/1-setup.md Install all the necessary Node.js dependencies for your project using npm. ```bash npm install ``` -------------------------------- ### Install Dependencies and Start Application Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md Commands to install project dependencies using npm and start the Strudel Kit application locally. This allows developers to test their changes before submitting a pull request. ```Shell npm install ``` ```Shell npm start ``` -------------------------------- ### Start Local Development Server Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/getting-started/quickstart.mdx Start the local development server to run the Strudel Kit application. This command typically builds the project and serves it on a local port. ```bash npm start ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/getting-started/quickstart.mdx Install all the necessary Node.js dependencies for the project using npm. This command reads the package.json file to fetch packages. ```bash npm install ``` -------------------------------- ### Install Dependencies and Start STRUDEL App Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Installs project dependencies using NPM and starts the STRUDEL application. The app can then be viewed at http://localhost:3000. ```bash npm install npm start ``` -------------------------------- ### Verify Tool Installations Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/1-setup.md Check if Node.js, npm, and npx are installed on your system by running these version check commands in your terminal. ```bash node --version npm --version npx --version ``` -------------------------------- ### Start Local Development Server Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/1-setup.md Launch the local development server for your Strudel Kit application. The app will be accessible at http://localhost:5175. ```bash npm start ``` -------------------------------- ### Material UI (MUI) Getting Started Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/external-resources.md Learn how to install and use Material UI (MUI), a popular React UI component library. This guide covers the initial steps for integrating MUI into your projects. ```bash # Example installation command for Material UI npm install @mui/material @emotion/react @emotion/styled ``` ```React // Example of using a Material UI component import Button from '@mui/material/Button'; function MyButton() { return ; } ``` -------------------------------- ### Navigate to Project Directory Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/1-setup.md Change the current directory to the newly created project folder 'planets-app'. ```bash cd planets-app ``` -------------------------------- ### Generate New Project with Strudel Kit Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/1-setup.md Create a new project named 'planets-app' using the strudel-kit template via degit. This command may prompt for degit installation. ```bash npx degit strudel-science/strudel-kit planets-app ``` -------------------------------- ### Install Dependencies with Yarn Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/README.md Installs project dependencies using the yarn package manager. This is the first step to get the project running locally. ```bash $ yarn ``` -------------------------------- ### Clone Strudel Kit with degit Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/getting-started/installation.md This command uses npx and degit to clone the Strudel Kit repository into a new directory named 'my-app'. Degit is used to fetch only the files, excluding the git history, making it a clean way to start a new project. After cloning, you will need to connect this new directory to your own remote Git repository. ```bash npx degit strudel-science/strudel-kit my-app ``` -------------------------------- ### Task Flow File Structure Example (TypeScript/React) Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md This example illustrates the typical directory and file structure for a new Task Flow within the Strudel Kit application. It shows the placement of the main page component, internal components, and configuration files. ```TypeScript src/pages/update-metadata/index.tsx src/pages/update-metadata/_components/ src/pages/update-metadata/_config/taskflow.config.ts src/pages/update-metadata/_config/taskflow.types.ts src/pages/update-metadata/analyze.tsx src/pages/update-metadata/visualize.tsx ``` -------------------------------- ### Download Strudel Kit Project Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/getting-started/quickstart.mdx Use npx degit to download the Strudel Kit project files into a new directory. This command fetches the project from the specified GitHub repository. ```bash npx degit strudel-science/strudel-kit my-app ``` -------------------------------- ### Install Dependencies Source: https://github.com/strudel-science/strudel-kit/blob/main/README.md This command installs all the necessary project dependencies defined in the package.json file. It's a standard step after cloning or generating a new project. ```Shell npm install ``` -------------------------------- ### Navigate to Project Directory Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/getting-started/quickstart.mdx Change the current directory to the newly created project folder. This is a standard command-line operation. ```bash cd my-app ``` -------------------------------- ### Start Local Development Server Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/README.md Starts a local development server for the Strudel Kit website. Changes are reflected live without server restarts. Requires yarn. ```bash $ yarn start ``` -------------------------------- ### React UI Basics Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/external-resources.md Learn the fundamentals of describing user interfaces in React, starting from the basics with official examples. This resource is essential for understanding React's core principles. ```React // Example from React documentation (conceptual) function Greeting(props) { return

Hello, {props.name}

; } ``` -------------------------------- ### Start Development Server Source: https://github.com/strudel-science/strudel-kit/blob/main/README.md This command starts the development server, typically using Vite, to run the application locally. It allows for hot-reloading and provides a URL to view the app in the browser. ```Shell npm start ``` -------------------------------- ### Install STRUDEL CLI Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Installs the STRUDEL CLI tool using pip. This command is used to manage and generate STRUDEL-based web applications. ```bash pip install strudel-cli ``` -------------------------------- ### Clone Strudel Kit Repository Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md Instructions to clone the Strudel Kit repository using Git. This is the first step in setting up a local development environment for contributing to the project. ```Shell git clone git@github.com:your-gh-username/strudel-kit.git ``` -------------------------------- ### Open a Discussion on Strudel Kit Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md This guide explains how to initiate a new discussion thread on GitHub for the Strudel Kit project. It emphasizes logging into GitHub, checking for existing relevant discussions, and following GitHub's instructions for creating a new discussion with a descriptive title and focused topic. ```Markdown 1. Log into Github. 2. Search through the [existing discussions](https://github.com/orgs/strudel-science/discussions) to see if there is already a thread opened on your topic. 1. If there is, you can [contribute to that discussion](#contributing-to-a-discussion) instead of opening your own. 2. If there is not a relevant discussion thread already, then proceed to the next step. 3. Follow Github’s instructions on [opening a discussion](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion). Give the discussion a descriptive title so that others can easily understand the specific topic. Try to limit the scope so that all things STRUDEL don’t get discussed in a single thread. For example, a good title and topic might be “Feedback on in person workshops,” whereas a vague title and topic might simply be “Feedback.” ``` -------------------------------- ### TypeScript Fundamentals Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/external-resources.md Get started with TypeScript, a superset of JavaScript that adds static typing. This resource provides tutorials tailored for various programming backgrounds to help you learn TypeScript effectively. ```TypeScript // Example of a typed variable in TypeScript let message: string = "Hello, TypeScript!"; let count: number = 42; ``` -------------------------------- ### CSS Styling Basics Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/external-resources.md Learn the fundamentals of CSS (Cascading Stylesheets), the core technology for styling web pages. This guide covers the basics needed to start styling your web content. ```CSS /* Example of basic CSS styling */ body { font-family: Arial, sans-serif; color: #333; } ``` -------------------------------- ### Clone STRUDEL Kit Repository Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Clones the STRUDEL kit repository from GitHub to access the strudel-cli source code. This is part of the developer setup process. ```bash git clone git@github.com:strudel-science/strudel-kit.git ``` -------------------------------- ### Create HelloWorldPage React Component Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/usrse.mdx A basic React functional component that renders a 'Hello World!' message. This is a starting point for creating new pages. ```jsx const HelloWorldPage: React.FC = () => { return (
Hello World!
); }; export default HelloWorldPage; ``` -------------------------------- ### Plotly.js Chart Examples Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/external-resources.md Discover examples for generating various types of charts using Plotly.js, a versatile JavaScript graphing library. This resource helps visualize data effectively. ```JavaScript // Conceptual example of Plotly.js usage // Assuming Plotly.js is loaded Plotly.newPlot('myDiv', [{ x: [1, 2, 3], y: [2, 4, 6], type: 'scatter' // or 'bar', 'line', etc. }]); ``` -------------------------------- ### Generate Project with degit Source: https://github.com/strudel-science/strudel-kit/blob/main/README.md This command uses degit to quickly scaffold a new project from the strudel-science/strudel-kit GitHub repository. It's a convenient way to start a new application based on the STRUDEL Kit. ```Shell npx degit strudel-science/strudel-kit my-app ``` -------------------------------- ### Check Node.js and NPM Versions Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Verifies if Node.js and NPM are installed on your system by checking their respective version numbers. This is a prerequisite for running generated web applications. ```bash node --version npm --version ``` -------------------------------- ### Navigate to STRUDEL CLI Directory Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Changes the current directory to the strudel-cli package within the cloned strudel-kit repository. This is a step in the developer installation. ```bash cd strudel-kit/strudel-cli ``` -------------------------------- ### Basic Home Page Component (index.tsx) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/5-customize-home-page.md This snippet shows the initial setup of a barebones home page component using React and Material-UI's Container. It defines the root route and renders a simple text within a container. ```jsx import { Container } from '@mui/material'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: Index, }); /** * Home page component that renders at the root route / */ function Index() { return ( My home page ); } ``` -------------------------------- ### Add Comment to Code Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md When coding changes for the STRUDEL Kit, it is encouraged to be liberal with comments to help newcomers understand the code. This example shows how to add a comment in a typical programming language. ```javascript // This function updates the metadata for a specific task flow. // Ensure all required parameters are provided before calling. function updateMetadata(taskId, metadata) { // ... implementation details ... } ``` -------------------------------- ### Create STRUDEL App Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Generates a new STRUDEL web application using a specified configuration file. This command bootstraps the project with the STRUDEL stack. ```bash strudel create-app --config my-app-config.json ``` -------------------------------- ### Run STRUDEL CLI Commands Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Demonstrates how to execute STRUDEL CLI commands, specifically 'create-app', with optional arguments like application name and options. ```bash strudel create-app [OPTIONS] ``` -------------------------------- ### Build STRUDEL CLI Distributable Package Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Builds the distributable package (wheel and tar.gz) for the strudel-cli using the 'build' module. This is a step before publishing to PyPI. ```bash rm -rf dist/* && python -m build ``` -------------------------------- ### Install STRUDEL CLI in Editable Mode Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Installs the STRUDEL CLI package in editable mode from the local source code. This allows for direct modifications and testing during development. ```bash pip install -e . ``` -------------------------------- ### Upload STRUDEL CLI to PyPI Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Uploads the built distributable package of the strudel-cli to PyPI using the 'twine' tool. Requires authentication with PyPI. ```bash python -m twine upload --repository pypi dist/* ``` -------------------------------- ### Import React and Material UI Grid Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/introduction.mdx This snippet demonstrates importing necessary components from React and Material UI for building a grid layout. It's a common pattern for structuring UI elements in a responsive manner. ```jsx import { Grid } from '@mui/material'; import { LinkCard } from '@site/src/components/LinkCard'; ``` -------------------------------- ### Strudel Create App Command Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/reference.md Command to create a base strudel web application. Users can specify the app name, a configuration file, the output directory, the branch from strudel-kit, and verbosity level. ```console strudel create-app [OPTIONS] [NAME] Arguments: [NAME]: The name of your app. It's best to use only letters, hyphens, and underscores. Options: -c, --config TEXT: JSON file with configuration values to use to build your app. -o, --output-dir TEXT: Directory where the app should be created. Defaults to current directory. -b, --branch TEXT: Branch in strudel-kit repo that should be used for the templates. This option is primarily for use by contributors. [default: main] -v, --verbose: [default: 0] --help: Show this message and exit. ``` -------------------------------- ### Generate STRUDEL Kit App Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/task-flows/overview.mdx This command generates the entire STRUDEL Kit application, including the base app and all Task Flow templates. It uses `degit` to download the project files. ```bash npx degit strudel-science/strudel-kit my-app ``` -------------------------------- ### Add Task Flows to App (Bash) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/customization/connect-task-flows-together.md This snippet shows how to use `npx degit` to download and add the 'explore-data' and 'run-computation' Task Flows from the strudel-science/strudel-kit repository into your project's 'src/pages' directory. This is the initial step to integrate existing Task Flows into your application. ```bash cd src/pages npx degit strudel-science/strudel-kit/src/pages/explore-data explore npx degit strudel-science/strudel-kit/src/pages/run-computation compute ``` -------------------------------- ### Create Bugfix Branch Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md For fixing bugs in the STRUDEL Kit, create a new branch using the naming convention 'bugfix/description-of-bugfix'. This ensures clear identification and tracking of bug fixes. ```bash git checkout -b bugfix/tutorial-spelling-fix ``` -------------------------------- ### Generate Individual STRUDEL Kit Task Flow Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/task-flows/overview.mdx This command generates a specific Task Flow template from the STRUDEL Kit repository. It allows for targeted inclusion of components, using `degit` to download a particular page's directory. ```bash npx degit strudel-science/strudel-kit/src/pages/compare-data my-compare-data ``` -------------------------------- ### Create Feature Branch Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md When adding a new feature to the STRUDEL Kit, create a new branch following the naming convention 'feature/description-of-feature'. This helps in organizing and tracking new feature development. ```bash git checkout -b feature/update-metadata-task-flow ``` -------------------------------- ### Deploy Website using Yarn (SSH) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/README.md Deploys the website using SSH. This command builds the website and pushes it to the 'gh-pages' branch, suitable for GitHub Pages hosting. Requires yarn. ```bash $ USE_SSH=true yarn deploy ``` -------------------------------- ### STRUDEL CLI App Configuration Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Defines the basic configuration for creating a new STRUDEL application. It specifies the application name and title. ```json { "name": "my-strudel-app", "appTitle": "My Science App" } ``` -------------------------------- ### Define Custom Comparison Columns (TypeScript) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/customization/columns.md Defines custom columns for a comparison data table, including a specific property 'isComparisonMetric' to indicate columns for the comparison page. This example shows 'name' and 'acetic_acid_concentration'. ```typescript // CUSTOMIZE: the columns for the main data table const columns = [ { field: 'name', headerName: 'Scenario Name', width: 200, }, { field: 'acetic_acid_concentration', headerName: 'Acetic Acid Concentration', width: 200, isComparisonMetric: true, }, ]; ``` -------------------------------- ### Generouted Route Generation Convention Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md The Strudel Kit utilizes Generouted to automatically generate page routes based on the file structure within the `src/pages` directory. This snippet highlights the convention for creating routes. ```JavaScript // Based on file structure in src/pages/ // Example: src/pages/update-metadata/index.tsx creates route /update-metadata // Example: src/pages/update-metadata/analyze.tsx creates route /update-metadata/analyze ``` -------------------------------- ### Build Static Website Content Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/README.md Generates the static content for the website into the 'build' directory. This output can be hosted on any static content hosting service. Uses yarn. ```bash $ yarn build ``` -------------------------------- ### Deploy Website using Yarn (No SSH) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/README.md Deploys the website without using SSH. Requires specifying the GitHub username. This command builds the website and pushes it to the 'gh-pages' branch. Uses yarn. ```bash $ GIT_USER= yarn deploy ``` -------------------------------- ### Enable Dark Mode Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/4-customize-app.md Converts the STRUDEL app to dark mode by changing the `mode` property to 'dark' and adjusting the default background and paper colors. This example sets the background to specific shades of black. ```javascript palette: { mode: 'light', } ``` ```javascript palette: { mode: 'dark', } ``` ```javascript background: { default: '#191919', paper: '#232323', } ``` -------------------------------- ### Material UI (MUI) Theming Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/external-resources.md Explore how theming works in Material UI (MUI) applications. This documentation explains how to customize the look and feel of your UI components using theme options. ```React // Conceptual example of creating a theme in MUI import { createTheme } from '@mui/material/styles'; const theme = createTheme({ palette: { primary: { main: '#1976d2', }, }, }); ``` -------------------------------- ### Set AppBar Background to Primary Color (TopBar.tsx) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/4-customize-app.md This example demonstrates updating the AppBar's background color to 'primary.main' using the sx prop in TopBar.tsx. This utilizes theme palette values for dynamic styling. ```jsx ``` -------------------------------- ### Add Hover Effect to AppLink (TopBar.tsx) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/4-customize-app.md This example shows how to apply a hover state style to an AppLink component in TopBar.tsx using the sx prop. It changes the link color to 'secondary.light' when the user's cursor hovers over it. ```jsx Solar System ``` -------------------------------- ### Strudel CLI Usage Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/reference.md The base command for interacting with the strudel-cli. It outlines the general structure for commands and arguments, along with global options available for version checking and help. ```console strudel [OPTIONS] COMMAND [ARGS]... Options: -v, --version --install-completion: Install completion for the current shell. --show-completion: Show completion for the current shell, to copy it or customize the installation. --help: Show this message and exit. ``` -------------------------------- ### Link to Compute Settings Page (JSX) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/customization/connect-task-flows-together.md This JSX code demonstrates how to create a navigation link within the `` component of the 'Explore Data' Task Flow. It uses the `` component to navigate to the 'settings' page of the 'Run Computation' Task Flow, with a 'Analyze' button for user interaction. ```jsx ``` -------------------------------- ### Convert Strudel Kit Discussion to Issue Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md This describes the process of transforming a GitHub discussion into a project issue, signifying an actionable decision affecting a STRUDEL repository. Currently, this action is recommended for STRUDEL maintainers, with plans to clarify criteria for broader user participation. ```Markdown Github allows users to create an issue from a discussion thread. Doing so would signal that a discussion has led to an actionable decision that will affect a STRUDEL repository. At present, we recommend that only STRUDEL maintainers take this step. As criteria for when turning a discussion into an issue become more clear over time, we will share these criteria so that others can do the same. If you have suggestions for these criteria or other commentary on who should be able to take what actions, you may want to [open a discussion thread](#opening-a-discussion) or to [revise the docs](#revising-the-docs) yourself. ``` -------------------------------- ### Contribute to Strudel Kit Discussion Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md This section explains how to add comments to ongoing discussions on GitHub. It details logging in, navigating to the discussions page, selecting a thread, and leaving comments. It also covers replying to specific comments, tagging users with '@', and upvoting comments or discussions. ```Markdown 1. Log into Github. 2. Go to [the Discussions page](https://github.com/orgs/strudel-science/discussions). 3. Search through the list of existing discussion threads and click on the one you’re interested in. 4. You may leave whatever comment you wish, so long as it abides by our [Code of Conduct](https://github.com/strudel-science/strudel-kit/blob/5545943ad9d5a1e6cf5d719ee1ad3e7be6fd43cc/CODE_OF_CONDUCT.md). Discussions allow you to leave top level comments by scrolling to the bottom of the page and writing something in the “Add a comment” field. Alternatively, you can reply to someone else’s response by visiting their comment within a discussion and commenting in the field that has the “Write a reply” prompt. Github allows you to get others’ attention by tagging them. You might pull someone into a discussion by typing “@” in the text field and then typing their name or username. For example, you can tag Cody O'Donnell by typing @codytodonnell. If you want to show support for an idea or draw attention to a topic, you can upvote [comments](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#upvoting-a-comment) and [discussions](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#upvoting-a-discussion). ``` -------------------------------- ### File or Fix a Bug in Strudel Kit Source: https://github.com/strudel-science/strudel-kit/blob/main/CONTRIBUTING.md This section details the process for reporting bugs or contributing fixes for the Strudel Kit. It instructs users to file a bug report if a problem is found and to indicate their intention to fix a bug in the relevant issue, following the general procedures for version-controlled changes. ```Markdown If there is a problem with the STRUDEL Kit, you can [file a bug](#opening-an-issue) to say so. If you want to fix a bug yourself, [say so in the relevant issue](#commenting-on-an-issue) and follow the same steps as those described in the [General Procedures](#general-procedures-for-version-controlled-changes) section. ``` -------------------------------- ### Change Primary Color Palette Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/4-customize-app.md Modifies the primary color palette for the STRUDEL app. This includes setting the main, light, dark, and contrast text colors for the primary theme. The example shows changing the primary main color to amaranth red and then updating light and dark variants. ```javascript primary: { main: '#dd4050', light: '#42a5f5', dark: '#1565c0', contrastText: '#fff', } ``` ```javascript primary: { main: '#dd4050', light: '#e36370', dark: '#bf2231', contrastText: '#fff', } ``` -------------------------------- ### STRUDEL CLI Task Flow Configuration Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/cli/overview.md Configures a new task flow for a STRUDEL application, specifying its name, template, and various page-related titles and descriptions. ```json { "name": "my-taskflow", "template": "compare-data", "compareItem": "scenario", "compareItemPlural": "scenarios", "mainPageTitle": "Compare Data App", "mainPageDescription": "Description of this app section", "newItemPageTitle": "Compare Data App", "newItemPageDescription": "Description of this app section", "comparePageDescription": "Description of this app section" } ``` -------------------------------- ### Wrap Title Text with Typography Component (React/TSX) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/usrse.mdx This code wraps the 'Hello World!' text in HelloWorldPage with Material UI's Typography component, allowing for semantic and styled headings. ```tsx const HelloWorldPage: React.FC = () => { return (
Hello World!
); }; export default HelloWorldPage; ``` -------------------------------- ### Generate Monitor Activities Task Flow Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/task-flows/monitor-activities.mdx Command to generate the Monitor Activities Task Flow using degit. This command clones the necessary files from the strudel-science/strudel-kit repository into a local directory named 'my-monitor-activities'. ```bash cd src/pages npx degit strudel-science/strudel-kit/src/pages/monitor-activities my-monitor-activities ``` -------------------------------- ### STRUDEL Page Title Configuration Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/usrse.mdx Sets the title and description for a page within the STRUDEL application's index configuration. ```javascript { pages: { index: { title: "Biodiversity Explorer", description: "Explore species observations around the world.", ... } } } ``` -------------------------------- ### Project Directory Structure Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/getting-started/project-structure.mdx This snippet displays the hierarchical file and directory structure of the STRUDEL project. It includes directories for GitHub actions, pre-commit hooks, testing, documentation, static files, source code (components, pages, hooks, types, utils), and various configuration files for ESLint, Prettier, Git, TypeScript, and Vite. ```tree ├── .github # GitHub actions and templates ├── .husky # Pre-commit hook to run before "git commit" ├── cypress # End-to-end testing ├── docs # Docs app, can be deleted or replaced with your own docs ├── public # Static files e.g. images, data, favicon ├── src │ ├── components # Components that are shared across the app │ ├── context # State variables and actions shared across the app │ ├── hooks # Custom React functions for data fetching and more │ ├── pages # File-based router entry point (TanStack Router) │ │ ├── compare-data # Task Flow template (/compare-data page) │ │ ├── contribute-data # Task Flow template (/contribute-data page) │ │ ├── explore-data # Task Flow template (/explore-data page) │ │ ├── monitor-activities # Task Flow template (/monitor-activites page) │ │ ├── playground # Playground template (/playground page) │ │ ├── run-computation # Task Flow template (/run-computation page) │ │ ├── search-data-repositories # Task Flow template (/search-data-repositories page) │ │ ├── __root.tsx # Wrapper component for all pages │ │ └── index.tsx # Home page (/ page) │ ├── types # TypeScript definitions used across the app │ ├── utils # Utility functions used across the app │ ├── App.tsx # Top-level app component │ ├── declarations.d.ts # Type extensions for MUI │ ├── index.css # Base CSS styles │ ├── main.tsx # App entry point │ ├── routeTree.gen.ts # Auto-generated route tree by TanStack Router (do not edit manually) │ ├── theme.tsx # Full MUI theme configuration │ └── vite-env.d.ts ├── .eslintrc.json # ESLint configuration ├── .gitignore # Files for git to ignore ├── .lintstagedrc.json # Linstaged configuration (executed on precommit) ├── .prettierrc.json # Prettier configuration for code formatting ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── COPYRIGHT.md ├── LICENSE ├── README.md ├── cypress.config.ts # Testing configuration ├── index.html # HTML entry point ├── package-lock.json # Full dependency list ├── package.json # Dependencies and project metadata ├── tsconfig.json # TypeScript configuration ├── tsconfig.node.json # Vite-level TypeScript configuration ├── tsr.config.json # TanStack Router configuration └── vite.config.ts # Vite configuration ``` -------------------------------- ### Data Inputs Page (_layout/$id/_layout/data-inputs.tsx) Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/task-flows/run-computation.mdx The data inputs page for the Run Computation Task Flow. This is the first step where input data for the computation is displayed, with customization options for the inputs table data source. ```tsx import Divider from '@mui/material/Divider'; import { CodeAndPreviewButtons } from '@site/src/components/CodeAndPreviewButtons'; // ... other imports function DataInputsPage() { // ... component logic return (
{/* ... content */} {/* ... customizable items */}
); } export default DataInputsPage; ``` -------------------------------- ### Task Flow Directory Structure Source: https://github.com/strudel-science/strudel-kit/blob/main/docs/docs/tutorials/basic-app-with-strudel/2-configure-taskflow.md Illustrates the typical file structure within a Strudel Kit Task Flow directory, including components, tests, and page definition files. ```python solar-system ├── -components │ ├── DataView.tsx # Data grid component │ ├── DataViewHeader.tsx # Header above data table │ ├── FiltersPanel.tsx # Left side panel of filters │ └── PreviewPanel.tsx # Panel displayable on row-click ├── -tests │ └── explore-data.cy.ts # End-to-end test for this Task Flow ├── $id.tsx # Detail page for a single row └── index.tsx # Data explorer page ```