Run Computation
Links
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.
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: "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: "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: "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: "default/run-computation/results_bar_chart.json"
},
results: {
/**
* Source of the data for the table on the results page.
*/
source: "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"
}
]
}
}
}