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