Merge pull request #120 from codytodonnell/feature/detail-page

codytodonnell · web-flow · commit 86632e45b587 · 2024-08-29T14:08:17.000-07:00
Update detail page queries
diff --git a/strudel-taskflows/src/components/CheckboxList.tsx b/strudel-taskflows/src/components/CheckboxList.tsx
@@ -39,8 +39,9 @@ export const CheckboxList: React.FC<CheckboxListProps> = ({
   };
 
   useEffect(() => {
-    console.log(checkValues)
-    if (onChange) onChange(checkValues);
+    if (onChange && checkValues?.length !== values?.length) {
+      onChange(checkValues);
+    }
   }, [checkValues]);
 
   useEffect(() => {
diff --git a/strudel-taskflows/src/components/FilterContext.tsx b/strudel-taskflows/src/components/FilterContext.tsx
@@ -43,15 +43,10 @@ function filterReducer(state: FilterState, action: FilterAction): FilterState {
       } else if (filter.value) {
         activeFilters.push(filter);
       }
-      console.log(activeFilters);
       return {
         ...state,
         activeFilters
       }
-      // return {
-      //   ...state,
-      //   activeFilters: { ...state.activeFilters, [action.payload.field]: action.payload.value }
-      // }
     }
     case 'SET_ACTIVE_FILTERS': {
       return {
@@ -95,14 +90,6 @@ export const FilterContext: React.FC<FilterContextProps> = ({
     if (onChange) onChange(state.activeFilters);
   }, [JSON.stringify(state.activeFilters)]);
 
-  /**
-   * If activeFilters is changed from outside the context (e.g. filters are reset)
-   * then the new value should be dispatched.
-   */
-  // useEffect(() => {
-  //   dispatch({ type: 'SET_ACTIVE_FILTERS', payload: activeFilters });
-  // }, [activeFilters]);
-
   return (
     <FilterContextAPI.Provider value={value}>
       {children}
diff --git a/strudel-taskflows/src/components/PageHeader.tsx b/strudel-taskflows/src/components/PageHeader.tsx
@@ -3,7 +3,7 @@ import { PaperProps, Breadcrumbs, Link, Paper, Stack, Typography } from '@mui/ma
 import HomeIcon from '@mui/icons-material/Home';
 
 interface PageHeaderProps extends PaperProps {
-  pageTitle: string;
+  pageTitle: React.ReactNode;
   breadcrumbTitle?: string;
   description?: string;
   actions?: React.ReactNode;
diff --git a/strudel-taskflows/src/pages/explore-data/[id].tsx b/strudel-taskflows/src/pages/explore-data/[id].tsx
@@ -3,31 +3,56 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { PageHeader } from '../../components/PageHeader';
 import { taskflow } from './_config/taskflow.config';
+import { useQuery } from '@tanstack/react-query';
+
+interface DataDetailPageProps {
+  item: any
+}
 
 /**
- * Work in Progress:
- * 
  * Detail view for a selected row from the` <DataExplorer>` in the explore-data Task Flow.
  */
-const DataDetailPage: React.FC = () => {
+const DataDetailPage: React.FC<DataDetailPageProps> = ({ item }) => {
   const params = useParams();
+  const dataSource = taskflow.data.item.source;
   const dataIdField = taskflow.data.items.idField;
   const columns = taskflow.pages.index.tableColumns;
-  const data: any[] = [];
-  const entity = data?.find((d) => {
-    if (params.id) {
-      return d[dataIdField].toString() === params.id.toString();
+  const queryMode = taskflow.data.items.queryMode;
+  const staticParams = taskflow.data.items.staticParams;
+  let queryParams = { ...staticParams };
+  const queryString = new URLSearchParams(queryParams).toString();
+  let queryFn;
+  if (queryMode === 'server') {
+    queryFn = async (): Promise<any> => {
+      const response = await fetch(`${dataSource}/${params.id}?${queryString}`);
+      return await response.json();
+    }
+  } else if (queryMode === 'client') {
+    queryFn = async (): Promise<any> => {
+      const response = await fetch(`${dataSource}?${queryString}`);
+      const results = await response.json();
+      return results?.find((d: any) => {
+        if (params.id) {
+          return d[dataIdField].toString() === params.id.toString();
+        }
+      });
     }
+  }
+
+
+  // Define query for this page and fetch data items
+  const { isPending, isFetching, isError, data, error } = useQuery({
+    queryKey: ['item', params.id, queryParams],
+    queryFn,
   });
-  const entityTitle = entity ? entity[columns[0].field] : 'Not Found';
 
   /**
    * Content to render on the page for this component
    */
   return (
     <Box>
       <PageHeader
-        pageTitle={entityTitle}
+        pageTitle={data ? data[dataIdField] : ''}
         breadcrumbTitle="Data Detail"
         sx={{
           marginBottom: 1,
@@ -46,17 +71,10 @@ const DataDetailPage: React.FC = () => {
                 {columns[1].field}
               </Typography>
               <Typography>
-                {entity && entity[columns[1].field]}
+                {data && data[columns[1].field]}
               </Typography>
             </Stack>
           </Paper>
-          <Paper
-            sx={{
-              padding: 2
-            }}
-          >
-            More coming soon!
-          </Paper>
         </Stack>
       </Container>
     </Box>
diff --git a/strudel-taskflows/src/pages/explore-data/_config/exoplanets.config.ts b/strudel-taskflows/src/pages/explore-data/_config/exoplanets.config.ts
@@ -2,9 +2,12 @@ import { ExploreDataConfig } from "./taskflow.types";
 
 export const taskflow: ExploreDataConfig = {
   data: {
+    /**
+     * Data definition for the initial items list
+     */
     items: {
       /**
-       * Source of the data for the initial list of items on the main page.
+       * URL or path to the data source
        */
       source: "https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI",
       /**
@@ -15,6 +18,21 @@ export const taskflow: ExploreDataConfig = {
        * Method by which data should be filtered, either client or server.
        */
       queryMode: "client",
+      /**
+       * Key-value object of params that should always be included in the query URL
+       */
+      staticParams: {
+        table: 'cumulative',
+        format: 'json'
+      }
+    },
+    /**
+     * Data definition for the item detail page
+     */
+    item: {
+      source: "https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI",
+      idField: "kepoi_name",
+      queryMode: "client",
       staticParams: {
         table: 'cumulative',
         format: 'json'
@@ -42,22 +60,22 @@ export const taskflow: ExploreDataConfig = {
         },
         {
           field: "kepoi_name",
-          headerName: "Name",
+          headerName: "Kepler OI Name",
           width: 150
         },
         {
-          field: "koi_disposition",
-          headerName: "koi_disposition",
+          field: "kepler_name",
+          headerName: "Kepler Name",
           width: 150
         },
         {
-          field: "koi_pdisposition",
-          headerName: "koi_pdisposition",
+          field: "koi_disposition",
+          headerName: "Disposition",
           width: 150
         },
         {
           field: "koi_period",
-          headerName: "koi_period",
+          headerName: "Period",
           width: 150,
           type: 'number'
         }
diff --git a/strudel-taskflows/src/pages/explore-data/_config/gbif.config.ts b/strudel-taskflows/src/pages/explore-data/_config/gbif.config.ts
@@ -2,9 +2,12 @@ import { ExploreDataConfig } from "./taskflow.types";
 
 export const taskflow: ExploreDataConfig = {
   data: {
+    /**
+     * Data definition for the initial items list
+     */
     items: {
       /**
-       * Source of the data for the initial list of items on the main page.
+       * URL or path to the data source
        */
       source: "https://api.gbif.org/v1/occurrence/search",
       /**
@@ -14,7 +17,20 @@ export const taskflow: ExploreDataConfig = {
       /**
        * Method by which data should be filtered, either client or server.
        */
-      queryMode: "server"
+      queryMode: "server",
+      /**
+       * Key-value object of params that should always be included in the query URL
+       */
+      staticParams: null
+    },
+    /**
+     * Data definition for the item detail page
+     */
+    item: {
+      source: "https://api.gbif.org/v1/occurrence",
+      idField: "key",
+      queryMode: "server",
+      staticParams: null
     }
   },
   pages: {
diff --git a/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts b/strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts
@@ -2,9 +2,12 @@ import { ExploreDataConfig } from "./taskflow.types";
 
 export const taskflow: ExploreDataConfig = {
   data: {
+    /**
+     * Data definition for the initial items list
+     */
     items: {
       /**
-       * Source of the data for the initial list of items on the main page.
+       * URL or path to the data source
        */
       source: "https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI",
       /**
@@ -15,6 +18,21 @@ export const taskflow: ExploreDataConfig = {
        * Method by which data should be filtered, either client or server.
        */
       queryMode: "client",
+      /**
+       * Key-value object of params that should always be included in the query URL
+       */
+      staticParams: {
+        table: 'cumulative',
+        format: 'json'
+      }
+    },
+    /**
+     * Data definition for the item detail page
+     */
+    item: {
+      source: "https://exoplanetarchive.ipac.caltech.edu/cgi-bin/nstedAPI/nph-nstedAPI",
+      idField: "kepoi_name",
+      queryMode: "client",
       staticParams: {
         table: 'cumulative',
         format: 'json'
@@ -42,22 +60,22 @@ export const taskflow: ExploreDataConfig = {
         },
         {
           field: "kepoi_name",
-          headerName: "Name",
+          headerName: "Kepler OI Name",
           width: 150
         },
         {
-          field: "koi_disposition",
-          headerName: "koi_disposition",
+          field: "kepler_name",
+          headerName: "Kepler Name",
           width: 150
         },
         {
-          field: "koi_pdisposition",
-          headerName: "koi_pdisposition",
+          field: "koi_disposition",
+          headerName: "Disposition",
           width: 150
         },
         {
           field: "koi_period",
-          headerName: "koi_period",
+          headerName: "Period",
           width: 150,
           type: 'number'
         }
diff --git a/strudel-taskflows/src/pages/explore-data/_config/taskflow.types.ts b/strudel-taskflows/src/pages/explore-data/_config/taskflow.types.ts
@@ -13,13 +13,13 @@ export interface ExploreDataConfig {
       source: string,
       idField: string,
       queryMode: 'client' | 'server',
-      staticParams?: Record<string, string>
+      staticParams?: Record<string, string> | null
     },
     [key: string]: {
       source: string,
       idField: string,
       queryMode: 'client' | 'server',
-      staticParams?: Record<string, string>
+      staticParams?: Record<string, string> | null
     }
   },
   pages: {
diff --git a/strudel-taskflows/src/pages/explore-data/index.tsx b/strudel-taskflows/src/pages/explore-data/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Paper } from '@mui/material';
+import { Box, Paper, Stack } from '@mui/material';
 import React, { useState } from 'react';
 import { FilterContext } from '../../components/FilterContext';
 import { PageHeader } from '../../components/PageHeader';
@@ -41,17 +41,23 @@ const DataExplorer: React.FC = () => {
             padding: 2,
           }}
         />
-        <Grid container spacing={1}>
-          {showFiltersPanel && (
-            <Grid item xs={2}>
-              <FiltersPanel onClose={handleCloseFilters} />
-            </Grid>
-          )}
-          <Grid item xs={getMainColumnSize(showFiltersPanel, !!previewItem)}>
+        <Box>
+          <Stack direction="row">
+            {showFiltersPanel && (
+              <Box
+                sx={{
+                  width: '350px'
+                }}
+              >
+                <FiltersPanel onClose={handleCloseFilters} />
+              </Box>
+            )}
             <Paper
               elevation={0}
               sx={{
-                minHeight: '600px'
+                flex: 1,
+                minHeight: '600px',
+                minWidth: 0,
               }}
             >
               <DataViewHeader
@@ -64,28 +70,20 @@ const DataExplorer: React.FC = () => {
                 setPreviewItem={setPreviewItem}
               />
             </Paper>
-          </Grid>
-          {previewItem && (
-            <Grid item xs={4}>
-              <PreviewPanel previewItem={previewItem} onClose={handleClosePreview} />
-            </Grid>
-          )}
-        </Grid>
+            {previewItem && (
+              <Box
+                sx={{
+                  minWidth: '400px'
+                }}
+              >
+                <PreviewPanel previewItem={previewItem} onClose={handleClosePreview} />
+              </Box>
+            )}
+          </Stack>
+        </Box>
       </Box>
     </FilterContext>
   )
 }
 
-const getMainColumnSize = (showFiltersPanel: boolean, showPreviewPanel: boolean) => {
-  if (!showFiltersPanel && !showPreviewPanel) {
-    return 12;
-  } else if (showFiltersPanel && !showPreviewPanel) {
-    return 10;
-  } else if (!showFiltersPanel && showPreviewPanel) {
-    return 8;
-  } else if (showFiltersPanel && showPreviewPanel) {
-    return 6;
-  }
-}
-
 export default DataExplorer;
