Merge 1336 (F3945)

F3945: Filter by type my-data page
BlueBrain · Jul 18, 2023 · 35f3849 · 35f3849
2 parents 8f52b74 + 6c0a3c3
commit 35f3849
Show file tree

Hide file tree

Showing 16 changed files with 917 additions and 553 deletions.
diff --git a/src/pages/MyDataPage/MyDataPage.tsx b/src/pages/MyDataPage/MyDataPage.tsx
@@ -1,11 +1,7 @@
 import { MyData } from '../../shared/canvas';
 
 const MyDataPage = () => {
-  return (
-    <div className="my-data-view view-container" style={{ padding: '0 1em' }}>
-      <MyData />
-    </div>
-  );
+  return <MyData />;
 };
 
 export default MyDataPage;
diff --git a/src/shared/canvas/MyData/MyData.tsx b/src/shared/canvas/MyData/MyData.tsx
@@ -1,56 +1,16 @@
 import * as React from 'react';
-import * as moment from 'moment';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useNexusContext } from '@bbp/react-nexus';
 import { notification } from 'antd';
-import { isObject, isString } from 'lodash';
+import { get, isObject, isString } from 'lodash';
 
 import { MyDataHeader, MyDataTable } from '../../molecules';
 import { RootState } from '../../store/reducers';
-import { TDateFilterType, TFilterOptions } from './types';
+import { TFilterOptions } from './types';
+import { makeDatetimePattern } from './utils';
 import './styles.less';
 
-const makeDatetimePattern = ({
-  dateFilterType,
-  singleDate,
-  dateStart,
-  dateEnd,
-}: {
-  dateFilterType?: TDateFilterType;
-  singleDate?: string;
-  dateStart?: string;
-  dateEnd?: string;
-}) => {
-  switch (dateFilterType) {
-    case 'after': {
-      if (!!singleDate && moment(singleDate).isValid()) {
-        return `${singleDate}..*`;
-      }
-      return undefined;
-    }
-    case 'before': {
-      if (!!singleDate && moment(singleDate).isValid()) {
-        return `*..${singleDate}`;
-      }
-      return undefined;
-    }
-    case 'range': {
-      if (
-        !!dateStart &&
-        !!dateEnd &&
-        moment(dateStart).isValid() &&
-        moment(dateEnd).isValid() &&
-        moment(dateStart).isBefore(moment(dateEnd), 'days')
-      ) {
-        return `${dateStart}..${dateEnd}`;
-      }
-      return undefined;
-    }
-    default:
-      return undefined;
-  }
-};
 const HomeMyData: React.FC<{}> = () => {
   const nexus = useNexusContext();
   const identities = useSelector(
@@ -59,7 +19,6 @@ const HomeMyData: React.FC<{}> = () => {
   const issuerUri = identities?.find(item => item['@type'] === 'User')?.['@id'];
   const [
     {
-      dataType,
       dateField,
       query,
       dateFilterType,
@@ -71,6 +30,7 @@ const HomeMyData: React.FC<{}> = () => {
       sort,
       locate,
       issuer,
+      types,
     },
     setFilterOptions,
   ] = React.useReducer(
@@ -84,13 +44,13 @@ const HomeMyData: React.FC<{}> = () => {
       singleDate: undefined,
       dateStart: undefined,
       dateEnd: undefined,
-      dataType: [],
       query: '',
       offset: 0,
       size: 50,
       sort: ['-_createdAt', '@id'],
       locate: false,
       issuer: 'createdBy',
+      types: [],
     }
   );
 
@@ -116,6 +76,7 @@ const HomeMyData: React.FC<{}> = () => {
       ? `${dateField}-${dateFilterType}-${dateFilterRange}`
       : undefined;
   const order = sort.join('-');
+  const resourceTypes = types?.map(item => get(item, 'value'));
   const { data: resources, isLoading } = useQuery({
     queryKey: [
       'my-data-resources',
@@ -127,6 +88,7 @@ const HomeMyData: React.FC<{}> = () => {
         issuer,
         date,
         order,
+        types: resourceTypes,
       },
     ],
     retry: false,
@@ -150,7 +112,8 @@ const HomeMyData: React.FC<{}> = () => {
               [dateField]: dateFilterRange,
             }
           : {}),
-        // type: dataType,
+        // @ts-ignore
+        type: resourceTypes,
       }),
     onError: error => {
       notification.error({
@@ -170,10 +133,10 @@ const HomeMyData: React.FC<{}> = () => {
   });
   const total = resources?._total;
   return (
-    <div className="home-mydata">
+    <div className="my-data-view view-container">
       <MyDataHeader
         {...{
-          dataType,
+          types,
           dateField,
           query,
           dateFilterRange,

diff --git a/src/shared/canvas/MyData/styles.less b/src/shared/canvas/MyData/styles.less
@@ -1,3 +1,5 @@
-.home-mydata {
-  margin-top: 52px;
+.my-data-view {
+  margin-top: 52px !important;
+  padding: 0 1em !important;
+  flex-direction: column !important;
 }
diff --git a/src/shared/canvas/MyData/types.ts b/src/shared/canvas/MyData/types.ts
@@ -7,7 +7,7 @@ export type TFilterOptions = {
   query: string;
   dateFilterType?: TDateFilterType;
   dateField: TDateField;
-  dataType?: string[];
+  types?: TType[];
   singleDate?: string;
   dateStart?: string;
   dateEnd?: string;
@@ -29,9 +29,16 @@ export type THeaderProps = Omit<TFilterOptions, 'size' | 'offset' | 'sort'> & {
 export type TTitleProps = {
   text: string;
   label: string;
-  total?: string;
+  total?: number;
 };
-export type THeaderFilterProps = Omit<THeaderProps, 'total' | 'sort'>;
+export type THeaderFilterProps = Pick<
+  THeaderProps,
+  'types' | 'dateField' | 'setFilterOptions'
+>;
+export type THeaderTitleProps = Pick<
+  THeaderProps,
+  'total' | 'query' | 'locate' | 'issuer' | 'setFilterOptions'
+>;
 export type THandleMenuSelect = MenuProps['onClick'];
 export type TTypeDateItem = {
   key: string;
@@ -45,3 +52,26 @@ export type TDate = {
 };
 export type TDateOptions = 'singleDate' | 'dateStart' | 'dateEnd';
 export const DATE_PATTERN = 'DD/MM/YYYY';
+export type TType = {
+  key: string;
+  value: string;
+  label: string;
+  docCount: number;
+};
+
+export type TTypeAggregationsResult = {
+  '@context': string;
+  total: number;
+  aggregations: {
+    projects: TTypesAggregatedProperty;
+    types: TTypesAggregatedProperty;
+  };
+};
+
+export type TTypesAggregatedProperty = {
+  buckets: TTypesAggregatedBucket[];
+  doc_count_error_upper_bound: number;
+  sum_other_doc_count: number;
+};
+
+export type TTypesAggregatedBucket = { key: string; doc_count: number };
diff --git a/src/shared/canvas/MyData/utils.ts b/src/shared/canvas/MyData/utils.ts
@@ -0,0 +1,45 @@
+import * as moment from 'moment';
+import { TDateFilterType } from './types';
+
+const makeDatetimePattern = ({
+  dateFilterType,
+  singleDate,
+  dateStart,
+  dateEnd,
+}: {
+  dateFilterType?: TDateFilterType;
+  singleDate?: string;
+  dateStart?: string;
+  dateEnd?: string;
+}) => {
+  switch (dateFilterType) {
+    case 'after': {
+      if (!!singleDate && moment(singleDate).isValid()) {
+        return `${singleDate}..*`;
+      }
+      return undefined;
+    }
+    case 'before': {
+      if (!!singleDate && moment(singleDate).isValid()) {
+        return `*..${singleDate}`;
+      }
+      return undefined;
+    }
+    case 'range': {
+      if (
+        !!dateStart &&
+        !!dateEnd &&
+        moment(dateStart).isValid() &&
+        moment(dateEnd).isValid() &&
+        moment(dateStart).isBefore(moment(dateEnd), 'days')
+      ) {
+        return `${dateStart}..${dateEnd}`;
+      }
+      return undefined;
+    }
+    default:
+      return undefined;
+  }
+};
+
+export { makeDatetimePattern };