Compare Data
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 compare-data
Generated Files
my-taskflow
├── _config
│ ├── taskflow.config.ts
│ └── taskflow.types.ts
├── _context
│ ├── ContextProvider.tsx
│ └── actions.ts
├── _layout.tsx
├── compare.tsx
├── index.tsx
└── new.tsx
Pages
index.tsx
URL Route: /
First page of the Compare Data Task Flow. Displays a list of selectable records for a user to compare.
compare.tsx
URL Route: /compare
Compare page of the Compare Data Task Flow. When a user selects records to compare and initiates a comparison, this page displays a specialized table for comparing the selected records.
new.tsx
URL Route: /new
New record page of the Compare Data Task Flow. Displays a form for generating a new record in the data.
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 { CompareDataConfig } from "./taskflow.types";
export const taskflow: CompareDataConfig = {
properties: {
/**
* Word (in singular form) to use in the UI for the item being compared.
* For example, if the app is comparing plants, this value should be "plant".
*/
itemName: "scenario",
/**
* Pluralized version of itemName. This is used in the UI when itemName needs to be plural.
* For example, if the app is comparing plants, this value should be "plants".
*/
itemNamePlural: "scenarios",
},
data: {
items: {
/**
* Source of the data for the initial list of items.
*/
source: "default/compare-data/scenarios.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: "Compare Data App",
/**
* Text to appear underneath the title at the top of the initial items list page.
*/
description: "Description of this app section",
/**
* Column definitions for the table on the initial page.
* See all options from MUI's DataGrid: https://mui.com/x/api/data-grid/grid-col-def/
*/
tableColumns: [
{
field: "name",
headerName: "Scenario Name",
width: 200
},
{
field: "description",
headerName: "Description",
width: 200
},
{
field: "analysis_type",
headerName: "Analysis Type",
width: 200
},
{
field: "volumetric_flow_rate",
headerName: "Volumetric Flow Rate",
width: 200,
isComparisonMetric: true
},
{
field: "tss_concentration",
headerName: "TSS Concentration",
width: 200,
isComparisonMetric: true
},
{
field: "cod_concentration",
headerName: "COD Concentration",
width: 200,
isComparisonMetric: true
},
{
field: "tkn_concentration",
headerName: "TKN Concentration",
width: 200,
isComparisonMetric: true
},
{
field: "acetic_acid_concentration",
headerName: "Acetic Acid Concentration",
width: 200,
isComparisonMetric: true
}
]
},
new: {
/**
* Title to appear at the top of the new item page.
*/
title: "New Scenario",
/**
* Text to appear underneath the title at the top of the new item page.
*/
description: "Description of this app section"
},
compare: {
/**
* Title to appear at the top of the comparison page.
*/
title: "Compare Scenarios",
/**
* Text to appear underneath the title at the top of the comparison page.
*/
description: "Description of this app section"
}
}
}