Skip to content

Commit

Permalink
Merge pull request #122 from codytodonnell/feature/tutorial-doc
Browse files Browse the repository at this point in the history
Add tutorial doc and other fixes
  • Loading branch information
codytodonnell authored Sep 16, 2024
2 parents f0c6bc1 + ec48290 commit ee37797
Show file tree
Hide file tree
Showing 16 changed files with 503 additions and 77 deletions.
420 changes: 420 additions & 0 deletions docs/docs/guides/tutorials/usrse/index.mdx

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion strudel-taskflows/src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const Footer: React.FC = () => {
{config.footer.image && (
<AppLink to="/">
<ImageWrapper height={60}>
<img src={config.footer.image} />
<img src={`${import.meta.env.BASE_URL}/${config.footer.image}`} />
</ImageWrapper>
</AppLink>
)}
Expand Down
2 changes: 1 addition & 1 deletion strudel-taskflows/src/components/TopBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const TopBar: React.FC = () => {
)}
{config.navbar.logo && (
<ImageWrapper height={30}>
<img src={config.navbar.logo} />
<img src={`${import.meta.env.BASE_URL}/${config.navbar.logo}`} />
</ImageWrapper>
)}
</AppLink>
Expand Down
8 changes: 4 additions & 4 deletions strudel-taskflows/src/pages/explore-data/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ interface DataDetailPageProps {
*/
const DataDetailPage: React.FC<DataDetailPageProps> = ({ item }) => {
const params = useParams();
const dataSource = taskflow.data.item.source;
const dataIdField = taskflow.data.items.idField;
const dataSource = taskflow.data.detail.source;
const dataIdField = taskflow.data.detail.idField;
const columns = taskflow.pages.index.tableColumns;
const queryMode = taskflow.data.items.queryMode;
const staticParams = taskflow.data.items.staticParams;
const queryMode = taskflow.data.detail.queryMode;
const staticParams = taskflow.data.detail.staticParams;
let queryParams = { ...staticParams };
const queryString = new URLSearchParams(queryParams).toString();
let queryFn;
Expand Down
34 changes: 21 additions & 13 deletions strudel-taskflows/src/pages/explore-data/_components/DataView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,34 @@ export const DataView: React.FC<DataViewProps> = ({ searchTerm, setPreviewItem }
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [offset, setOffest] = useState(page * pageSize);
const dataSource = taskflow.data.items.source;
const dataIdField = taskflow.data.items.idField;
const dataSource = taskflow.data.list.source;
const dataIdField = taskflow.data.list.idField;
const columns = taskflow.pages.index.tableColumns;
const filterConfigs = taskflow.pages.index.tableFilters;
const queryMode = taskflow.data.items.queryMode;
const staticParams = taskflow.data.items.staticParams;
let queryParams = { ...staticParams };
const queryMode = taskflow.data.list.queryMode;
const staticParams = taskflow.data.list.staticParams;
// If in server mode, create query params from the active filters
let queryParams = queryMode === 'server' ? createFilterParams(activeFilters, filterConfigs) : new URLSearchParams();
// Tack on the static query params
if (staticParams) {
Object.keys(staticParams).forEach((param) => {
queryParams.append(param, staticParams[param].toString());
})
}
// If in server mode, tack on pagination query params
if (queryMode === 'server') {
queryParams = {
limit: pageSize.toString(),
offset: offset.toString(),
...createFilterParams(activeFilters, filterConfigs)
}
queryParams.append('limit', pageSize.toString());
queryParams.append('offset', offset.toString());
}
const queryString = new URLSearchParams(queryParams).toString()

// The queryKey only needs to change dynamically in server mode
const queryKey = queryMode === 'server' ? ['items', { ...activeFilters, pageSize, offset }] : ['items'];

// Define query for this page and fetch data items
const { isPending, isFetching, isError, data, error } = useQuery({
queryKey: ['items', queryParams],
queryKey,
queryFn: async (): Promise<any> => {
const queryString = queryParams.toString()
const response = await fetch(`${dataSource}?${queryString}`);
return await response.json();
},
Expand Down Expand Up @@ -94,7 +102,7 @@ export const DataView: React.FC<DataViewProps> = ({ searchTerm, setPreviewItem }
)}
<SciDataGrid
rows={queryMode === 'server' ? data.results : filterData(data, activeFilters, filterConfigs, searchTerm)}
rowCount={queryMode === 'server' ? data.count : null}
rowCount={queryMode === 'server' ? data.count : undefined}
pagination
paginationMode={queryMode}
onPaginationModelChange={handlePaginationModelChange}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const DataViewHeader: React.FC<DataViewHeaderProps> = ({
spacing={2}
alignItems="center"
sx={{
overflow: 'hidden',
padding: 2
}}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ interface PreviewPanelProps {
*/
export const PreviewPanel: React.FC<PreviewPanelProps> = ({ previewItem, onClose }) => {
const columns = taskflow.pages.index.tableColumns;
const dataIdField = taskflow.data.items.idField;
const dataIdField = taskflow.data.list.idField;

/**
* Content to render on the page for this component
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const taskflow: ExploreDataConfig = {
/**
* Data definition for the initial items list
*/
items: {
list: {
/**
* URL or path to the data source
*/
Expand All @@ -29,7 +29,7 @@ export const taskflow: ExploreDataConfig = {
/**
* Data definition for the item detail page
*/
item: {
detail: {
source: "https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI",
staticParams: {
table: 'cumulative',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,23 @@ export interface ExploreDataConfig {
/** Attributes that are used across the Task Flow */
properties?: Record<string, any>,
data: {
items: {
list: {
source: string,
staticParams?: Record<string, string> | null,
idField: string,
queryMode: 'client' | 'server',
},
detail: {
source: string,
staticParams?: Record<string, string> | null,
idField: string,
queryMode: 'client' | 'server',
staticParams?: Record<string, string> | null
},
[key: string]: {
source: string,
staticParams?: Record<string, string> | null,
idField: string,
queryMode: 'client' | 'server',
staticParams?: Record<string, string> | null
}
},
pages: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import { Stack } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers';
import React from 'react';
import { CheckboxList } from '../../../components/CheckboxList';
import { FilterField } from '../../../components/FilterField';
import { Filters } from '../../../components/Filters';
import { StrudelSlider } from '../../../components/StrudelSlider';
import { FilterConfig } from '../../../types/filters.types';
import { useSearchDataRepositories } from '../_context/ContextProvider';
import { setFilter } from '../_context/actions';

interface FiltersPanelProps {
onClose: () => any
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ export const taskflow: SearchDataRepositoriesConfig = {
/**
* Text to display in the label for the filter.
*/
displayName: "Category",
label: "Category",
/**
* The kind of filter component and function to use. Must be "CheckboxList", "Slider", or "data range".
*/
filterType: "CheckboxList",
filterComponent: "CheckboxList",
/**
* Extra options to pass to the filter based on the filter type.
*/
props: {
filterProps: {
options: [
{
label: "Groundwater",
Expand All @@ -76,9 +76,9 @@ export const taskflow: SearchDataRepositoriesConfig = {
},
{
field: "tags",
displayName: "Tags",
filterType: "CheckboxList",
props: {
label: "Tags",
filterComponent: "CheckboxList",
filterProps: {
options: [
{
label: "Boreal forest",
Expand All @@ -97,8 +97,8 @@ export const taskflow: SearchDataRepositoriesConfig = {
},
{
field: "publication_date",
displayName: "Publication Date",
filterType: "date range"
label: "Publication Date",
filterComponent: "DateRange"
}
]
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ export interface SearchDataRepositoriesConfig {
},
cardFilters: {
field: string,
displayName: string,
filterType: 'CheckboxList' | 'Slider' | 'date range',
props?: object
label: string,
filterComponent: 'CheckboxList' | 'Slider' | 'DateRange' | 'TextField',
filterProps?: object
}[]
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export const SearchDataRepositoriesProvider: React.FC<SearchDataRepositoriesProv

useEffect(() => {
if (state.data) {
const filteredData = filterData(state.data, state.activeFilters, state.searchTerm);
const filteredData = filterData(state.data, state.activeFilters, state.filters, state.searchTerm);
dispatch(setFilteredData(filteredData));
}
}, [state.data, state.searchTerm, JSON.stringify(state.activeFilters)]);
Expand Down
37 changes: 19 additions & 18 deletions strudel-taskflows/src/theme.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
import { PaletteMode, createTheme } from "@mui/material";
import { createTheme } from "@mui/material";
import type {} from '@mui/x-data-grid/themeAugmentation';
import { config } from "../strudel.config";

/**
* MUI Theme object for setting app-wide and component-wide styles.
* Specify colors, spacing, fonts, and more.
* Learn more about theme options: https://mui.com/material-ui/customization/theming/
*/
export const theme = createTheme({
/** Color palette to use throughout the app */
// Color palette to use throughout the app
palette: {
mode: config.theme.mode as PaletteMode || 'light',
mode: 'light',
background: {
default: config.theme.backgroundColor || '#F5F5F6',
paper: config.theme.paperBackgroundColor || '#fff',
default: '#F5F5F6',
paper: '#fff',
},
primary: {
main: config.theme.primaryColor || '#1976d2',
// light: '#42a5f5',
// dark: '#1565c0',
// contrastText: '#fff',
main: '#1976d2',
// Exclude light, dark, or contrastText to have them
// calculated automatically based on the main color.
light: '#42a5f5',
dark: '#1565c0',
contrastText: '#fff',
},
secondary: {
main: config.theme.secondaryColor || '#9c27b0',
// light: '#ba68c8',
// dark: '#7b1fa2',
// contrastText: '#fff',
main: '#9c27b0',
light: '#ba68c8',
dark: '#7b1fa2',
contrastText: '#fff',
},
info: {
main: '#0288d1',
Expand Down Expand Up @@ -66,21 +67,21 @@ export const theme = createTheme({
900: '#444'
}
},
/** Control the default border radius */
// Control the default border radius
shape: {
borderRadius: 4,
},
/** Control the font, size, and font weights */
// Control the font, size, and font weights
typography: {
htmlFontSize: 16,
fontFamily: `${config.theme.fontFamily}, "Helvetica", "Verdana", "Arial", sans-serif`,
fontFamily: `"Helvetica", "Verdana", "Arial", sans-serif`,
fontSize: 14,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
},
/** Default options for MUI components used throughout the app */
// Default options for MUI components used throughout the app
components: {
/**
* Example component customization.
Expand Down
18 changes: 12 additions & 6 deletions strudel-taskflows/src/utils/queryParams.utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,27 +74,33 @@ export const buildParamsString = (filters: DataFilter[], filterConfigs: FilterCo
}

export const createFilterParams = (filters: DataFilter[], filterConfigs: FilterConfig[]) => {
const params: Record<string, string | number | string[] | number[]> = {};
const params = new URLSearchParams();
filters.forEach((filter, i) => {
const filterConfig = filterConfigs.find((c) => c.field === filter.field);
const options = filterConfig?.paramTypeOptions;
switch(filterConfig?.paramType) {
case 'array-string':
if (Array.isArray(filter.value)) {
const separator = options?.separator || ',';
params[filter.field] = filter.value.join(separator);
console.log(params[filter.field])
params.append(filter.field, filter.value.join(separator));
}
break;
case 'minmax':
if (Array.isArray(filter.value) && options.minParam && options.maxParam) {
params[options.minParam] = filter.value[0];
params[options.maxParam] = filter.value[1];
params.append(options.minParam, filter.value[0].toString());
params.append(options.maxParam, filter.value[1].toString());
}
break;
case 'repeated':
if (Array.isArray(filter.value)) {
filter.value.forEach((value) => {
params.append(filter.field, value.toString());
});
}
break;
default:
if (filter.value) {
params[filter.field] = filter.value
params.append(filter.field, filter.value.toString())
}
}
});
Expand Down
8 changes: 0 additions & 8 deletions strudel-taskflows/strudel.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,5 @@ export const config = {
path: '/playground'
},
]
},
theme: {
mode: 'light',
primaryColor: '#1976d2',
secondaryColor: '#9c27b0',
backgroundColor: '#F5F5F6',
paperBackgroundColor: '#FFFFFF',
fontFamily: '"Helvetica", "Verdana", "Arial", sans-serif'
}
}

0 comments on commit ee37797

Please sign in to comment.