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: "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"
        }
      ]
    }
  }
}