Merge pull request #122 from codytodonnell/feature/tutorial-doc

Add tutorial doc and other fixes
strudel-science · Sep 16, 2024 · ee37797 · ee37797
2 parents f0c6bc1 + ec48290
commit ee37797
Show file tree

Hide file tree

Showing 16 changed files with 503 additions and 77 deletions.
diff --git a/docs/docs/guides/tutorials/usrse/index.mdx b/docs/docs/guides/tutorials/usrse/index.mdx
diff --git a/strudel-taskflows/src/components/Footer.tsx b/strudel-taskflows/src/components/Footer.tsx
@@ -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>
               )}

diff --git a/strudel-taskflows/src/components/TopBar.tsx b/strudel-taskflows/src/components/TopBar.tsx
@@ -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>

diff --git a/strudel-taskflows/src/pages/explore-data/[id].tsx b/strudel-taskflows/src/pages/explore-data/[id].tsx
@@ -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;

diff --git a/strudel-taskflows/src/pages/explore-data/_components/DataView.tsx b/strudel-taskflows/src/pages/explore-data/_components/DataView.tsx
@@ -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();
     },
@@ -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}

diff --git a/strudel-taskflows/src/pages/explore-data/_components/DataViewHeader.tsx b/strudel-taskflows/src/pages/explore-data/_components/DataViewHeader.tsx
@@ -26,6 +26,7 @@ export const DataViewHeader: React.FC<DataViewHeaderProps> = ({
       spacing={2}
       alignItems="center"
       sx={{
+        overflow: 'hidden',
         padding: 2
       }}
     >

diff --git a/strudel-taskflows/src/pages/explore-data/_components/PreviewPanel.tsx b/strudel-taskflows/src/pages/explore-data/_components/PreviewPanel.tsx
@@ -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

diff --git a/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts b/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts
@@ -5,7 +5,7 @@ export const taskflow: ExploreDataConfig = {
     /**
      * Data definition for the initial items list
      */
-    items: {
+    list: {
       /**
        * URL or path to the data source
        */
@@ -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',

diff --git a/strudel-taskflows/src/pages/explore-data/_config/taskflow.types.ts b/strudel-taskflows/src/pages/explore-data/_config/taskflow.types.ts
@@ -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: {

diff --git a/strudel-taskflows/src/pages/search-data-repositories/_components/FiltersPanel.tsx b/strudel-taskflows/src/pages/search-data-repositories/_components/FiltersPanel.tsx
@@ -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

diff --git a/strudel-taskflows/src/pages/search-data-repositories/_config/taskflow.config.ts b/strudel-taskflows/src/pages/search-data-repositories/_config/taskflow.config.ts
@@ -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",
@@ -76,9 +76,9 @@ export const taskflow: SearchDataRepositoriesConfig = {
         },
         {
           field: "tags",
-          displayName: "Tags",
-          filterType: "CheckboxList",
-          props: {
+          label: "Tags",
+          filterComponent: "CheckboxList",
+          filterProps: {
             options: [
               {
                 label: "Boreal forest",
@@ -97,8 +97,8 @@ export const taskflow: SearchDataRepositoriesConfig = {
         },
         {
           field: "publication_date",
-          displayName: "Publication Date",
-          filterType: "date range"
+          label: "Publication Date",
+          filterComponent: "DateRange"
         }
       ]
     }

diff --git a/strudel-taskflows/src/pages/search-data-repositories/_config/taskflow.types.ts b/strudel-taskflows/src/pages/search-data-repositories/_config/taskflow.types.ts
@@ -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
       }[]
     }
   }

diff --git a/strudel-taskflows/src/pages/search-data-repositories/_context/ContextProvider.tsx b/strudel-taskflows/src/pages/search-data-repositories/_context/ContextProvider.tsx
@@ -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)]);

diff --git a/strudel-taskflows/src/theme.tsx b/strudel-taskflows/src/theme.tsx
@@ -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',
@@ -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.

diff --git a/strudel-taskflows/src/utils/queryParams.utils.ts b/strudel-taskflows/src/utils/queryParams.utils.ts
@@ -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())
         }
     }
   });

diff --git a/strudel-taskflows/strudel.config.ts b/strudel-taskflows/strudel.config.ts
@@ -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'
   }
 }