Merge pull request #1214 from CBIIT/bugfix/ICDC-3770

MUI 5 style style fix / reduce table button complexity / Typed implementation

src/bento/dashboardTabData.js

@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import { cellTypes, dataFormatTypes, btnTypes, types } from '../bento-core';
+import { cellTypes, dataFormatTypes } from '../bento-core';
 import {
   customCasesTabDownloadCSV,
   customFilesTabDownloadCSV,
@@ -19,6 +19,36 @@ export const tooltipContent = {
   clsName: 'addSelectedTooltip',
 };
 
+export const baseToolTipConfig = {
+  src: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/svgs/Tooltip.SpeechBubble.svg',
+  alt: 'tooltipIcon',
+  arrow: true,
+  clsName: 'addSelectedTooltip',
+};
+
+export const addFileTooltipText = {
+  case: {
+    addAllFilesText:
+      'Add filtered files associated with all cases in the current results set to My Files',
+    addSelectedFilesText:
+      'Add filtered files associated with selected case(s) to My Files',
+  },
+  sample: {
+    addAllFilesText:
+      'Add filtered files associated with all cases in the current results set to My Files',
+    addSelectedFilesText:
+      'Add filtered files associated with selected sample(s) to My Files',
+  },
+  caseFiles: {
+    addAllFilesText: 'Add all filtered files to My Files',
+    addSelectedFilesText: 'Add selected files to My Files',
+  },
+  studyFiles: {
+    addAllFilesText: 'Add all filtered files to My Files',
+    addSelectedFilesText: 'Add selected files to My Files',
+  },
+};
+
 // --------------- Tooltip configuration --------------
 export const selectAllToolTip = {
   icon: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/icdc/images/svgs/Tooltip.SpeechBubble.svg',
@@ -1956,6 +1986,10 @@ export const tableContainers = [
     addAllFilesResponseKeys: ['fileOverview', 'file_uuid'],
     addAllFileQuery: GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL,
     addSelectedFilesQuery: GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL,
+    addFilesTooltopConfig: {
+      ...baseToolTipConfig,
+      ...addFileTooltipText.case,
+    },
   },
   {
     name: 'Samples',
@@ -2091,12 +2125,17 @@ export const tableContainers = [
     addAllFilesResponseKeys: ['fileOverview', 'file_uuid'],
     addAllFileQuery: GET_ALL_FILEIDS_SAMPLE_TAB_FOR_SELECT_ALL,
     addSelectedFilesQuery: GET_ALL_FILEIDS_SAMPLE_TAB_FOR_SELECT_ALL,
+    addFilesTooltopConfig: {
+      ...baseToolTipConfig,
+      ...addFileTooltipText.sample,
+    },
   },
   {
     name: 'Case Files',
     dataField: 'dataFile',
     api: GET_FILES_OVERVIEW_QUERY,
     selectAllButtonText: 'Add All Files',
+    selectedButtonText: 'Add Selected Files',
     paginationAPIField: 'fileOverview',
     defaultSortField: 'file_name',
     defaultSortDirection: 'asc',
@@ -2254,12 +2293,17 @@ export const tableContainers = [
     addAllFilesResponseKeys: ['fileOverview', 'file_uuid'],
     addAllFileQuery: GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL,
     addSelectedFilesQuery: GET_ALL_FILEIDS_ON_FILESTAB_FOR_SELECT_ALL,
+    addFilesTooltopConfig: {
+      ...baseToolTipConfig,
+      ...addFileTooltipText.caseFiles,
+    },
   },
   {
     name: 'Study Files',
     dataField: 'dataStudyFile',
     api: GET_FILES_OVERVIEW_QUERY,
     selectAllButtonText: 'Add All Files',
+    selectedButtonText: 'Add Selected Files',
     paginationAPIField: 'fileOverview',
     defaultSortField: 'file_name',
     defaultSortDirection: 'asc',
@@ -2377,74 +2421,25 @@ export const tableContainers = [
       noMatch: 'No Matching Records Found',
     },
     id: 'study_file_tab',
+    addSlectedFileButtonLabel: '',
     addFilesRequestVariableKey: 'file_name',
     addFilesResponseKeys: ['fileIdsFromFileName', 'file_uuid'],
     addAllFilesResponseKeys: ['fileOverview', 'file_uuid'],
     addAllFileQuery: GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL,
     addSelectedFilesQuery: GET_ALL_FILEIDS_ON_FILESTAB_FOR_SELECT_ALL,
+    addFilesTooltopConfig: {
+      ...baseToolTipConfig,
+      ...addFileTooltipText.studyFiles,
+    },
   },
 ];
 
 export const alertMessage =
   'The cart is limited to 1000 files. Please narrow the search criteria or remove some files from the cart to add more.';
 
-const addAllFiles = {
-  title: 'Add Associated Files For All',
-  clsName: 'add_all_button',
-  type: types.BUTTON,
-  role: btnTypes.ADD_ALL_FILES,
-  btnType: btnTypes.ADD_ALL_FILES,
-  conditional: false,
-  tooltipCofig: selectAllToolTip,
-  maxFileLimit: 10000,
-  alertMessage,
-};
-
-const addSelectedFiles = {
-  title: 'Add Selected Files ',
-  clsName: 'add_selected_button',
-  type: types.BUTTON,
-  role: btnTypes.ADD_SELECTED_FILES,
-  btnType: btnTypes.ADD_SELECTED_FILES,
-  tooltipCofig: tooltipContent,
-  conditional: true,
-  applyActiveFilter: true,
-  maxFileLimit: 10000,
-};
-
-const jBrowseBtn = {
-  type: types.CUSTOM_ELEM,
-  Jbrowse: true,
-};
-
 export const tableLayOut = [
-  {
-    container: 'buttons',
-    size: 'xl',
-    clsName: 'container_header',
-    items: [addAllFiles, addSelectedFiles, jBrowseBtn],
-  },
   {
     container: 'paginatedTable',
     paginatedTable: true,
   },
-  {
-    container: 'buttons',
-    size: 'xl',
-    clsName: 'container_footer',
-    items: [addSelectedFiles, jBrowseBtn],
-  },
-  {
-    container: 'buttons',
-    size: 'xl',
-    clsName: 'container_footer_link',
-    items: [
-      {
-        title: 'Go to My Files >',
-        clsName: 'go_to_cart',
-        url: '#/fileCentricCart',
-        type: types.LINK,
-      },
-    ],
-  },
 ];

src/components/PaginatedTable/components/AddFilesButtons.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { ButtonView } from '../../../bento-core';
 
-interface TooltipConfig {
+// type clean up
+export interface TooltipConfig {
   src: string;
+  icon: string;
   alt: string;
   arrow: boolean;
   tooltipText: string;
+  toolTipText: string;
+  clsName: string;
 }
 
 interface ComponentProps {
@@ -16,7 +20,8 @@ interface ComponentProps {
   responseKeys: string[];
   tooltipCofig: TooltipConfig;
   buttonType: string;
-  classes: unknown;
+  alertMessage: string;
+  activeFilters: object;
 }
 
 export const AddSelectedFilesButton: React.FC<ComponentProps> = ({
@@ -26,19 +31,22 @@ export const AddSelectedFilesButton: React.FC<ComponentProps> = ({
   addFileQuery,
   responseKeys,
   tooltipCofig,
-  classes = {},
   buttonType,
+  alertMessage = '',
+  activeFilters = {},
 }) => {
   return (
     <ButtonView
       btnType={buttonType}
       title={title}
       clsName={clsName}
-      classes={classes}
       dataKey={dataKey}
       addFileQuery={addFileQuery}
+      classes={{}}
       responseKeys={responseKeys}
       tooltipCofig={tooltipCofig}
+      alertMessage={alertMessage}
+      activeFilters={activeFilters}
     />
   );
 };

src/components/PaginatedTable/typed/TableContext.ts

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import { TableContext as UntypedTableContext } from '../../../bento-core';
+
+interface tableState {
+  selectedRows: string[];
+  title: string;
+  query: string;
+  paginationAPIField: string;
+  dataKey: string;
+  columns: unknown;
+  count: number;
+  selectedFileIds: string[];
+  tableMsg: string;
+  sortBy: string;
+  sortOrder: string;
+  extendedViewConfig: unknown;
+  columnGroups: unknown;
+  rowsPerPage: number;
+  page: number;
+}
+
+interface TableContextType {
+  context: tableState;
+}
+
+// Set table context and table state to Types
+const PgInitTableContext =
+  UntypedTableContext as React.Context<TableContextType>;
+
+export const PaginatedTableContext = () => {
+  const context = useContext(PgInitTableContext);
+  if (!context) {
+    throw new Error('Context must be used within a TableProvider');
+  }
+  return context;
+};

src/components/PaginatedTable/typed/TableInterface.ts

@@ -0,0 +1,9 @@
+import { btnTypes } from '../../../bento-core';
+
+interface ButtonType {
+  ADD_ALL_FILES: string;
+  ADD_SELECTED_FILES: string;
+  DOWNLOAD_MANIFEST: string;
+}
+
+export const PgTableButton = btnTypes as ButtonType;

src/pages/JbrowseDetail/components/JBrowseViewBtn.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import { ToolTip as Tooltip } from "../../../bento-core";
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { ToolTip as Tooltip } from '../../../bento-core';
 import {
   MAX_NUMBER_OF_FILES,
   MULTI_FILES_VIEW,
@@ -15,23 +15,19 @@ import {
   tooltipMsg1,
   tooltipMsg2,
   tooltipErrMsg,
-} from "../../../bento/JBrowseData";
-import { setJborwseSelectedFiles } from "../store/jborwse.reducer";
-import { setSelectedFiles } from "../util";
-import jbrowseLogo from "../../../assets/icons/JbrowseViewIcon2.svg";
+} from '../../../bento/JBrowseData';
+import { setJborwseSelectedFiles } from '../store/jborwse.reducer';
+import { setSelectedFiles } from '../util';
+import jbrowseLogo from '../../../assets/icons/JbrowseViewIcon2.svg';
 import * as Styled from './JBrowseBtn.styled';
 
-const ViewJBrowseButton = ({
-  customClass,
-  disable,
-  selectedFileNames,
-}) => {
-  const selectedDashFiles = useSelector((state) =>
+const ViewJBrowseButton = ({ disable, selectedFileNames }) => {
+  const selectedDashFiles = useSelector(state =>
     state.dashboardTab &&
     state.dashboardTab.dataFileSelected &&
     state.dashboardTab.dataFileSelected.selectedRowInfo
       ? state.dashboardTab.dataFileSelected.selectedRowInfo
-      : null,
+      : null
   );
 
   const filesName =
@@ -48,17 +44,14 @@ const ViewJBrowseButton = ({
 
   const InValidToottipMsg = () => (
     <>
-      <Styled.WarningLabel>{"Warning: "}</Styled.WarningLabel>
+      <Styled.WarningLabel>{'Warning: '}</Styled.WarningLabel>
       <span>{tooltipErrMsg}</span>
     </>
   );
 
   const renderTooltipContent = () => (
     <>
-      <Styled.TooltipContent
-        align="center"
-        color="inherit"
-      >
+      <Styled.TooltipContent align="center" color="inherit">
         {isInactive || disable ? (
           tooltipMsg1
         ) : isInvlaid ? (
@@ -107,7 +100,6 @@ const ViewJBrowseButton = ({
             src={tooltipContent.src}
             alt={tooltipContent.alt}
             id={JBROWSE_TOOLTIP_ICON_ID}
-            className={customClass}
           />
         </Styled.HelpIconButton>
       </Tooltip>

src/pages/caseDetails/FileView/JBrowseTheme.tsx

@@ -8,6 +8,11 @@ const themeOptions: ThemeOptions = {
         root: {
           height: '43px',
           marginLeft: '22px',
+          '&#jbrowse_multi_view_button': {
+            '& img': {
+              width: '2.25em',
+            },
+          },
         },
       },
     },

src/pages/dashboard/components/Dashboard.styled.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Link } from '@mui/material';
+
+export const MyCartLink = styled(Link)({
+  height: '65px',
+  color: '#3E6886',
+  fontSize: '12px',
+  fontFamily: 'Lato',
+  borderBottom: '1px solid #3E6886',
+  textDecoration: 'none',
+  marginLeft: '55px',
+  display: 'block',
+});