add selection Support to Discovery Table

add ExportToDataLibrary configurations

Author: craigrbarnes

packages/frontend/src/features/Discovery/ActionBar/ActionBar.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ExportToDataLibrary } from '../types';
+import { ExportFromDiscoveryActions } from '../types';
 import { FiDownload as DownloadIcon } from 'react-icons/fi';
 import DataLibraryActionButton from './DataLibraryActionButton';
 
 interface ActionBarProps {
-  config: ExportToDataLibrary;
+  config: ExportFromDiscoveryActions;
 }
 
 const ActionBar = ({ config }: ActionBarProps) => {

packages/frontend/src/features/Discovery/ActionBar/AddToDataLibrary.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Button, ComboboxItem, Group, Select } from '@mantine/core';
+import { useDataLibrary } from '@gen3/core';
+import { useDeepCompareEffect } from 'use-deep-compare';
+import { ExportToDataLibraryConfiguration } from '../types';
+
+const extractListNameAndId = (data: any): ComboboxItem[] =>
+  Object.keys(data).map((id) => ({ value: id, label: data[id].name }));
+
+interface DiscoveryAddToDataLibraryProps {
+  selectedResources: Record<string, any>;
+  exportToDataLibrary: ExportToDataLibraryConfiguration;
+}
+
+const DiscoveryDataLibrary = ({
+  selectedResources,
+  exportToDataLibrary,
+}: DiscoveryAddToDataLibraryProps) => {
+  const [data, setData] = useState<ComboboxItem[]>([]);
+  const [currentList, setCurrentList] = useState<ComboboxItem | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Record<string, any> | null>(null);
+
+  const {
+    dataLibrary,
+    updateListInDataLibrary,
+    addListToDataLibrary,
+    isLoading,
+    isError,
+    error: dataLibraryError,
+  } = useDataLibrary(false);
+
+  const saveToList = (
+    listname: string,
+    listId: string | undefined = undefined,
+  ) => {
+    if (selectedResources.length === 0) return;
+    const items = selectedResources.reduce(
+      (acc: Record<string, any>, resource: Record<string, any>) => {
+        const dataObjects = resource[exportToDataLibrary.dataObjectFieldName];
+        const datasetId = resource[exportToDataLibrary.datesetIdFieldName];
+
+        const datafiles = dataObjects.reduce(
+          (dataAcc: Record<string, any>, dataObject: any) => {
+            const guid = dataObject[exportToDataLibrary.dataObjectIdField];
+            return {
+              ...dataAcc,
+              [guid]: {
+                dataset_guid: datasetId,
+                ...dataObject,
+              },
+            };
+          },
+          {},
+        );
+        return {
+          ...acc,
+          ...datafiles,
+        };
+      },
+      {},
+    );
+
+    if (listId) {
+      updateListInDataLibrary(listId, items);
+    } else {
+      addListToDataLibrary(items);
+    }
+  };
+
+  useDeepCompareEffect(() => {
+    if (dataLibrary && !isError) {
+      const listItems = extractListNameAndId(dataLibrary.lists);
+      setData(listItems);
+    }
+    if (isError) {
+      setError(dataLibraryError);
+    }
+  }, [dataLibrary, isError]);
+
+  // fetch the list
+
+  const notLoggedIn = false;
+
+  return (
+    <React.Fragment>
+      <Group>
+        <Select
+          data={data}
+          onChange={(value, option) => setCurrentList(option)}
+          placeholder={
+            notLoggedIn
+              ? 'Login to save to a list'
+              : 'Select/create a list to save to'
+          }
+          disabled={notLoggedIn}
+          value={currentList?.value}
+        />
+        <Button
+          loading={loading}
+          disabled={
+            error !== null ||
+            loading ||
+            data?.length === 0 ||
+            currentList === undefined ||
+            selectedResources.length === 0 ||
+            notLoggedIn
+          }
+          onClick={() => {
+            if (currentList) {
+              saveToList(currentList.label, currentList.value);
+            } else {
+              saveToList('New List');
+            }
+          }}
+        >
+          {' '}
+          Save to List
+        </Button>
+      </Group>
+    </React.Fragment>
+  );
+};
+
+export default DiscoveryDataLibrary;

packages/frontend/src/features/Discovery/DiscoveryIndexPanel.tsx

@@ -93,6 +93,10 @@ const DiscoveryIndexPanel = ({
     );
   }
 
+  const updateSelection = (ids: Array<string>) => {
+    console.log('ids updated', ids);
+  };
+
   return (
     <div className="flex flex-col items-center p-4 w-full bg-base-lightest">
       <DiscoveryProvider discoveryIndexConfig={discoveryConfig}>
@@ -168,6 +172,7 @@ const DiscoveryIndexPanel = ({
                 dataRequestStatus={dataRequestStatus}
                 setPagination={setPagination}
                 setSorting={setSorting}
+                setSelection={updateSelection}
                 pagination={pagination}
                 sorting={sorting}
               />

packages/frontend/src/features/Discovery/DiscoveryTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   MantineReactTable,
   MRT_Cell,
@@ -39,6 +39,7 @@ interface DiscoveryTableProps {
   sorting: MRT_SortingState;
   setPagination: OnChangeFn<PaginationState>;
   setSorting: OnChangeFn<SortingState>;
+  setSelection: (selection: Array<string>) => void;
 }
 
 const DiscoveryTable = ({
@@ -47,6 +48,7 @@ const DiscoveryTable = ({
   dataRequestStatus,
   setSorting,
   setPagination,
+  setSelection,
   pagination,
   sorting,
 }: DiscoveryTableProps) => {
@@ -108,7 +110,8 @@ const DiscoveryTable = ({
     enableColumnActions: false,
     enableStickyHeader: true,
     enableStickyFooter: true,
-
+    getRowId: (originalRow) =>
+      config.studyField ? originalRow[config.studyField] : originalRow.id,
     // TODO: keep this to explore later
     // mantineTableContainerProps: ({ table }) => {
     //   return {
@@ -168,6 +171,13 @@ const DiscoveryTable = ({
     },
   });
 
+  const { rowSelection } = table.getState().rowSelection;
+
+  useEffect(() => {
+    //fetch data based on row selection state or something
+    setSelection(Object.keys(rowSelection));
+  }, [rowSelection, setSelection]);
+
   return (
     <React.Fragment>
       <StudyDetails />

packages/frontend/src/features/Discovery/types.ts

@@ -202,7 +202,7 @@ interface DiscoveryPageTitle {
   text: string;
 }
 
-export interface DataLibraryActionButton {
+export interface ExportFromDiscoveryActionButton {
   type:
     | 'manifest'
     | 'zip'
@@ -239,12 +239,15 @@ export interface AuthorizationValues {
   menuText: string;
 }
 
-export interface ExportToDataLibrary {
-  buttons: DataLibraryActionButton[];
+export interface ExportFromDiscoveryActions {
+  buttons: ExportFromDiscoveryActionButton[];
   enabled?: boolean;
   verifyExternalLogins?: boolean;
   loginRequireForAllButtons?: boolean;
   manifestFieldName?: string;
+  dataObjectFieldName: string;
+  datesetIdFieldName: string;
+  dataObjectIdField: string;
 }
 
 export interface DataAuthorization {
@@ -286,6 +289,13 @@ export interface ChartsSection {
   charts?: Record<string, SummaryChartWithField>;
 }
 
+export interface ExportToDataLibraryConfiguration {
+  enabled: boolean;
+  dataObjectFieldName: string;
+  datesetIdFieldName: string;
+  dataObjectIdField: string;
+}
+
 // TODO: Type the rest of the config
 export interface DiscoveryIndexConfig {
   guidType?: string;
@@ -295,7 +305,8 @@ export interface DiscoveryIndexConfig {
     advSearchFilters?: AdvancedSearchFilters;
     aiSearch?: boolean;
     pageTitle: DiscoveryPageTitle;
-    exportToDataLibrary?: ExportToDataLibrary;
+    exportFromDiscovery?: ExportFromDiscoveryActions;
+    exportToDataLibrary: ExportToDataLibraryConfiguration;
     search?: SearchConfig;
     authorization: DataAuthorization;
     dataLoader?: DataLoader;