Run Computation

Links

• Description and guidelines
• Live example
• Source code

Use this Task Flow

Before continuing, make sure you have followed the instructions to install the strudel-cli.

From the root of your app, run the following on the command line:

strudel add-taskflow my-taskflow --template run-computation

Generated Files

my-taskflow
├── _components
│  └── NewScenarioModal.tsx
├── _config
│  ├── taskflow.config.ts
│  └── taskflow.types.ts
├── _context
│  ├── ContextProvider.tsx
│  └── actions.ts
├── [id]
│  ├── _layout.tsx
│  ├── data-inputs.tsx
│  ├── results.tsx
│  ├── running.tsx
│  └── settings.tsx
├── _layout.tsx
└── index.tsx

Pages

index.tsx

URL Route: /
First page of the Run Computation Task Flow. Displays a list of existing runs and a button to create a new run.

[id]/data-inputs.tsx

URL Route: /:id/data-inputs
Data inputs page of the Run Computation Task Flow. The first step in a computation which displays a set of input data for the computation.

[id]/settings.tsx

URL Route: /:id/settings
Settings page of the Run Computation Task Flow. Displays a form for editing parameters to pass to the computation when it runs.

[id]/running.tsx

URL Route: /:id/running
Running page of the Run Computation Task Flow. Displays a progress bar and message while the computation is in progress.

[id]/results.tsx

URL Route: /:id/results
Results page of the Run Computation Task Flow. Displays output data and visualizations from the computation.

Configuration

This Task Flow can be configured from the taskflow.config.ts file in the _config directory of the generated template files.

taskflow.config.ts

import { RunComputationConfig } from './taskflow.types';

export const taskflow: RunComputationConfig = {
	properties: {
		/**
		 * Word (in singular form) to use in the UI for the distinct computation runs.
		 * For example, if each run should be called a "scenario", this value should be `"scenario"`
		 */
		itemName: 'scenario',
		/**
		 * Pluralized version of `compareItem`. This is used in the UI when `compareItem` needs to be plural.
		 * For example, if each run should be called a "scenario", this value should be `"scenarios"`.
		 */
		itemNamePlural: 'scenarios',
	},
	data: {
		items: {
			/**
			 * Source of the data for the initial list of items.
			 */
			source: 'data/default/run-computation/list.json',
			/**
			 * Field name for the unique ID in the data source.
			 */
			idField: 'id',
		},
		inputs: {
			/**
			 * Source of the data for the table on the inputs page.
			 */
			source: 'data/default/run-computation/inputs.json',
			/**
			 * Field name for the unique ID in the data source.
			 */
			idField: 'id',
		},
		lineChart: {
			/**
			 * Source of the data for the line chart on the results page.
			 * The return format must be compatible with Plotly's data attribue.
			 * See the [Plotly Figure Reference](https://plotly.com/javascript/reference/index/) for more details.
			 */
			source: 'data/default/run-computation/results_line_chart.json',
		},
		barChart: {
			/**
			 * Source of the data for the bar chart on the results page.
			 * The return format must be compatible with Plotly's data attribue.
			 * See the [Plotly Figure Reference](https://plotly.com/javascript/reference/index/) for more details.
			 */
			source: 'data/default/run-computation/results_bar_chart.json',
		},
		results: {
			/**
			 * Source of the data for the table on the results page.
			 */
			source: 'data/default/run-computation/results_table.json',
			/**
			 * Field name for the unique ID in the data source.
			 */
			idField: 'id',
		},
	},
	pages: {
		index: {
			/**
			 * Title to appear at the top of the initial items list page.
			 */
			title: 'Scenario List',
			/**
			 * Text to appear underneath the title at the top of the initial items list page.
			 */
			description:
				'Scenarios represent a set of analysis inputs / parameters / settings and the results of that analysis.',
			/**
			 * List of column definition objects for the columns in the table on the list page.
			 */
			tableColumns: [
				{
					field: 'name',
					headerName: 'Scenario Name',
					width: 200,
				},
				{
					field: 'analysisType',
					headerName: 'Analysis Type',
					width: 200,
				},
				{
					field: 'createdDate',
					headerName: 'Date Created',
					width: 200,
				},
				{
					field: 'status',
					headerName: 'Status',
					width: 200,
				},
			],
		},
		dataInputs: {
			/**
			 * Title to appear at the top of the inputs page and in the breadcrumbs.
			 */
			title: 'Data Inputs',
			/**
			 * List of column definition objects for the columns in the table on the inputs page.
			 */
			tableColumns: [
				{
					field: 'name',
					headerName: 'Unit Name',
					width: 200,
				},
				{
					field: 'unitType',
					headerName: 'Unit Type',
					width: 200,
				},
				{
					field: 'constraints',
					headerName: 'Constraints',
					width: 200,
				},
				{
					field: 'lowerBound',
					headerName: 'Lower Bound',
					width: 200,
					type: 'number',
				},
				{
					field: 'upperBound',
					headerName: 'Upper Bound',
					width: 200,
					type: 'number',
				},
			],
		},
		settings: {
			/**
			 * Title to appear at the top of the settings page and in the breadcrumbs.
			 */
			title: 'Optimization Settings',
		},
		results: {
			/**
			 * Title to appear at the top of the results page and in the breadcrumbs.
			 */
			title: 'Results',
			/**
			 * List of column definition objects for the columns in the table on the results page.
			 */
			tableColumns: [
				{
					field: 'name',
					headerName: 'Unit Name',
					width: 200,
				},
				{
					field: 'unitType',
					headerName: 'Unit Type',
					width: 200,
				},
				{
					field: 'constraints',
					headerName: 'Constraints',
					width: 200,
				},
				{
					field: 'lowerBound',
					headerName: 'Lower Bound',
					width: 200,
					type: 'number',
				},
				{
					field: 'upperBound',
					headerName: 'Upper Bound',
					width: 200,
					type: 'number',
				},
			],
		},
	},
};