Skip to main content

Search Data Repositories

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',
				},
			],
		},
	},
};