start integration of Discovery page with Data Library

uc-cdis · Jan 9, 2025 · 00e81fc · 00e81fc
1 parent f5d64f2
commit 00e81fc
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 89 deletions.
diff --git a/packages/frontend/src/features/DataLibrary/DataLibraryLists.tsx b/packages/frontend/src/features/DataLibrary/DataLibraryLists.tsx
@@ -9,7 +9,6 @@ import { DatalistAccordionItem } from './DatalistAccordionItem';
 import { DataLibraryConfig } from './types';
 import { ErrorCard } from '../../components/MessageCards';
 import { HTTPUserFriendlyErrorMessages } from './modals/utils';
-import { size } from 'lodash';
 
 const DataLibraryLists: React.FC<DataLibraryConfig> = ({
   useAPI,

diff --git a/packages/frontend/src/features/DataLibrary/SearchAndActions.tsx b/packages/frontend/src/features/DataLibrary/SearchAndActions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActionIcon, Button, Group, Tooltip } from '@mantine/core';
-// import { MdAdd as PlusIcon, MdSearch as SearchIcon } from 'react-icons/md';
+import { MdAdd as PlusIcon, MdSearch as SearchIcon } from 'react-icons/md';
 import { Datalist } from '@gen3/core';
 import { Icon } from '@iconify/react';
 import { IconSize } from './types';
@@ -50,7 +50,7 @@ const SearchAndActions: React.FC<SearchAndActionsProps> = ({
             <Icon icon="gen3:clear-list" width={iconSize} height={iconSize} />
           </ActionIcon>
         </Tooltip>
-        {/* ----  TODO: enable these
+
         <Tooltip label="Create a new empty list">
           <Button
             hidden={true}
@@ -73,7 +73,6 @@ const SearchAndActions: React.FC<SearchAndActionsProps> = ({
             <Icon icon="gen3:download-alt" height={24} width={24} />
           </Button>
         </Tooltip>
-        */}
       </Group>
       {/* ---
       <TextInput

diff --git a/packages/frontend/src/features/DataLibrary/selection/exportActions.ts b/packages/frontend/src/features/DataLibrary/selection/exportActions.ts
@@ -1,4 +1,3 @@
-import { DataActionFunction } from './registeredActions';
 import {
   fetchFencePresignedURL,
   FileItem,
@@ -7,6 +6,7 @@ import {
 } from '@gen3/core';
 import { notifications } from '@mantine/notifications';
 import { HTTPUserFriendlyErrorMessages } from '../modals/utils';
+import { DataActionFunction } from './types';
 
 const PRESIGNED_URL_TEMPLATE_VARIABLE = '{{PRESIGNED_URL}}';
 interface SendExistingPFBToURLParameters {
@@ -86,7 +86,7 @@ export const sendExistingPFBToURL: DataActionFunction = async (
         message:
           error.status in HTTPUserFriendlyErrorMessages
             ? HTTPUserFriendlyErrorMessages[error.status]
-            : 'An error has occured to prevent exporting PFB',
+            : 'An error has occurred to prevent exporting PFB',
         color: 'red',
         loading: false,
       });

diff --git a/packages/frontend/src/features/DataLibrary/selection/registeredActions.ts b/packages/frontend/src/features/DataLibrary/selection/registeredActions.ts
@@ -1,15 +1,5 @@
 import { sendExistingPFBToURL } from './exportActions';
-import { HTTPError } from '@gen3/core';
-import { ValidatedSelectedItem } from '../types';
-
-export type DataActionFunction<T = void> = (
-  validatedSelections: ReadonlyArray<ValidatedSelectedItem>,
-  params?: Record<string, any>, // function options from the config
-  done?: (arg0?: string) => void,
-  onError?: (error: HTTPError | Error) => void,
-  onAbort?: () => void,
-  signal?: AbortSignal,
-) => Promise<T>;
+import { DataActionFunction } from './types';
 
 // create a factory for the action creators
 

diff --git a/packages/frontend/src/features/DataLibrary/selection/types.ts b/packages/frontend/src/features/DataLibrary/selection/types.ts
@@ -1,5 +1,8 @@
-import { CohortItem } from '@gen3/core';
-import { FileItemWithParentDatasetNameAndID } from '../types';
+import { CohortItem, HTTPError } from '@gen3/core';
+import {
+  FileItemWithParentDatasetNameAndID,
+  ValidatedSelectedItem,
+} from '../types';
 
 type RuleOperator =
   | 'equals'
@@ -41,3 +44,12 @@ export interface DataLibraryActionConfig {
 }
 
 export type DataLibraryActionsConfig = ReadonlyArray<DataLibraryActionConfig>;
+
+export type DataActionFunction<T = void> = (
+  validatedSelections: ReadonlyArray<ValidatedSelectedItem>,
+  params?: Record<string, any>, // function options from the config
+  done?: (arg0?: string) => void,
+  onError?: (error: HTTPError | Error) => void,
+  onAbort?: () => void,
+  signal?: AbortSignal,
+) => Promise<T>;
diff --git a/packages/frontend/src/features/Discovery/ActionBar/ActionBar.tsx b/packages/frontend/src/features/Discovery/ActionBar/ActionBar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ExportToDataLibrary } from '../types';
 import { FiDownload as DownloadIcon } from 'react-icons/fi';
 import DataLibraryActionButton from './DataLibraryActionButton';
+import AddToDataLibrary from './AddToDataLibrary';
 
 interface ActionBarProps {
   config: ExportToDataLibrary;
@@ -13,19 +14,22 @@ const ActionBar = ({ config }: ActionBarProps) => {
   return (
     <div className="flex items-center justify-end py-1 px-2 mb-1 w-full gap-x-1.5 ">
       {buttons?.map((button, index) => {
-        return (
-          <DataLibraryActionButton
-            label={button.label}
-            icon={<DownloadIcon />}
-            toolTip={button.tooltip}
-            loginRequired={config?.loginRequireForAllButtons ?? true}
-            onClick={() => {
-              console.log('Download $[button.label]');
-            }}
-            key={`action-button-${index}`}
-          />
-        );
-        // }
+        if (button.type === 'add-to-data-library') {
+          return <AddToDataLibrary key={button.type} />;
+        } else {
+          return (
+            <DataLibraryActionButton
+              label={button.label}
+              icon={<DownloadIcon />}
+              toolTip={button.tooltip}
+              loginRequired={config?.loginRequireForAllButtons ?? true}
+              onClick={() => {
+                console.log('Download $[button.label]');
+              }}
+              key={`action-button-${index}`}
+            />
+          );
+        }
       })}
     </div>
   );

diff --git a/packages/frontend/src/features/Discovery/ActionBar/AddToDataLibrary.tsx b/packages/frontend/src/features/Discovery/ActionBar/AddToDataLibrary.tsx
@@ -1,72 +1,35 @@
-import React, { useState } from 'react';
-import { Combobox, InputBase, useCombobox } from '@mantine/core';
+import React, { useMemo, useState } from 'react';
+import { Button, Group, ComboboxItem, Select } from '@mantine/core';
 import { useDataLibrary } from '@gen3/core';
 import { useAnalysisTools } from '../../../lib/common/analysisToolFramework';
 
+const extractListNameAndId = (data: any): ComboboxItem[] =>
+  Object.keys(data).map((id) => ({ value: id, label: data[id].name }));
+
 const AddToDataLibrary = () => {
   const { useDataLibraryServiceAPI } = useAnalysisTools();
   const { isLoading, isError, dataLibrary } = useDataLibrary(
     useDataLibraryServiceAPI ?? false,
   );
 
-  const combobox = useCombobox({
-    onDropdownClose: () => combobox.resetSelectedOption(),
-  });
-  const [data, setData] = useState(dataLibrary);
-  const [value, setValue] = useState<string | null>(null);
-  const [search, setSearch] = useState('');
-
-  const exactOptionMatch = data.some((item: any) => item === search);
-  const filteredOptions = exactOptionMatch
-    ? data
-    : data.filter((item: any) =>
-        item.toLowerCase().includes(search.toLowerCase().trim()),
-      );
+  const [value, setValue] = useState<ComboboxItem | null>(null);
 
-  const options = filteredOptions.map((item: any) => (
-    <Combobox.Option value={item} key={item}>
-      {item}
-    </Combobox.Option>
-  ));
+  const datasets = useMemo(() => {
+    if (isLoading || isError) return [];
+    return extractListNameAndId(dataLibrary);
+  }, [dataLibrary, isError, isLoading]);
 
+  console.log('datasets: ', datasets);
   return (
-    <Combobox
-      store={combobox}
-      withinPortal={false}
-      onOptionSubmit={(val) => {
-        setValue(val);
-        combobox.closeDropdown();
-      }}
-    >
-      <Combobox.Target>
-        <InputBase
-          rightSection={<Combobox.Chevron />}
-          value={search}
-          onChange={(event) => {
-            combobox.openDropdown();
-            combobox.updateSelectedOptionIndex();
-            setSearch(event.currentTarget.value);
-          }}
-          onClick={() => combobox.openDropdown()}
-          onFocus={() => combobox.openDropdown()}
-          onBlur={() => {
-            combobox.closeDropdown();
-            setSearch(value || '');
-          }}
-          placeholder="Search value"
-          rightSectionPointerEvents="none"
-        />
-      </Combobox.Target>
-
-      <Combobox.Dropdown>
-        <Combobox.Options>
-          {options}
-          {!exactOptionMatch && search.trim().length > 0 && (
-            <Combobox.Option value="$create">+ Create {search}</Combobox.Option>
-          )}
-        </Combobox.Options>
-      </Combobox.Dropdown>
-    </Combobox>
+    <Group>
+      <Select
+        data={datasets}
+        value={value ? value.value : null}
+        onChange={(_value, option) => setValue(option)}
+      />
+      <Button>+</Button>
+      <Button disabled={value === null}>Add To List</Button>
+    </Group>
   );
 };
 

diff --git a/packages/frontend/src/features/Discovery/ActionBar/types.ts b/packages/frontend/src/features/Discovery/ActionBar/types.ts
@@ -1,6 +1,18 @@
+import { HTTPError } from '@gen3/core';
+import { ValidatedSelectedItem } from '../../DataLibrary/types';
+
 export interface ActionButtonProps<
   T extends Record<string, any> = Record<string, any>,
 > {
   selectedResources: Array<T>;
   manifestFieldName?: string;
 }
+
+export type DataActionFunction<T = void> = (
+  validatedSelections: ReadonlyArray<ValidatedSelectedItem>,
+  params?: Record<string, any>, // function options from the config
+  done?: (arg0?: string) => void,
+  onError?: (error: HTTPError | Error) => void,
+  onAbort?: () => void,
+  signal?: AbortSignal,
+) => Promise<T>;
diff --git a/packages/frontend/src/features/Discovery/DiscoveryIndexPanel.tsx b/packages/frontend/src/features/Discovery/DiscoveryIndexPanel.tsx
@@ -85,6 +85,7 @@ const DiscoveryIndexPanel = ({
     );
   }
 
+  console.log(dataRequestStatus);
   if (dataRequestStatus.isError) {
     return (
       <div className="flex w-full py-24 h-100 relative justify-center">