Skip to main content

Compare Data

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