Jmpi 761 update browse component

JeMPI_Apps/JeMPI_LibMPI/src/main/java/org/jembi/jempi/libmpi/dgraph/DgraphQueries.java

@@ -376,9 +376,20 @@ private static String getSimpleSearchQueryFilters(
             Integer distance = param.distance();
             String value = param.value();
             if (distance == -1) {
-               gqlFilters.add("le(" + recordType + "." + fieldName + ", \"" + value + "\")");
+               if (value.contains("_")) {
+                  gqlFilters.add("ge(" + recordType + "." + fieldName + ", \"" + value.substring(0, value.indexOf("_"))
+                        + "\") AND le("
+                        + recordType + "." + fieldName + ", \"" + value.substring(value.indexOf("_") + 1) + "\")");
+               } else {
+                  gqlFilters.add("le(" + recordType + "." + fieldName + ", \"" + value + "\")");
+               }
             } else if (distance == 0) {
-               gqlFilters.add("eq(" + recordType + "." + fieldName + ", \"" + value + "\")");
+               if (value.contains("_")) {
+                   gqlFilters.add(
+                     "eq(" + recordType + "." + fieldName + ", \"" + value.substring(0, value.indexOf("_")) + "\")");
+               } else {
+                  gqlFilters.add("eq(" + recordType + "." + fieldName + ", \"" + value + "\")");
+               }
             } else {
                gqlFilters.add("match(" + recordType + "." + fieldName + ", $" + fieldName + ", " + distance + ")");
             }
@@ -452,17 +463,13 @@ private static DgraphExpandedGoldenRecords searchGoldenRecords(
          final Boolean sortAsc) {
       String gqlFunc = getSearchQueryFunc(RecordType.GoldenRecord, offset, limit, sortBy, sortAsc);
       String gqlPagination = getSearchQueryPagination(RecordType.GoldenRecord, gqlFilters);
-
       String gql = "query search(" + String.join(", ", gqlArgs) + ") {\n";
       gql += String.format(Locale.ROOT, "all(%s) @filter(%s)", gqlFunc, gqlFilters);
       gql += "{\n";
       gql += CustomDgraphConstants.EXPANDED_GOLDEN_RECORD_FIELD_NAMES;
       gql += "}\n";
       gql += gqlPagination;
       gql += "}";
-
-      LOGGER.debug("Search Golden Records Query {}", gql);
-      LOGGER.debug("Search Golden Records Variables {}", gqlVars);
       return runExpandedGoldenRecordsQuery(gql, gqlVars);
    }
 
@@ -472,7 +479,6 @@ static DgraphExpandedGoldenRecords simpleSearchGoldenRecords(
          final Integer limit,
          final String sortBy,
          final Boolean sortAsc) {
-      LOGGER.debug("Simple Search Golden Records Params {}", params);
       String gqlFilters = getSimpleSearchQueryFilters(RecordType.GoldenRecord, params);
       List<String> gqlArgs = getSimpleSearchQueryArguments(params);
       HashMap<String, String> gqlVars = getSimpleSearchQueryVariables(params);
@@ -486,7 +492,6 @@ static DgraphExpandedGoldenRecords customSearchGoldenRecords(
          final Integer limit,
          final String sortBy,
          final Boolean sortAsc) {
-      LOGGER.debug("Custom Search Golden Records Params {}", payloads);
       String gqlFilters = getCustomSearchQueryFilters(RecordType.GoldenRecord, payloads);
       List<String> gqlArgs = getCustomSearchQueryArguments(payloads);
       HashMap<String, String> gqlVars = getCustomSearchQueryVariables(payloads);
@@ -511,9 +516,6 @@ private static DgraphInteractions searchInteractions(
       gql += "}\n";
       gql += gqlPagination;
       gql += "}";
-
-      LOGGER.debug("Simple Search Interactions Query {}", gql);
-      LOGGER.debug("Simple Search Interactions Variables {}", gqlVars);
       return runInteractionsQuery(gql, gqlVars);
    }
 
@@ -548,8 +550,6 @@ a as count(GoldenRecord.interactions)}
       gql += gqlPagination;
       gql += "}";
 
-      LOGGER.debug("Filter Gids Query {}", gql);
-      LOGGER.debug("Filter Gids Variables {}", gqlVars);
       return Boolean.TRUE.equals(getInteractionCount)
             ? Either.right(runFilterGidsWithInteractionCountQuery(gql, gqlVars))
             : Either.left(runfilterGidsQuery(gql, gqlVars));
@@ -560,7 +560,6 @@ static Either<DgraphPaginatedUidList, DgraphPaginationUidListWithInteractionCoun
          final LocalDateTime createdAt,
          final PaginationOptions paginationOptions,
          final Boolean getInteractionCount) {
-      LOGGER.debug("Filter Gids Params {}", params);
       String dateFilter = String.format(Locale.ROOT, "le(GoldenRecord.aux_date_created,\"%s\")", createdAt);
       String filter = getSimpleSearchQueryFilters(RecordType.GoldenRecord, params);
       String gqlFilters = !filter.isEmpty()
@@ -577,7 +576,6 @@ static DgraphInteractions simpleSearchInteractions(
          final Integer limit,
          final String sortBy,
          final Boolean sortAsc) {
-      LOGGER.debug("Simple Search Interactions Params {}", params);
       String gqlFilters = getSimpleSearchQueryFilters(RecordType.Interaction, params);
       List<String> gqlArgs = getSimpleSearchQueryArguments(params);
       HashMap<String, String> gqlVars = getSimpleSearchQueryVariables(params);
@@ -591,7 +589,6 @@ static DgraphInteractions customSearchInteractions(
          final Integer limit,
          final String sortBy,
          final Boolean sortAsc) {
-      LOGGER.debug("Simple Search Interactions Params {}", payloads);
       String gqlFilters = getCustomSearchQueryFilters(RecordType.Interaction, payloads);
       List<String> gqlArgs = getCustomSearchQueryArguments(payloads);
       HashMap<String, String> gqlVars = getCustomSearchQueryVariables(payloads);
@@ -656,10 +653,7 @@ static DgraphGoldenRecords findGoldenRecords(final ApiModels.ApiCrFindRequest re
       for (var o : req.operands()) {
          map.put("$" + camelToSnake(o.operand().name()), o.operand().value());
       }
-      LOGGER.debug("{}", "\n" + query);
-      LOGGER.debug("{}", map);
       final var dgraphGoldenRecords = runGoldenRecordsQuery(query, map);
-      LOGGER.debug("{}", dgraphGoldenRecords);
       return dgraphGoldenRecords;
    }
 

JeMPI_Apps/JeMPI_UI/src/components/browseRecords/BrowseRecords.tsx

@@ -2,6 +2,7 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Box,
   Container,
   Divider,
   FormControlLabel,
@@ -10,7 +11,12 @@ import {
   Switch,
   Typography
 } from '@mui/material'
-import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
+import {
+  DataGrid,
+  GridColDef,
+  GridRenderCellParams,
+  gridClasses
+} from '@mui/x-data-grid'
 import ApiErrorMessage from 'components/error/ApiErrorMessage'
 import { useAppConfig } from 'hooks/useAppConfig'
 import {
@@ -31,13 +37,18 @@ import { useQuery } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import PageHeader from 'components/shell/PageHeader'
-import { LocalizationProvider, DesktopDatePicker } from '@mui/x-date-pickers'
+import {
+  LocalizationProvider,
+  DesktopDatePicker,
+  DateTimePicker
+} from '@mui/x-date-pickers'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import dayjs, { Dayjs } from 'dayjs'
 import getCellComponent from 'components/shared/getCellComponent'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { Search } from '@mui/icons-material'
 import { useConfig } from 'hooks/useConfig'
+import CustomPagination from 'components/shared/CustomDataGridPagination'
 
 const getAlignment = (fieldName: string) =>
   fieldName === 'givenName' ||
@@ -51,15 +62,15 @@ const Records = () => {
   const navigate = useNavigate()
   const { apiClient } = useConfig()
   const { getFieldsByGroup } = useAppConfig()
-
+  const [startDateFilter, setStartDateFilter] = useState<Dayjs>(
+    dayjs().startOf('day')
+  )
+  const [endDateFilter, setEndDateFilter] = useState<Dayjs>(
+    dayjs().endOf('day')
+  )
   const [searchQuery, setSearchQuery] = useState<Array<SearchParameter>>([])
-
-  const [dateFilter, setDateFilter] = useState(dayjs())
-
   const [dateSearch, setDateSearch] = useState(dayjs())
-
   const [searchParams, setSearchParams] = useSearchParams()
-
   const [isFetchingInteractions, setIsFetchingInteractions] = useState(
     searchParams.get('isFetchingInteractions')
       ? JSON.parse(searchParams.get('isFetchingInteractions') as string)
@@ -72,7 +83,7 @@ const Records = () => {
       : [],
     limit: searchParams.get('limit')
       ? JSON.parse(searchParams.get('limit') as string)
-      : 10,
+      : 25,
     offset: searchParams.get('offset')
       ? JSON.parse(searchParams.get('offset') as string)
       : 0,
@@ -109,22 +120,14 @@ const Records = () => {
     ApiSearchResult<GoldenRecord>,
     AxiosError
   >({
-    queryKey: [
-      'golden-records',
-      JSON.stringify(filterPayload.parameters),
-      filterPayload.offset,
-      filterPayload.limit,
-      filterPayload.sortAsc,
-      filterPayload.sortBy
-    ],
+    queryKey: ['golden-records', JSON.stringify(filterPayload)],
     queryFn: async () =>
       (await apiClient.searchQuery(
         filterPayload,
         true
       )) as ApiSearchResult<GoldenRecord>,
     refetchOnWindowFocus: false,
-    keepPreviousData: true,
-    staleTime: 1000 * 60
+    keepPreviousData: true
   })
 
   const rows = useMemo(() => {
@@ -138,7 +141,6 @@ const Records = () => {
           return acc
         }, [])
   }, [isFetchingInteractions, data])
-
   useEffect(() => {
     setSearchParams(
       Object.entries(filterPayload).reduce(
@@ -162,11 +164,13 @@ const Records = () => {
   }
 
   const onFilter = (query: SearchParameter[]) => {
+    const startDate = startDateFilter.toJSON()
+    const endDate = endDateFilter.toJSON()
     setFilterPayload({
       ...filterPayload,
       parameters: [
         {
-          value: dateFilter.toJSON(),
+          value: `${startDate}_${endDate}`,
           distance: -1,
           fieldName: 'auxDateCreated'
         },
@@ -181,12 +185,6 @@ const Records = () => {
       : ''
   }
 
-  const changeSelectedFileterDate = (date: Dayjs | null) => {
-    if (date) {
-      setDateFilter(date)
-    }
-  }
-
   const changeSelectedSearchDate = (date: Dayjs | null) => {
     if (date) {
       setDateSearch(date)
@@ -220,17 +218,36 @@ const Records = () => {
             <Stack gap="10px">
               <Stack gap="20px" flexDirection="row">
                 <LocalizationProvider dateAdapter={AdapterDayjs}>
-                  <DesktopDatePicker
-                    value={dateFilter}
-                    format="YYYY/MM/DD"
-                    onChange={value => changeSelectedFileterDate(value)}
-                    slotProps={{
-                      textField: {
-                        variant: 'outlined',
-                        label: 'Date'
-                      }
-                    }}
-                  />
+                  <Box
+                    display={'flex'}
+                    gap={'2rem'}
+                    alignItems={'center'}
+                    paddingY={'1rem'}
+                    flexDirection={{ xs: 'column', md: 'row' }}
+                  >
+                    <DateTimePicker
+                      value={startDateFilter}
+                      format="YYYY/MM/DD HH:mm:ss"
+                      onChange={value => value && setStartDateFilter(value)}
+                      slotProps={{
+                        textField: {
+                          variant: 'outlined',
+                          label: 'Start Date'
+                        }
+                      }}
+                    />
+                    <DateTimePicker
+                      value={endDateFilter}
+                      format="YYYY/MM/DD HH:mm:ss"
+                      onChange={value => value && setEndDateFilter(value)}
+                      slotProps={{
+                        textField: {
+                          variant: 'outlined',
+                          label: 'End Date'
+                        }
+                      }}
+                    />
+                  </Box>
                 </LocalizationProvider>
                 <FormControlLabel
                   control={
@@ -295,18 +312,31 @@ const Records = () => {
           </Typography>
           <DataGrid
             sx={{
+              overflow: 'visible',
+              '& .MuiDataGrid-columnSeparator': {
+                visibility: 'visible'
+              },
               '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cell:focus': {
                 outline: 'none'
+              },
+              [`.${gridClasses.main}`]: {
+                overflow: 'visible'
+              },
+              [`.${gridClasses.columnHeaders}`]: {
+                position: 'sticky',
+                top: 65,
+                zIndex: 1
               }
             }}
             getRowId={({ uid }) => uid}
             paginationModel={{
               page: filterPayload.offset / filterPayload.limit,
               pageSize: filterPayload.limit
             }}
+            slots={{ pagination: CustomPagination }}
             columns={columns}
             rows={rows}
-            pageSizeOptions={[10, 25, 50, 100]}
+            pageSizeOptions={[25, 50, 100]}
             onRowDoubleClick={params => {
               if ('linkRecords' in params.row) {
                 navigate({

JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import {
   AppBar,
   Box,
@@ -148,19 +148,27 @@ const NavigationBar = () => {
           </Box>
           <Box
             sx={{
-              display: { xs: 'none', md: 'grid' },
-              gridTemplateColumns: 'repeat(4, auto)',
+              display: { xs: 'none', md: 'flex' },
               fontWeight: '500',
+              justifyContent: 'start',
+              alignItems: 'end',
+              width: '100%',
               gap: 3
             }}
           >
-            {navigationItems.map(item => (
-              <LabeledIconBox
-                key={item.label}
-                icon={item.icon}
-                label={item.label}
-                link={item.link}
-              />
+            {navigationItems.map((item, index) => (
+              <Box
+                sx={{
+                  ml: index < navigationItems.length - 1 ? 0 : 'auto'
+                }}
+              >
+                <LabeledIconBox
+                  key={item.label}
+                  icon={item.icon}
+                  label={item.label}
+                  link={item.link}
+                />
+              </Box>
             ))}
           </Box>
           <NavigationMenu />