Search Data Repositories

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 search-data-repositories

Generated Files

my-taskflow
├── _components
│  ├── DataListCard.tsx
│  ├── DataListPanel.tsx
│  ├── FiltersPanel.tsx
│  └── PreviewPanel.tsx
├── _config
│  ├── taskflow.config.ts
│  └── taskflow.types.ts
├── _context
│  ├── ContextProvider.tsx
│  └── actions.ts
├── [id].tsx
├── _layout.tsx
└── index.tsx

Pages

index.tsx

URL Route: /
First page of the Search Data Repositories Task Flow. Displays a list of data cards, filters panel, and a data preview panel.

[id].tsx

URL Route: /:id
Data detail page of the Search Data Repositories Task Flow. When a user drills into a record from the main page, the detail page shows more data about the selected item.

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 { SearchDataRepositoriesConfig } from "./taskflow.types";

export const taskflow: SearchDataRepositoriesConfig = {
  data: {
    items: {
      /**
       * Source of the data for the initial list of items on the main page.
       */
      source: "data/default/search-data-repositories/datasets.json",
      /**
       * Field name for the unique ID in the data source.
       */
      idField: "id"
    }
  },
  pages: {
    index: {
      /**
       * Title to appear at the top of the main page.
       */
      title: "Search Data Repositories App",
      /**
       * Text to appear underneath the title at the top of the main page.
       */
      description: "Description of this app section",
      /**
       * Map of card sections to property names in the data source. 
       * This determines the content of the cards on the main page.
       */
      cardFields: {
        title: "title",
        content: "summary",
        tags: "tags"
      },
      /**
       * List of filters to display on the main page and use to filter the main data cards. 
       * Each filter has a definition object to determine how it renders and functions.
       */
      cardFilters: [
        {
          /**
           * Exact name of the property field in the data to filter on. 
           */
          field: "category",
          /**
           * Text to display in the label for the filter.
           */
          label: "Category",
          /**
           * The kind of filter component and function to use. Must be "CheckboxList", "Slider", or "data range".
           */
          filterComponent: "CheckboxList",
          /**
           * Extra options to pass to the filter based on the filter type.
           */
          filterProps: {
            options: [
              {
                label: "Groundwater",
                value: "Groundwater"
              },
              {
                label: "Fires",
                value: "Fires"
              },
              {
                label: "Floods",
                value: "Floods"
              },
              {
                label: "Earthquakes",
                value: "Earthquakes"
              }
            ]
          }
        },
        {
          field: "tags",
          label: "Tags",
          filterComponent: "CheckboxList",
          filterProps: {
            options: [
              {
                label: "Boreal forest",
                value: "Boreal forest"
              },
              {
                label: "Carbon and greenhouse gas emissions",
                value: "Carbon and greenhouse gas emissions"
              },
              {
                label: "Ecology",
                value: "Ecology"
              }
            ]
          }
        },
        {
          field: "publication_date",
          label: "Publication Date",
          filterComponent: "DateRange"
        }
      ]
    }
  }
}