ICDC-3773 - My cart page / Add all files fix

package.json

@@ -13,11 +13,11 @@
     "@bento-core/header": "1.0.1-icdc.0",
     "@bento-core/local-find": "^1.0.1-icdc.13",
     "@bento-core/nav-bar": "^1.0.1-icdc.3",
-    "@bento-core/paginated-table": "1.0.1-icdc.21",
+    "@bento-core/paginated-table": "1.0.1-icdc.23",
     "@bento-core/query-bar": "1.0.1-icdc.24",
     "@bento-core/stats-bar": "^1.0.1-icdc.2",
     "@bento-core/tab": "^0.2.0",
-    "@bento-core/table": "^1.0.1-icdc.12",
+    "@bento-core/table": "1.0.1-icdc.15",
     "@bento-core/tool-tip": "^0.3.0",
     "@bento-core/util": "1.0.1-icdc.1",
     "@bento-core/widgets": "^1.0.1-icdc.2",

src/bento/programData.js

@@ -1,80 +1,80 @@
-import gql from "graphql-tag";
+import gql from 'graphql-tag';
 
 const pageData = {
-  headerTitle: "Programs",
+  headerTitle: 'Programs',
   headerIcon:
-    "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/svgs/Icon-Programs.svg",
+    'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/svgs/Icon-Programs.svg',
   externalIcon:
-    "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/svgs/program_ExternalLink.svg",
+    'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/svgs/program_ExternalLink.svg',
   COP: {
-    prgramName: "COP",
+    prgramName: 'COP',
     primaryImage:
-      "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.cop.png",
+      'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.cop.png',
     primaryImageAlt:
-      "The Center for Cancer Research (CCR) is the largest division of the NCI intramural research program and comprises nearly 250 basic and clinical research groups located on two campuses outside of Washington, DC.",
+      'The Center for Cancer Research (CCR) is the largest division of the NCI intramural research program and comprises nearly 250 basic and clinical research groups located on two campuses outside of Washington, DC.',
     secondaryImage:
-      "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.cop.jpg",
+      'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.cop.jpg',
   },
   CMCP: {
-    prgramName: "CMCP",
+    prgramName: 'CMCP',
     primaryImage:
-      "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.ccmp.png",
+      'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.ccmp.png',
     primaryImageAlt:
-      "The Center for Cancer Research (CCR) is the largest division of the NCI intramural research program and comprises nearly 250 basic and clinical research groups located on two campuses outside of Washington, DC.",
+      'The Center for Cancer Research (CCR) is the largest division of the NCI intramural research program and comprises nearly 250 basic and clinical research groups located on two campuses outside of Washington, DC.',
     secondaryImage:
-      "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.ccmp.jpg",
+      'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.ccmp.jpg',
   },
   PCCR: {
-    prgramName: "PCCR",
+    prgramName: 'PCCR',
     primaryImage:
-      "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.pccr.png",
+      'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.pccr.png',
     primaryImageAlt:
-      "The Center for Cancer Research (CCR) is the largest division of the NCI intramural research program and comprises nearly 250 basic and clinical research groups located on two campuses outside of Washington, DC.",
+      'The Center for Cancer Research (CCR) is the largest division of the NCI intramural research program and comprises nearly 250 basic and clinical research groups located on two campuses outside of Washington, DC.',
     secondaryImage:
-      "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programDetail_Image.pccr.jpg",
+      'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programDetail_Image.pccr.jpg',
   },
 };
 
 const pageDataV2 = {
-  headerTitle: "Programs",
+  headerTitle: 'Programs',
   headerIcon:
-    "https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/svgs/program-listing-header.svg",
+    'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/svgs/program-listing-header.svg',
   externalIcon:
-    "https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/svgs/programs-listing-external-link-icon.svg",
+    'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/svgs/programs-listing-external-link-icon.svg',
   programs: [
     {
-      prgramName: "COP",
+      prgramName: 'COP',
       primaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.cop.png",
-      primaryImageAlt: "COP-primary-image",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.cop.png',
+      primaryImageAlt: 'COP-primary-image',
       secondaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.cop.jpg",
-      video: "https://www.youtube.com/watch?v=tU5N5jCZxcY",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.cop.jpg',
+      video: 'https://www.youtube.com/watch?v=tU5N5jCZxcY',
     },
     {
-      prgramName: "PRECINCT",
-      primaryImageAlt: "PRECINT-primary-image",
+      prgramName: 'PRECINCT',
+      primaryImageAlt: 'PRECINT-primary-image',
       primaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/png/precint_program_listing.png",
-      video: "https://www.youtube.com/watch?v=Gpy3EWeYy3Y",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/icdc_3790/icdc/images/png/precint_program_listing.png',
+      video: 'https://www.youtube.com/watch?v=Gpy3EWeYy3Y',
     },
     {
-      prgramName: "CMCP",
+      prgramName: 'CMCP',
       primaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.ccmp.png",
-      primaryImageAlt: "CMCP-primary-image",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.ccmp.png',
+      primaryImageAlt: 'CMCP-primary-image',
       secondaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.ccmp.jpg",
-      video: "https://www.youtube.com/watch?v=sHUvbPM8H7A",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/Program_Detail_Image.ccmp.jpg',
+      video: 'https://www.youtube.com/watch?v=sHUvbPM8H7A',
     },
     {
-      prgramName: "PCCR",
+      prgramName: 'PCCR',
       primaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.pccr.png",
-      primaryImageAlt: "PCCR-primary-image",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programListing_Image.pccr.png',
+      primaryImageAlt: 'PCCR-primary-image',
       secondaryImage:
-        "https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programDetail_Image.pccr.jpg",
-      video: "https://www.youtube.com/watch?v=oVs7kXSzv3U",
+        'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/png/programDetail_Image.pccr.jpg',
+      video: 'https://www.youtube.com/watch?v=oVs7kXSzv3U',
     },
   ],
 };

src/components/PaginatedTable/Customize/PaginationOptions.js

@@ -1,9 +1,9 @@
-import { customPaginationAction } from "../../../bento-core";
+import { customPaginationAction } from '../../../bento-core';
 import {
   GET_MY_CART_DATA_QUERY,
   GET_MY_CART_DATA_QUERY_DESC,
   cartTable,
-} from "../../../bento/fileCentricCartWorkflowData";
+} from '../../../bento/fileCentricCartWorkflowData';
 
 // pagination table behavior
 // customizeOnRowSelect,
@@ -13,22 +13,53 @@ import {
 // customizeChangeRowsPerPage,
 // customizeColumnViewChange,
 
-export const myFileTablePaginationOptions = (context) => ({
+export const myFileTablePaginationOptions = context => ({
   customizeSortByColumn: (column, order) => {
     const { dispatch, sortBy } = context;
-    const sort = order === "asc" && sortBy === column ? "desc" : "asc";
+    const sort = order === 'asc' && sortBy === column ? 'desc' : 'asc';
     const value = {
       sortOrder: sort,
       sortBy: column,
       query:
-        sort === "asc" ? GET_MY_CART_DATA_QUERY : GET_MY_CART_DATA_QUERY_DESC,
+        sort === 'asc' ? GET_MY_CART_DATA_QUERY : GET_MY_CART_DATA_QUERY_DESC,
       paginationAPIField:
-        sort === "asc"
+        sort === 'asc'
           ? cartTable.paginationAPIField
           : cartTable.paginationAPIFieldDesc,
     };
     dispatch(customPaginationAction(value));
   },
+  customizeToggleSelectAll: (event, Ids, includeIds, rows) => {
+    event.stopPropagation();
+    const { dispatch, selectedRows = [], selectedFileIds = [] } = context;
+    let updateFilesId = [...selectedFileIds];
+    const fileIds = rows.map(({ file_uuid: fileId }) => fileId);
+    if (event.target.checked && !includeIds) {
+      // select all
+      const selecedFilesName = Ids.concat(selectedRows);
+      updateFilesId = updateFilesId.concat(fileIds);
+      dispatch(
+        customPaginationAction({
+          selectedRows: selecedFilesName,
+          selectedFileIds: updateFilesId,
+        })
+      );
+    } else {
+      // unchecked all
+      const excludeFilesName = selectedRows.filter(
+        flName => !Ids.includes(flName)
+      );
+      const excludeFilesId = selectedFileIds.filter(
+        uuid => !fileIds.includes(uuid)
+      );
+      dispatch(
+        customPaginationAction({
+          selectedRows: excludeFilesName,
+          selectedFileIds: excludeFilesId,
+        })
+      );
+    }
+  },
   customizeOnRowSelect: (event, row) => {
     // Override the select row pagination action for cart table,
     // file_name and file_uuid are required to view in JBrowse
@@ -43,21 +74,21 @@ export const myFileTablePaginationOptions = (context) => ({
       selectedFilesName.push(fileName);
       updateFilesId.push(fileId);
     } else {
-      selectedFilesName = selectedFilesName.filter((file) => fileName !== file);
-      updateFilesId = updateFilesId.filter((id) => fileId !== id);
+      selectedFilesName = selectedFilesName.filter(file => fileName !== file);
+      updateFilesId = updateFilesId.filter(id => fileId !== id);
     }
     dispatch(
       customPaginationAction({
         selectedRows: selectedFilesName,
         selectedFileIds: updateFilesId,
-      }),
+      })
     );
   },
 });
 
 export const paginationOptions = (context, config) => {
   switch (config?.title) {
-    case "myFiles":
+    case 'myFiles':
       return {
         ...myFileTablePaginationOptions(context),
       };

src/components/PaginatedTable/TableTheme.js

@@ -16,6 +16,11 @@ export const headerTheme = ({ primaryColor = '#004c73' }) => ({
       },
     },
     MuiTableCell: {
+      head: {
+        '& span': {
+          color: '#0B3556',
+        },
+      },
       root: {
         paddingLeft: '5px',
         paddingRight: '5px',

src/components/PaginatedTable/components/AddFilesButtons.tsx

@@ -47,6 +47,7 @@ export const AddSelectedFilesButton: React.FC<ComponentProps> = ({
       tooltipCofig={tooltipCofig}
       alertMessage={alertMessage}
       activeFilters={activeFilters}
+      maxFileLimit={10000}
     />
   );
 };

src/pages/Cart/components/dropdown/DropDownView.jsx

@@ -60,7 +60,10 @@ const DropDownView = ({ filesId = [], allFiles }) => {
   const [manifest, setManifest] = useState('');
 
   useQuery(CREATE_MANIFEST, {
-    variables: { uuid: allFiles ? filesId : selectedFileIds },
+    variables: {
+      uuid: allFiles ? filesId : selectedFileIds,
+      first: allFiles ? filesId.length : selectedFileIds.length,
+    },
     skip: allFiles ? !filesId : !selectedFileIds,
     onCompleted: ({ createManifest }) => {
       setManifest(createManifest);
@@ -340,7 +343,9 @@ const DropDownView = ({ filesId = [], allFiles }) => {
             </Styled.CancerGenomicsCloudButton>
           </Tooltip>
         </Styled.CancerGenomicsCloudMenuItem>
-        <Styled.DownloadFileManifestMenuItem isDropDownDisabled={isDropDownDisabled}>
+        <Styled.DownloadFileManifestMenuItem
+          isDropDownDisabled={isDropDownDisabled}
+        >
           <Tooltip
             arrow
             interactive
@@ -374,26 +379,26 @@ const DropDownView = ({ filesId = [], allFiles }) => {
 
   return (
     <>
-    <Styled.DropDownMenuContainer>
-      <Tooltip
-        arrow
-        maxWidth={200}
-        placement="left"
-        title={dropDownTooltipTitle}
-      >
-        <Styled.DisplayLinksDropDownButton
-          open={open}
-          isDropDownDisabled={isDropDownDisabled}
-          endIcon={dropDownIcon}
-          ref={anchorRef}
-          aria-controls={open ? 'menu-list-grow' : undefined}
-          aria-haspopup="true"
-          onClick={handleToggle}
+      <Styled.DropDownMenuContainer>
+        <Tooltip
+          arrow
+          maxWidth={200}
+          placement="left"
+          title={dropDownTooltipTitle}
         >
-          {label}
-        </Styled.DisplayLinksDropDownButton>
-      </Tooltip>
-      <Popper
+          <Styled.DisplayLinksDropDownButton
+            open={open}
+            isDropDownDisabled={isDropDownDisabled}
+            endIcon={dropDownIcon}
+            ref={anchorRef}
+            aria-controls={open ? 'menu-list-grow' : undefined}
+            aria-haspopup="true"
+            onClick={handleToggle}
+          >
+            {label}
+          </Styled.DisplayLinksDropDownButton>
+        </Tooltip>
+        <Popper
           open={open}
           anchorEl={anchorRef.current}
           role={undefined}
@@ -402,10 +407,7 @@ const DropDownView = ({ filesId = [], allFiles }) => {
           disablePortal
         >
           {({ TransitionProps, placement }) => (
-            <Styled.MuiStyledGrow
-              placement={placement}
-              {...TransitionProps}
-            >
+            <Styled.MuiStyledGrow placement={placement} {...TransitionProps}>
               <Styled.MuiStyledPaper>
                 <ClickAwayListener onClickAway={handleClose}>
                   <Styled.DropDownMenuList

src/pages/dashboard/components/DashboardTabs.jsx

@@ -36,7 +36,7 @@ const DashboardTabsView = ({
               queryParam={tab?.queryParam}
               addFilesRequestVariableKey={tab.addFilesRequestVariableKey}
               addSelectedFilesResponseKeys={tab.addFilesResponseKeys}
-              addAddFilesResponseKeys={tab.addAllFilesResponseKeys}
+              addAllFilesResponseKeys={tab.addAllFilesResponseKeys}
               addAllFileQuery={tab.addAllFileQuery}
               addSelectedFilesQuery={tab.addSelectedFilesQuery}
               addFileTooltipCofig={tab.addFilesTooltopConfig}

src/pages/dashboard/components/TableLayout.tsx

@@ -48,6 +48,7 @@ interface ComponentProps {
 export const TableLayout: React.FC<ComponentProps> = ({
   addFilesRequestVariableKey,
   addSelectedFilesResponseKeys,
+  addAllFilesResponseKeys,
   addAllFileQuery,
   addSelectedFilesQuery,
   activeFilters,
@@ -87,7 +88,7 @@ export const TableLayout: React.FC<ComponentProps> = ({
             title={addAllFilesButtonText}
             clsName="add_all_button"
             dataKey={addFilesRequestVariableKey}
-            responseKeys={addSelectedFilesResponseKeys}
+            responseKeys={addAllFilesResponseKeys}
             addFileQuery={addAllFileQuery}
             tooltipCofig={addAllFilesTooltipConfig}
             buttonType={PgTableButton.ADD_ALL_FILES}