From 7a81a3595da23b15b2f19ce5d56da322c88c40bc Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Tue, 1 Nov 2022 16:41:55 -0400
Subject: [PATCH 01/29] INS-434

---
 src/pages/dashboard/caseTable/caseView.js        | 2 --
 src/pages/dashboardTab/store/dashboardReducer.js | 7 -------
 2 files changed, 9 deletions(-)

diff --git a/src/pages/dashboard/caseTable/caseView.js b/src/pages/dashboard/caseTable/caseView.js
index 3a7591cc..20f13261 100644
--- a/src/pages/dashboard/caseTable/caseView.js
+++ b/src/pages/dashboard/caseTable/caseView.js
@@ -206,7 +206,6 @@ const Cases = ({ classes, data }) => {
         <div className={classes.chips}>
           {bubbles}
         </div>
-
         <Grid container>
           <Grid item xs={12} className={classes.caseTitle}>
             {dashboardTable.tableTitle}
@@ -218,7 +217,6 @@ const Cases = ({ classes, data }) => {
               options={options()}
             />
           </Grid>
-
         </Grid>
         <Grid item xs={12} className={classes.saveButtonDiv}>
           <button
diff --git a/src/pages/dashboardTab/store/dashboardReducer.js b/src/pages/dashboardTab/store/dashboardReducer.js
index c6b98260..a5b5e597 100644
--- a/src/pages/dashboardTab/store/dashboardReducer.js
+++ b/src/pages/dashboardTab/store/dashboardReducer.js
@@ -211,21 +211,15 @@ const transformRCRData = (data) => {
 const transformDonutData = (data) => {
   const transformedData = data;
   transformedData.publicationCountByRCRTransformed = transformRCRData(data);
-  // eslint-disable-next-line max-len
   transformedData.projectCountByDOCSorted = data.projectCountByDOC.sort((a, b) => ((a.subjects < b.subjects) ? 1 : -1));
-  // eslint-disable-next-line max-len
   transformedData.publicationCountByYearSorted = data.publicationCountByYear.sort((a, b) => ((a.subjects < b.subjects) ? 1 : -1));
-  // eslint-disable-next-line max-len
   transformedData.projectCountByFiscalYearSorted = data.projectCountByFiscalYear.sort((a, b) => ((a.subjects < b.subjects) ? 1 : -1));
 
   for (let i = 0; i < transformedData.publicationCountByYearSorted.length; i += 1) {
-    // eslint-disable-next-line max-len
     transformedData.publicationCountByYearSorted[i].group = new Date(parseInt(transformedData.publicationCountByYearSorted[i].group, 10)).getFullYear();
   }
 
-  // eslint-disable-next-line max-len
   transformedData.projectCountByAwardAmountSorted = data.projectCountByAwardAmount.sort((a, b) => ((a.subjects < b.subjects) ? 1 : -1));
-  // eslint-disable-next-line max-len
   transformedData.publicationCountByCitationSorted = data.publicationCountByCitation.sort((a, b) => ((a.subjects < b.subjects) ? 1 : -1));
   return transformedData;
 };
@@ -1339,7 +1333,6 @@ const reducers = {
       if (item.variables && item.variables[val.datafield] && item.variables[val.datafield].length) {
         const checkboxItem = newCheckboxData[idx].checkboxItems;
         checkboxItem.map((data, id) => {
-          // eslint-disable-next-line max-len
           const index = item.variables[val.datafield].findIndex((check) => check === data.name);
           if (index >= 0) {
             checkboxItem[id].isChecked = true;

From 29361b8bbe338e36c281d8d2e4377a7fbe0399c4 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 7 Nov 2022 09:12:28 -0500
Subject: [PATCH 02/29] INS-434

---
 src/bento/caseDetailData.js                   |  45 +--
 .../caseDetail/caseDetailTabController.js     | 307 ++++++++++++++++++
 src/pages/caseDetail/caseDetailTabLabel.js    |  30 ++
 .../caseDetail/caseDetailTabThemeConfig.js    |  86 +++++
 src/pages/caseDetail/caseDetailTabView.js     | 179 ++++++++++
 src/pages/caseDetail/caseDetailView.js        |  28 +-
 6 files changed, 616 insertions(+), 59 deletions(-)
 create mode 100644 src/pages/caseDetail/caseDetailTabController.js
 create mode 100644 src/pages/caseDetail/caseDetailTabLabel.js
 create mode 100644 src/pages/caseDetail/caseDetailTabThemeConfig.js
 create mode 100644 src/pages/caseDetail/caseDetailTabView.js

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index ae787d5a..81bdf6e4 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -546,47 +546,10 @@ const GET_CASE_DETAIL_DATA_QUERY = gql`
       project_start_date
       project_end_date
       full_foa
-      publications {
-        publication_id
-        pmc_id
-        year
-        journal
-        title
-        authors
-        publish_date
-        citation_count
-        relative_citation_ratio
-        nih_percentile
-        doi
-      }
-      geos {
-        accession
-        title
-        status
-        submission_date
-        last_update_date
-      }
-      sras {
-        accession
-        study_title
-        bioproject_accession
-        registration_date
-      }
-      dbgaps {
-        accession
-        title
-        release_date
-      }
-      clinical_trials {
-        clinical_trial_id
-        title
-        last_update_posted
-        recruitment_status
-      }
-      patents {
-        patent_id
-        fulfilled_date
-      }
+      num_publications
+      num_datasets
+      num_clinical_trials
+      num_patents
     }
   }
 `;
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
new file mode 100644
index 00000000..e4a24e0d
--- /dev/null
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -0,0 +1,307 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Tabs, Tab, withStyles,
+} from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import SwipeableViews from 'react-swipeable-views';
+import Snackbar from '@material-ui/core/Snackbar';
+import { getOptions } from 'bento-components';
+import TabView from './caseDetailTabView';
+import SuccessOutlinedIcon from '../../utils/SuccessOutlined';
+import TabThemeProvider from './caseDetailTabThemeConfig';
+import TabLabel from './caseDetailTabLabel';
+import {
+  tabs, tooltipContent, tabContainers, tabIndex, externalLinkIcon,
+} from '../../bento/dashboardTabData';
+import {
+  fetchDataForDashboardTab,
+  getTableRowSelectionEvent,
+  tableHasSelections,
+  clearTableSelections,
+  fetchAllFileIDs,
+  getFilesCount,
+} from '../dashboardTab/store/dashboardReducer';
+
+function TabContainer({ children, dir }) {
+  return (
+    <Typography component="div" dir={dir} style={{ padding: '5px,5px,5px,5px' }}>
+      {children}
+    </Typography>
+  );
+}
+
+const tabController = (classes) => {
+  const currentActiveTabTitle = useSelector((state) => (state.dashboardTab
+    && state.dashboardTab.currentActiveTab
+    ? state.dashboardTab.currentActiveTab
+    : tabIndex[0].title));
+  const tabVlaue = tabIndex.map((el) => el.title).indexOf(currentActiveTabTitle) || 0;
+  // tab settings
+  const [currentTab, setCurrentTab] = React.useState(tabVlaue);
+
+  const tableRowSelectionData = [
+    useSelector((state) => (state.dashboardTab.dataCaseSelected)),
+    useSelector((state) => (state.dashboardTab.dataSampleSelected)),
+    useSelector((state) => (state.dashboardTab.dataFileSelected))];
+
+  // data from store
+  const dashboard = useSelector((state) => (state.dashboardTab
+    && state.dashboardTab.datatable
+    ? state.dashboardTab.datatable : {}));
+
+  // get stats data from store
+  const dashboardStats = useSelector((state) => (state.dashboardTab
+    && state.dashboardTab.stats ? state.dashboardTab.stats : {}));
+
+  const allFilters = useSelector((state) => (state.dashboardTab
+    && state.dashboardTab.allActiveFilters ? state.dashboardTab.allActiveFilters : {}));
+  const autoCompleteSelection = useSelector((state) => (state.dashboardTab
+    && state.dashboardTab.autoCompleteSelection
+    ? state.dashboardTab.autoCompleteSelection.subject_ids : {}));
+  const bulkUpload = useSelector((state) => (state.dashboardTab
+    && state.dashboardTab.bulkUpload ? state.dashboardTab.bulkUpload.subject_ids : {}));
+  const subjectIds = autoCompleteSelection.concat(bulkUpload);
+  useEffect(() => {
+    setCurrentTab(0);
+  }, [dashboardStats]);
+
+  const { isCaseSelected } = useSelector((state) => state.dashboardTab);
+
+  const handleTabChange = (event, value) => {
+    setCurrentTab(value);
+    if (!isCaseSelected) {
+      fetchDataForDashboardTab(tabIndex[value].title);
+    }
+  };
+
+  const [snackbarState, setsnackbarState] = React.useState({
+    open: false,
+    value: 0,
+  });
+  function openSnack(value1) {
+    setsnackbarState({ open: true, value: value1 });
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  function closeSnack() {
+    setsnackbarState({ open: false });
+  }
+
+  function getBorderStyle() {
+    const style = '3px solid #42779a';
+    return `${style}`;
+  }
+
+  function getTableColor() {
+    return `${tabIndex[currentTab].primaryColor}`;
+  }
+
+  function getTabLalbel(title, count) {
+    const tabObj = tabIndex[currentTab];
+    // NOTE: refactor white color to theme's white color.
+    const primaryColor = (tabObj.title === title) ? tabIndex[currentTab].selectedColor : undefined;
+    const secondaryColor = (tabObj.title === title) ? tabObj.secondaryColor : undefined;
+
+    return (
+      <TabLabel
+        title={title}
+        count={count}
+        primaryColor={primaryColor}
+        secondaryColor={secondaryColor}
+      />
+    );
+  }
+
+  /* on row select event
+    @param  data  data for initial the table  sample -> [files]
+    @param  allRowsSelected : selected rows
+    @output [f.uuid]
+  */
+  function Type1OnRowsSelect(data, allRowsSelected) {
+    // use reduce to combine all the files' id into single array
+    return allRowsSelected.reduce((accumulator, currentValue) => {
+      if (data[currentValue.dataIndex]) {
+        const { files } = data[currentValue.dataIndex];
+        // check if file exists
+        if (files && files.length > 0) {
+          return accumulator.concat(files.map((f) => f.file_id));
+        }
+      }
+      return accumulator;
+    }, []);
+  }
+
+  /* on row select event
+    @param  data  data for initial the table  sample -> [files]
+    @param  allRowsSelected : selected rows
+    @output [f.uuid]
+  */
+  function Type2OnRowsSelect(data, allRowsSelected) {
+    return allRowsSelected.map((row) => data[row.dataIndex].file_id);
+  }
+
+  /* on row select event
+    @param  data  data for initial the table  sample -> [files]
+    @param  allRowsSelected : selected rows
+    @output [f.uuid]
+  */
+  function Type3OnRowsSelect(data, allRowsSelected) {
+    // use reduce to combine all the files' id into single array
+    return allRowsSelected.reduce((accumulator, currentValue) => {
+      const { files } = data[currentValue.dataIndex];
+      // check if file
+      if (files && files.length > 0) {
+        return accumulator.concat(files);
+      }
+      return accumulator;
+    }, []);
+  }
+
+  // onRowsSelectFunction contains all the onRowsSelection functions
+  // user can pick one for use.
+  const onRowsSelectFunction = {
+    type1: Type1OnRowsSelect,
+    type2: Type2OnRowsSelect,
+    type3: Type3OnRowsSelect,
+  };
+
+  // This function for future use
+  /*  To check if this row is selectable or not.
+    I want the system to visually communicate ("flag") which of
+    the samples being displayed have already had all of their files added to the cart.
+    @param  data  row of data from sample tab
+    @param  cartData, list of fileIDs
+    @output  boolean true-> selectable
+*/
+  // eslint-disable-next-line no-unused-vars
+  function disableRowSelection(data, cartData) {
+    return true;
+  }
+
+  // disableRowSelectionFunction contains all the disableRowSelection functions
+  // user can pick one for use.
+  const disableRowSelectionFunction = {
+    type1: disableRowSelection,
+    type2: disableRowSelection,
+    type3: disableRowSelection,
+  };
+
+  // Tab Header Generator
+  const TABs = tabs.map((tab, index) => (
+    <Tab
+      key={index}
+      id={tab.id}
+      label={
+        getTabLalbel(tab.title, dashboardStats[tab.count] ? dashboardStats[tab.count] : 0)
+      }
+    />
+  ));
+
+  // Tab table Generator
+  const TABContainers = tabContainers.map((container) => (
+    <TabContainer id={container.id}>
+      <TabView
+        options={getOptions(container, classes)}
+        data={dashboard[container.dataField] ? dashboard[container.dataField] : 'undefined'}
+        customColumn={container}
+        customOnRowsSelect={onRowsSelectFunction[container.onRowsSelect]}
+        openSnack={openSnack}
+        closeSnack={closeSnack}
+        disableRowSelection={disableRowSelectionFunction[container.disableRowSelection]}
+        buttonText={container.buttonText}
+        tableID={container.tableID}
+        saveButtonDefaultStyle={container.saveButtonDefaultStyle}
+        ActiveSaveButtonDefaultStyle={container.ActiveSaveButtonDefaultStyle}
+        DeactiveSaveButtonDefaultStyle={container.DeactiveSaveButtonDefaultStyle}
+        // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+        tabIndex={container.tabIndex}
+        externalLinkIcon={externalLinkIcon}
+        count={dashboardStats[container.count] ? dashboardStats[container.count] : 0}
+        api={container.api}
+        paginationAPIField={container.paginationAPIField}
+        paginationAPIFieldDesc={container.paginationAPIFieldDesc}
+        defaultSortCoulmn={container.defaultSortField || ''}
+        defaultSortDirection={container.defaultSortDirection || 'asc'}
+        dataKey={container.dataKey}
+        allFilters={{ ...allFilters, ...{ subject_ids: subjectIds } }}
+        tableHasSelections={tableHasSelections}
+        setRowSelection={getTableRowSelectionEvent()}
+        // selectedRowInfo={tableRowSelectionData[container.tabIndex].selectedRowInfo}
+        // selectedRowIndex={tableRowSelectionData[container.tabIndex].selectedRowIndex}
+        clearTableSelections={clearTableSelections}
+        fetchAllFileIDs={fetchAllFileIDs}
+        tableDownloadCSV={container.tableDownloadCSV || false}
+        getFilesCount={getFilesCount}
+        tooltipMessage={tooltipContent[currentTab]}
+        tooltipIcon={tooltipContent.icon}
+        tooltipAlt={tooltipContent.alt}
+      />
+    </TabContainer>
+  ));
+
+  return (
+    <>
+      <Snackbar
+        className={classes.snackBar}
+        open={snackbarState.open}
+        onClose={closeSnack}
+        autoHideDuration={3000}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        message={(
+          <div className={classes.snackBarMessage}>
+            <span className={classes.snackBarMessageIcon}>
+              <SuccessOutlinedIcon />
+              {' '}
+            </span>
+            <span className={classes.snackBarText}>
+              {snackbarState.value}
+              {' '}
+              File(s) successfully added to your cart
+            </span>
+          </div>
+        )}
+      />
+      <TabThemeProvider tableBorder={getBorderStyle()} tablecolor={getTableColor()}>
+        <Tabs
+          classes
+          value={currentTab}
+          onChange={handleTabChange}
+          indicatorColor="primary"
+          textColor="primary"
+        >
+          {TABs}
+        </Tabs>
+        <SwipeableViews
+          index={currentTab}
+          onChangeIndex={handleTabChange}
+          animateTransitions={false}
+          style={{ overflowX: 'hidden' }}
+        >
+          {TABContainers}
+        </SwipeableViews>
+      </TabThemeProvider>
+    </>
+  );
+};
+
+const styles = () => ({
+  button: {
+    borderRadius: '10px',
+    width: '330px',
+    height: '27px',
+    lineHeight: '18px',
+    fontSize: '10pt',
+    color: '#fff',
+    backgroundColor: '#ff7f15',
+  },
+  snackBarMessageIcon: {
+    verticalAlign: 'middle',
+  },
+  messageTop: {
+    position: 'absolute',
+    right: '20px',
+    zIndex: '300',
+  },
+});
+export default withStyles(styles, { withTheme: true })(tabController);
diff --git a/src/pages/caseDetail/caseDetailTabLabel.js b/src/pages/caseDetail/caseDetailTabLabel.js
new file mode 100644
index 00000000..dce4dd26
--- /dev/null
+++ b/src/pages/caseDetail/caseDetailTabLabel.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core';
+
+const tabLabel = ({
+  classes, title, count, primaryColor,
+}) => (
+  <div className={classes.defaultStyle}>
+    <span style={{ color: primaryColor }}>
+      {title}
+      {' '}
+
+    </span>
+    <span style={{ fontSize: '17px', color: primaryColor }}>
+      (
+      {count}
+      )
+    </span>
+
+  </div>
+);
+
+const styles = () => ({
+  defaultStyle: {
+    fontFamily: 'Lato',
+    textTransform: 'capitalize',
+    fontSize: '21px',
+  },
+});
+
+export default withStyles(styles, { withTheme: true })(tabLabel);
diff --git a/src/pages/caseDetail/caseDetailTabThemeConfig.js b/src/pages/caseDetail/caseDetailTabThemeConfig.js
new file mode 100644
index 00000000..85845024
--- /dev/null
+++ b/src/pages/caseDetail/caseDetailTabThemeConfig.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+import themes, { overrides } from '../../themes';
+
+export default ({
+  children, extraStyles, tableBorder, tablecolor,
+}) => {
+  const style = [];
+
+  const overridesObj = themes.light.overrides;
+
+  if (extraStyles) style.push(extraStyles);
+
+  if (tableBorder) {
+    overridesObj.MUIDataTableToolbarSelect.root.borderTop = '2px solid #e7e5e5';
+    overridesObj.MUIDataTableSelectCell.headerCell.borderTop = tableBorder;
+    overridesObj.MUIDataTableSelectCell.headerCell.borderBottom = tableBorder;
+    overridesObj.MUIDataTableHeadCell.fixedHeader.borderTop = tableBorder;
+    overridesObj.MUIDataTableHeadCell.fixedHeader.borderBottom = tableBorder;
+    overridesObj.MuiTableFooter = { root: { borderTop: tableBorder } };
+    overridesObj.MUIDataTableToolbar = {
+      root: {
+        minHeight: '15px',
+        position: 'absolute',
+        top: '5px',
+      },
+    };
+    overridesObj.MuiTablePagination.toolbar.paddingTop = '11px';
+  }
+
+  const PrivateTabIndicator = {
+    root: {
+      transitionProperty: 'none',
+      height: '0px',
+    },
+  };
+
+  const MuiTabs = {
+    root: {
+      marginTop: '15px',
+    },
+    flexContainer: {
+      borderBottom: '10px solid #40789C',
+      overflow: 'visible !important',
+    },
+  };
+
+  const MuiTab = {
+    root: {
+      width: '250px',
+      height: '45px',
+      minHeight: '40px',
+      marginRight: '10px',
+      background: '#EAEAEA',
+      fontSize: '18px',
+      fontFamily: 'Raleway',
+      fontWeight: '400',
+      lineHeight: '18px',
+      paddingLeft: '5px',
+      letterSpacing: '0.25px',
+      borderTop: '1px solid black',
+      borderLeft: '1px solid black',
+      borderRight: '1px solid black',
+      '&$selected': {
+        background: tablecolor,
+        fontWeight: 'bolder',
+      },
+    },
+    labelContainer: {
+
+    },
+  };
+
+  overridesObj.MuiTabs = MuiTabs;
+  overridesObj.MuiTab = MuiTab;
+  overridesObj.PrivateTabIndicator = PrivateTabIndicator;
+
+  style.push(overridesObj);
+  const computedTheme = createTheme({ ...themes.light, ...overrides, ...style });
+
+  return (
+    <MuiThemeProvider theme={computedTheme}>
+      {children}
+    </MuiThemeProvider>
+  );
+};
diff --git a/src/pages/caseDetail/caseDetailTabView.js b/src/pages/caseDetail/caseDetailTabView.js
new file mode 100644
index 00000000..dc500cc3
--- /dev/null
+++ b/src/pages/caseDetail/caseDetailTabView.js
@@ -0,0 +1,179 @@
+/* eslint-disable */
+import React from 'react';
+import {
+  Grid,
+  withStyles,
+} from '@material-ui/core';
+import { getColumns } from 'bento-components';
+import _ from 'lodash';
+import {
+  GET_PROJECTS_OVERVIEW_QUERY,
+  GET_PUBLICATIONS_OVERVIEW_QUERY,
+  GET_DATASETS_OVERVIEW_QUERY,
+  GET_CLINICAL_TRIALS_OVERVIEW_QUERY,
+  GET_PATENTS_OVERVIEW_QUERY,
+} from '../../bento/dashboardTabData';
+import CustomDataTable from '../../components/serverPaginatedTable/serverPaginatedTable';
+import DocumentDownload from '../../components/DocumentDownload/DocumentDownloadView';
+import globalData from '../../bento/siteWideConfig';
+
+const getOverviewQuery = (api) => (api === 'GET_PROJECTS_OVERVIEW_QUERY' ? GET_PROJECTS_OVERVIEW_QUERY : (api === 'GET_PUBLICATIONS_OVERVIEW_QUERY' ? GET_PUBLICATIONS_OVERVIEW_QUERY : (api === 'GET_DATASETS_OVERVIEW_QUERY' ? GET_DATASETS_OVERVIEW_QUERY : (api === 'GET_CLINICAL_TRIALS_OVERVIEW_QUERY' ? GET_CLINICAL_TRIALS_OVERVIEW_QUERY : GET_PATENTS_OVERVIEW_QUERY))));
+
+const TabView = ({
+  classes,
+  data,
+  customColumn,
+  primaryKeyIndex = 0,
+  disableRowSelection,
+  tableID,
+  externalLinkIcon,
+  options,
+  count,
+  api,
+  paginationAPIField,
+  paginationAPIFieldDesc,
+  dataKey,
+  allFilters,
+  defaultSortCoulmn,
+  defaultSortDirection,
+  setRowSelection,
+  selectedRowInfo = [],
+  selectedRowIndex = [],
+  tableDownloadCSV,
+}) => {
+  function rowSelectionEvent(displayData, rowsSelected) {
+    const displayedDataKeies = displayData;
+    const selectedRowsKey = rowsSelected
+      ? rowsSelected.map((index) => displayedDataKeies[index])
+      : [];
+    let newSelectedRowInfo = [];
+
+    if (rowsSelected) {
+      if (selectedRowInfo.length > 0) {
+        newSelectedRowInfo = selectedRowInfo.filter((key) => {
+          if (displayedDataKeies.includes(key)) {
+            return false;
+          }
+          return true;
+        });
+      }
+    } else {
+      newSelectedRowInfo = selectedRowInfo;
+    }
+    newSelectedRowInfo = newSelectedRowInfo.concat(selectedRowsKey);
+
+    const newSelectedRowIndex = displayedDataKeies.reduce(
+      (accumulator, currentValue, currentIndex) => {
+        if (newSelectedRowInfo.includes(currentValue)) {
+          accumulator.push(currentIndex);
+        }
+        return accumulator;
+      }, [],
+    );
+
+    if (_.differenceWith(
+      newSelectedRowIndex,
+      selectedRowIndex,
+      _.isEqual,
+    ).length !== 0
+      || _.differenceWith(
+        newSelectedRowInfo,
+        selectedRowInfo,
+        _.isEqual,
+      ).length !== 0
+      || _.differenceWith(
+        selectedRowInfo,
+        newSelectedRowInfo,
+        _.isEqual,
+      ).length !== 0
+      || _.differenceWith(
+        selectedRowIndex,
+        newSelectedRowIndex,
+        _.isEqual,
+      ).length !== 0) {
+      setRowSelection({
+        selectedRowInfo: newSelectedRowInfo,
+        selectedRowIndex: newSelectedRowIndex,
+      });
+    }
+  }
+
+  function onRowsSelect(curr, allRowsSelected, rowsSelected, displayData) {
+    rowSelectionEvent(displayData.map((d) => d.data[primaryKeyIndex]), rowsSelected);
+  }
+
+  const defaultOptions = () => ({
+    dataKey,
+    rowsSelectedTrigger: (displayData, rowsSelected) => rowSelectionEvent(
+      displayData,
+      rowsSelected,
+    ),
+    rowsSelected: selectedRowIndex,
+    onRowSelectionChange: onRowsSelect,
+    isRowSelectable: (dataIndex) => (disableRowSelection
+      ? disableRowSelection(data[dataIndex], fileIDs) : true),
+  });
+
+  const finalOptions = {
+    ...options,
+    ...defaultOptions(),
+    serverTableRowCount: selectedRowInfo.length,
+  };
+
+  const dataTransformCallbacks = customColumn.columns.filter((column, idx) => {
+    return column.dataTransform !== undefined;
+  });
+
+  const headerStyles = customColumn.columns.map((column) => {
+    return column.headerStyles;
+  });
+
+  return (
+    <div>
+      <Grid container>
+        <Grid item xs={12} id={tableID}>
+          <CustomDataTable
+            key={data.length}
+            data={data}
+            columns={getColumns(customColumn, classes, data, externalLinkIcon, '', () => { }, DocumentDownload, globalData.replaceEmptyValueWith)}
+            options={finalOptions}
+            count={count}
+            overview={getOverviewQuery(api)}
+            paginationAPIField={paginationAPIField}
+            paginationAPIFieldDesc={paginationAPIFieldDesc}
+            queryCustomVaribles={allFilters}
+            defaultSortCoulmn={defaultSortCoulmn}
+            defaultSortDirection={defaultSortDirection}
+            tableDownloadCSV={tableDownloadCSV}
+            dataTransformation={dataTransformCallbacks}
+            headerStyles={headerStyles}
+          />
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+const styles = () => ({
+  root: {
+    fontFamily: '"Open Sans", sans-serif',
+    fontSize: '9pt',
+    letterSpacing: '0.025em',
+    color: '#000',
+  },
+  button: {
+    borderRadius: '10px',
+    width: '156px',
+    lineHeight: '37px',
+    fontSize: '12px',
+    textTransform: 'uppercase',
+    fontFamily: 'Lato',
+    color: '#fff',
+    backgroundColor: '#10A075',
+    marginTop: '6px',
+    marginBottom: '10px',
+    marginRight: '5px',
+  },
+});
+
+export default withStyles(styles, { withTheme: true })(TabView);
diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index 45e7a574..0d6161f0 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -30,6 +30,7 @@ import Snackbar from '../../components/Snackbar';
 import { fetchDataForDashboardDataTable } from '../dashboard/dashboardState';
 import Tab from '../../components/Tab/Tab';
 import TabPanel from '../../components/Tab/TabPanel';
+import Tabs from './caseDetailTabController';
 
 // Main case detail component
 const CaseDetail = ({ data, filesOfSamples, classes }) => {
@@ -58,10 +59,10 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
   const stat = {
     numberOfPrograms: 1,
     numberOfProjects: 1,
-    numberOfPublications: data.publications.length,
-    numberOfDatasets: data.geos.length + data.sras.length + data.dbgaps.length,
-    numberOfClinicalTrials: data.clinical_trials.length,
-    numberOfPatents: data.patents.length,
+    numberOfPublications: data.num_publications,
+    numberOfDatasets: data.num_datasets,
+    numberOfClinicalTrials: data.num_clinical_trials,
+    numberOfPatents: data.num_patents,
   };
 
   const breadCrumbJson = [{
@@ -74,34 +75,24 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
     items: [
       {
         index: 0,
-        label: `PUBLICATIONS (${data.publications.length})`,
+        label: `PUBLICATIONS (${data.num_publications})`,
         value: 'publications',
       },
       {
         index: 1,
-        label: `GEOS (${data.geos.length})`,
+        label: `DATASETS (${data.num_datasets})`,
         value: 'geos',
       },
       {
         index: 2,
-        label: `SRAS (${data.sras.length})`,
+        label: `CLINICAL TRIALS (${data.num_clinical_trials})`,
         value: 'sras',
       },
       {
         index: 3,
-        label: `DBGAPS (${data.dbgaps.length})`,
+        label: `PATENTS (${data.num_patents})`,
         value: 'dbgaps',
       },
-      {
-        index: 4,
-        label: `CLINICAL TRIALS (${data.clinical_trials.length})`,
-        value: 'clinical_trials',
-      },
-      {
-        index: 5,
-        label: `PATENTS (${data.patents.length})`,
-        value: 'patents',
-      },
     ],
   };
 
@@ -203,6 +194,7 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
           </Grid>
         </div>
       </div>
+      {/* <Tabs /> */}
       <div className={classes.container}>
         <div className={classes.detailContainer}>
           <Grid container>

From 515b7bc0489f0c01f94f43a9c293d8bfc37485d0 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 7 Nov 2022 15:30:08 -0500
Subject: [PATCH 03/29] INS-434

---
 src/bento/caseDetailData.js                   | 1107 +++++++++-----
 src/pages/caseDetail/caseDetailModal.js       |   63 +
 .../caseDetail/caseDetailTabController.js     |   67 +-
 src/pages/caseDetail/caseDetailTabView.js     |  273 +++-
 src/pages/caseDetail/caseDetailView.js        |  272 +---
 .../caseDetail/store/caseDetailReducer.js     | 1289 +++++++++++++++++
 .../dashboardTab/components/tabController.js  |    5 +-
 7 files changed, 2370 insertions(+), 706 deletions(-)
 create mode 100644 src/pages/caseDetail/caseDetailModal.js
 create mode 100644 src/pages/caseDetail/store/caseDetailReducer.js

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index 81bdf6e4..d6f3639b 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -1,6 +1,10 @@
 import gql from 'graphql-tag';
-import { FileOnRowsSelect } from '../utils/fileTable';
-import { SampleOnRowsSelect } from '../utils/sampleFileTable';
+import {
+  customPublicationsTabDownloadCSV,
+  customDatasetsTabDownloadCSV,
+  customClinicalTrialsTabDownloadCSV,
+  customPatentsTabDownloadCSV,
+} from './tableDownloadCSV';
 
 // --------------- Tooltip configuration --------------
 export const tooltipContent = {
@@ -105,413 +109,612 @@ export const externalLinkIcon = {
   alt: 'External link icon',
 };
 
-// --------------- Table 1 configuration --------------
-const table1 = {
-  // Set 'display' to false to hide the table entirely
-  display: true,
-  // Table title
-  tableTitle: 'Publications',
-  // Field name for files data, need to be updated only when using a different GraphQL query
-  subjectDetailField: 'publications',
-  // Value must be one of the 'dataField's in fileTableColumns
-  defaultSortField: 'publication_id',
-  // 'asc' or 'desc'
-  defaultSortDirection: 'asc',
-  // Text to appear on Add to cart button
-  buttonText: 'Add Selected Files',
-  saveButtonDefaultStyle: {
-    color: '#fff',
-    backgroundColor: '#09A175',
-    opacity: '1',
-    border: '0px',
-    cursor: 'pointer',
+// --------------- Tabs Header Data configuration --------------
+export const tabs = [
+  {
+    id: 'publication_tab',
+    title: 'Publications',
+    dataField: 'dataPublication',
+    count: 'numberOfPublications',
   },
-  ActiveSaveButtonDefaultStyle: {
-    disabled: 'true',
-    opacity: '0.3',
-    cursor: 'auto',
+  {
+    id: 'dataset_tab',
+    title: 'Datasets',
+    dataField: 'dataDataset',
+    count: 'numberOfDatasets',
   },
-  DeactiveSaveButtonDefaultStyle: {
-    cursor: 'pointer',
-    opacity: 'unset',
-    border: 'unset',
+  {
+    id: 'clinical_trial_tab',
+    title: 'Clinical Trials',
+    dataField: 'dataClinicalTrial',
+    count: 'numberOfClinicalTrials',
   },
-  // Help Icon Message
-  tooltipMessage: 'Click button to add selected files associated with the selected sample(s).',
-  helpMessage: 'Here help message',
-  // showHideColumns 'true' or 'false'
-  showHideColumns: true,
-  // download csv
-  download: false,
-  // downloaded File Name
-  downloadFileName: 'Bento_case_files_download',
-  // Set 'selectableRows' to true to show the row selection
-  selectableRows: false,
-  // A maximum of 10 columns are allowed
-  columns: [
-    {
-      dataField: 'publication_id',
-      header: 'Publication ID',
-      sort: 'asc',
-      primary: true,
-      link: 'https://pubmed.ncbi.nlm.nih.gov/{publication_id}/',
-      display: true,
-    },
-    {
-      dataField: 'title',
-      header: 'Title',
-    },
-    {
-      dataField: 'authors',
-      header: 'Authors',
-    },
-    {
-      dataField: 'citation_count',
-      header: 'Citation Count',
-    },
-    {
-      dataField: 'relative_citation_ratio',
-      header: 'Relative Citation Ratio',
-    },
-    {
-      dataField: 'nih_percentile',
-      header: 'NIH Percentile',
-    },
-    {
-      dataField: 'doi',
-      header: 'DOI',
-    },
-  ],
-  // Util Functions
-  // Custom function on selct checkbox is selected.
-  customOnRowsSelect: SampleOnRowsSelect,
-};
+  {
+    id: 'patent_tab',
+    title: 'Patents',
+    dataField: 'dataPatent',
+    count: 'numberOfPatents',
+  },
+];
 
-// --------------- Table 2 configuration --------------
-const table2 = {
-  // Set 'display' to false to hide the table entirely
-  display: true,
-  // Table title
-  tableTitle: 'GEOs',
-  // Field name for files data, need to be updated only when using a different GraphQL query
-  subjectDetailField: 'geos',
-  // Value must be one of the 'dataField's in fileTableColumns
-  defaultSortField: 'accession',
-  // 'asc' or 'desc'
-  defaultSortDirection: 'asc',
-  // Text to appear on Add to cart button
-  buttonText: 'Add Selected Files',
-  saveButtonDefaultStyle: {
-    color: '#fff',
-    backgroundColor: '#09A175',
-    opacity: '1',
-    border: '0px',
-    cursor: 'pointer',
+// --------------- Tabs Header Style configuration --------------
+export const tabIndex = [
+  {
+    title: 'Publications',
+    primaryColor: '#E7E5F1',
+    secondaryColor: '#C3DBD4',
+    selectedColor: '#6D679E',
   },
-  ActiveSaveButtonDefaultStyle: {
-    disabled: 'true',
-    opacity: '0.3',
-    cursor: 'auto',
+  {
+    title: 'Datasets',
+    primaryColor: '#D6F2EA',
+    secondaryColor: '#FFDFB8',
+    selectedColor: '#10A075',
   },
-  DeactiveSaveButtonDefaultStyle: {
-    cursor: 'pointer',
-    opacity: 'unset',
-    border: 'unset',
+  {
+    title: 'Clinical Trials',
+    primaryColor: '#D3F0F2',
+    secondaryColor: '#E4E8D5',
+    selectedColor: '#0FA8B1',
   },
-  // Help Icon Message
-  tooltipMessage: 'Click button to add selected files.',
-  helpMessage: 'Here help message',
-  // showHideColumns 'true' or 'false'
-  showHideColumns: true,
-  // download csv 'true' or 'false'
-  download: false,
-  // downloaded File Name
-  downloadFileName: 'Bento_case_samples_download',
-  // Set 'selectableRows' to true to show the row selection
-  selectableRows: false,
-  // A maximum of 10 columns are allowed
-  columns: [
-    {
-      dataField: 'accession',
-      header: 'Accession',
-      link: 'https://www.ncbi.nlm.nih.gov/gds/?term={accession}',
-    },
-    {
-      dataField: 'title',
-      header: 'Title',
-    },
-    {
-      dataField: 'status',
-      header: 'Status',
+  {
+    title: 'Patents',
+    primaryColor: '#CFEDF9',
+    secondaryColor: '#C9F1F1',
+    selectedColor: '#0DAFEC',
+  },
+];
+
+export const CASE_DETAIL_QUERY = gql`
+query projectDetail($project_id: String!) {
+  projectDetail(project_id: $project_id) {
+    num_publications
+    num_datasets
+    num_clinical_trials
+    num_patents
+  }
+}
+`;
+
+// --------------- Tabs Table configuration --------------
+export const tabContainers = [
+  {
+    name: 'Publications',
+    dataField: 'dataPublication',
+    api: 'GET_PUBLICATIONS_OVERVIEW_QUERY',
+    paginationAPIField: 'publicationOverView',
+    defaultSortField: 'publication_id',
+    defaultSortDirection: 'asc',
+    count: 'numberOfPublications',
+    buttonText: 'Add Selected Files',
+    dataKey: 'publication_id',
+    saveButtonDefaultStyle: {
+      color: '#fff',
+      backgroundColor: '#DC2FDA',
+      opacity: '1',
+      border: '0px',
+      cursor: 'pointer',
     },
-    {
-      dataField: 'submission_date',
-      header: 'Submission Date',
+    DeactiveSaveButtonDefaultStyle: {
+      opacity: '0.3',
+      cursor: 'auto',
     },
-    {
-      dataField: 'last_update_date',
-      header: 'Last Update Date',
+    ActiveSaveButtonDefaultStyle: {
+      cursor: 'pointer',
+      opacity: 'unset',
+      border: 'unset',
     },
-  ],
-  // Util Functions
-  // Custom function on selct checkbox is selected.
-  customOnRowsSelect: FileOnRowsSelect,
-};
-
-// --------------- Table 3 configuration --------------
-const table3 = {
-  // Set 'display' to false to hide the table entirely
-  display: true,
-  // Table title
-  tableTitle: 'SRAs',
-  // Field name for files data, need to be updated only when using a different GraphQL query
-  subjectDetailField: 'sras',
-  // Value must be one of the 'dataField's in fileTableColumns
-  defaultSortField: 'accession',
-  // 'asc' or 'desc'
-  defaultSortDirection: 'asc',
-  // Text to appear on Add to cart button
-  buttonText: 'Add Selected Files',
-  saveButtonDefaultStyle: {
-    color: '#fff',
-    backgroundColor: '#09A175',
-    opacity: '1',
-    border: '0px',
-    cursor: 'pointer',
-  },
-  ActiveSaveButtonDefaultStyle: {
-    disabled: 'true',
-    opacity: '0.3',
-    cursor: 'auto',
-  },
-  DeactiveSaveButtonDefaultStyle: {
-    cursor: 'pointer',
-    opacity: 'unset',
-    border: 'unset',
+    columns: [
+      {
+        dataField: 'publication_id',
+        header: 'PubMed ID',
+        sort: 'asc',
+        primary: true,
+        link: 'https://pubmed.ncbi.nlm.nih.gov/{publication_id}/',
+        display: true,
+        headerStyles: {
+          width: '5%',
+        },
+      },
+      {
+        dataField: 'title',
+        header: 'Title',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '25%',
+        },
+      },
+      {
+        dataField: 'authors',
+        header: 'Authors',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '25%',
+        },
+      },
+      {
+        dataField: 'citation_count',
+        header: 'Citation Count',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'relative_citation_ratio',
+        header: 'Relative Citation Ratio',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'nih_percentile',
+        header: 'NIH Percentile',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+    ],
+    id: 'publication_tab',
+    onRowsSelect: 'type1',
+    disableRowSelection: 'type1',
+    tableID: 'publication_tab_table',
+    selectableRows: false,
+    tabIndex: '1',
+    tableDownloadCSV: customPublicationsTabDownloadCSV,
+    downloadFileName: 'publications_download',
+    headerPagination: true,
+    footerPagination: true,
   },
-  // Help Icon dbgap
-  tooltipMessage: 'Click button to add selected files.',
-  helpMessage: 'Here help message',
-  // showHideColumns 'true' or 'false'
-  showHideColumns: true,
-  // download csv 'true' or 'false'
-  download: false,
-  // downloaded File Name
-  downloadFileName: 'Bento_case_samples_download',
-  // Set 'selectableRows' to true to show the row selection
-  selectableRows: false,
-  // A maximum of 10 columns are allowed
-  columns: [
-    {
-      dataField: 'accession',
-      header: 'Accession',
-      link: 'https://www.ncbi.nlm.nih.gov/sra/?term={accession}',
-    },
-    {
-      dataField: 'study_title',
-      header: 'Study Title',
+  {
+    name: 'Datasets',
+    dataField: 'dataDataset',
+    api: 'GET_DATASETS_OVERVIEW_QUERY',
+    paginationAPIField: 'datasetOverView',
+    defaultSortField: 'accession',
+    defaultSortDirection: 'asc',
+    count: 'numberOfDatasets',
+    buttonText: 'Add Selected Files',
+    dataKey: 'accession',
+    saveButtonDefaultStyle: {
+      color: '#fff',
+      backgroundColor: '#DC2FDA',
+      opacity: '1',
+      border: '0px',
+      cursor: 'pointer',
     },
-    {
-      dataField: 'bioproject_accession',
-      header: 'Bioproject Accession',
+    DeactiveSaveButtonDefaultStyle: {
+      opacity: '0.3',
+      cursor: 'auto',
     },
-    {
-      dataField: 'registration_date',
-      header: 'Registration Date',
+    ActiveSaveButtonDefaultStyle: {
+      cursor: 'pointer',
+      opacity: 'unset',
+      border: 'unset',
     },
-  ],
-  // Util Functions
-  // Custom function on selct checkbox is selected.
-  customOnRowsSelect: FileOnRowsSelect,
-};
-
-// --------------- Table 4 configuration --------------
-const table4 = {
-  // Set 'display' to false to hide the table entirely
-  display: true,
-  // Table title
-  tableTitle: 'DBGaps',
-  // Field name for files data, need to be updated only when using a different GraphQL query
-  subjectDetailField: 'dbgaps',
-  // Value must be one of the 'dataField's in fileTableColumns
-  defaultSortField: 'accession',
-  // 'asc' or 'desc'
-  defaultSortDirection: 'asc',
-  // Text to appear on Add to cart button
-  buttonText: 'Add Selected Files',
-  saveButtonDefaultStyle: {
-    color: '#fff',
-    backgroundColor: '#09A175',
-    opacity: '1',
-    border: '0px',
-    cursor: 'pointer',
-  },
-  ActiveSaveButtonDefaultStyle: {
-    disabled: 'true',
-    opacity: '0.3',
-    cursor: 'auto',
-  },
-  DeactiveSaveButtonDefaultStyle: {
-    cursor: 'pointer',
-    opacity: 'unset',
-    border: 'unset',
+    columns: [
+      {
+        dataField: 'accession',
+        header: 'Accession',
+        sort: 'asc',
+        link: '{link}',
+        primary: true,
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'link',
+        header: 'Link',
+        sort: 'asc',
+        link: '{link}',
+        display: false,
+      },
+      {
+        dataField: 'transformed_type',
+        header: 'Type',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '5%',
+        },
+      },
+      {
+        dataField: 'title',
+        header: 'Title',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '30%',
+        },
+      },
+      {
+        dataField: 'submission_date',
+        header: 'Submission Date',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'last_update_date',
+        header: 'Last Update Date',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'release_date',
+        header: 'Release Date',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'registration_date',
+        header: 'Registration Date',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+    ],
+    id: 'dataset_tab',
+    onRowsSelect: 'type1',
+    disableRowSelection: 'type1',
+    tableID: 'dataset_tab_table',
+    selectableRows: false,
+    tabIndex: '2',
+    tableDownloadCSV: customDatasetsTabDownloadCSV,
+    downloadFileName: 'datasets_download',
+    headerPagination: true,
+    footerPagination: true,
   },
-  // Help Icon Message
-  tooltipMessage: 'Click button to add selected files.',
-  helpMessage: 'Here help message',
-  // showHideColumns 'true' or 'false'
-  showHideColumns: true,
-  // download csv 'true' or 'false'
-  download: false,
-  // downloaded File Name
-  downloadFileName: 'Bento_case_samples_download',
-  // Set 'selectableRows' to true to show the row selection
-  selectableRows: false,
-  // A maximum of 10 columns are allowed
-  columns: [
-    {
-      dataField: 'accession',
-      header: 'Accession',
-      link: 'https://www.ncbi.nlm.nih.gov/gap/?term={accession}',
+  {
+    name: 'Clinical Trials',
+    dataField: 'dataClinicalTrial',
+    api: 'GET_CLINICAL_TRIALS_OVERVIEW_QUERY',
+    paginationAPIField: 'clinicalTrialOverView',
+    defaultSortField: 'clinical_trial_id',
+    defaultSortDirection: 'asc',
+    count: 'numberOfClinicalTrials',
+    buttonText: 'Add Selected Files',
+    dataKey: 'clinical_trial_id',
+    saveButtonDefaultStyle: {
+      color: '#fff',
+      backgroundColor: '#DC2FDA',
+      opacity: '1',
+      border: '0px',
+      cursor: 'pointer',
     },
-    {
-      dataField: 'title',
-      header: 'Title',
+    DeactiveSaveButtonDefaultStyle: {
+      opacity: '0.3',
+      cursor: 'auto',
     },
-    {
-      dataField: 'release_date',
-      header: 'Release Date',
+    ActiveSaveButtonDefaultStyle: {
+      cursor: 'pointer',
+      opacity: 'unset',
+      border: 'unset',
     },
-  ],
-  // Util Functions
-  // Custom function on selct checkbox is selected.
-  customOnRowsSelect: FileOnRowsSelect,
-};
-
-// --------------- Table 5 configuration --------------
-const table5 = {
-  // Set 'display' to false to hide the table entirely
-  display: true,
-  // Table title
-  tableTitle: 'Clinical Trials',
-  // Field name for files data, need to be updated only when using a different GraphQL query
-  subjectDetailField: 'clinical_trials',
-  // Value must be one of the 'dataField's in fileTableColumns
-  defaultSortField: 'clinical_trial_id',
-  // 'asc' or 'desc'
-  defaultSortDirection: 'asc',
-  // Text to appear on Add to cart button
-  buttonText: 'Add Selected Files',
-  saveButtonDefaultStyle: {
-    color: '#fff',
-    backgroundColor: '#09A175',
-    opacity: '1',
-    border: '0px',
-    cursor: 'pointer',
-  },
-  ActiveSaveButtonDefaultStyle: {
-    disabled: 'true',
-    opacity: '0.3',
-    cursor: 'auto',
-  },
-  DeactiveSaveButtonDefaultStyle: {
-    cursor: 'pointer',
-    opacity: 'unset',
-    border: 'unset',
+    columns: [
+      {
+        dataField: 'clinical_trial_id',
+        header: 'Clinical Trial ID',
+        sort: 'asc',
+        link: 'https://clinicaltrials.gov/ct2/show/{clinical_trial_id}/',
+        primary: true,
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'title',
+        header: 'Title',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '55%',
+        },
+      },
+      {
+        dataField: 'last_update_posted',
+        header: 'Last Update Posted',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+      {
+        dataField: 'recruitment_status',
+        header: 'Recruitment Status',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '10%',
+        },
+      },
+    ],
+    id: 'clinical_trial_tab',
+    onRowsSelect: 'type1',
+    disableRowSelection: 'type1',
+    tableID: 'clinical_trial_tab_table',
+    selectableRows: false,
+    tabIndex: '3',
+    tableDownloadCSV: customClinicalTrialsTabDownloadCSV,
+    downloadFileName: 'clinical_trials_download',
+    headerPagination: true,
+    footerPagination: true,
   },
-  // Help Icon Message
-  tooltipMessage: 'Click button to add selected files.',
-  helpMessage: 'Here help message',
-  // showHideColumns 'true' or 'false'
-  showHideColumns: true,
-  // download csv 'true' or 'false'
-  download: false,
-  // downloaded File Name
-  downloadFileName: 'Bento_case_samples_download',
-  // Set 'selectableRows' to true to show the row selection
-  selectableRows: false,
-  // A maximum of 10 columns are allowed
-  columns: [
-    {
-      dataField: 'clinical_trial_id',
-      header: 'Clinical Trial',
-      link: 'https://clinicaltrials.gov/ct2/show/{clinical_trial_id}/',
-    },
-    {
-      dataField: 'title',
-      header: 'Title',
+  {
+    name: 'Patents',
+    dataField: 'dataPatent',
+    api: 'GET_PATENTS_OVERVIEW_QUERY',
+    paginationAPIField: 'patentOverView',
+    defaultSortField: 'patent_id',
+    defaultSortDirection: 'asc',
+    count: 'numberOfPatents',
+    buttonText: 'Add Selected Files',
+    dataKey: 'patent_id',
+    saveButtonDefaultStyle: {
+      color: '#fff',
+      backgroundColor: '#DC2FDA',
+      opacity: '1',
+      border: '0px',
+      cursor: 'pointer',
     },
-    {
-      dataField: 'last_update_posted',
-      header: 'Last Update Posted',
+    DeactiveSaveButtonDefaultStyle: {
+      opacity: '0.3',
+      cursor: 'auto',
     },
-    {
-      dataField: 'recruitment_status',
-      header: 'Recruitment Status',
+    ActiveSaveButtonDefaultStyle: {
+      cursor: 'pointer',
+      opacity: 'unset',
+      border: 'unset',
     },
-  ],
-  // Util Functions
-  // Custom function on selct checkbox is selected.
-  customOnRowsSelect: FileOnRowsSelect,
-};
-
-// --------------- Table 6 configuration --------------
-const table6 = {
-  // Set 'display' to false to hide the table entirely
-  display: true,
-  // Table title
-  tableTitle: 'Patents',
-  // Field name for files data, need to be updated only when using a different GraphQL query
-  subjectDetailField: 'patents',
-  // Value must be one of the 'dataField's in fileTableColumns
-  defaultSortField: 'patent_id',
-  // 'asc' or 'desc'
-  defaultSortDirection: 'asc',
-  // Text to appear on Add to cart button
-  buttonText: 'Add Selected Files',
-  saveButtonDefaultStyle: {
-    color: '#fff',
-    backgroundColor: '#09A175',
-    opacity: '1',
-    border: '0px',
-    cursor: 'pointer',
-  },
-  ActiveSaveButtonDefaultStyle: {
-    disabled: 'true',
-    opacity: '0.3',
-    cursor: 'auto',
-  },
-  DeactiveSaveButtonDefaultStyle: {
-    cursor: 'pointer',
-    opacity: 'unset',
-    border: 'unset',
+    columns: [
+      {
+        dataField: 'patent_id',
+        header: 'Patent ID',
+        sort: 'asc',
+        primary: true,
+        display: true,
+        headerStyles: {
+          width: '40%',
+        },
+      },
+      {
+        dataField: 'fulfilled_date',
+        header: 'Fulfilled Date',
+        sort: 'asc',
+        display: true,
+        headerStyles: {
+          width: '30%',
+        },
+      },
+    ],
+    id: 'patent_tab',
+    onRowsSelect: 'type1',
+    disableRowSelection: 'type1',
+    tableID: 'patent_tab_table',
+    selectableRows: false,
+    tabIndex: '4',
+    tableDownloadCSV: customPatentsTabDownloadCSV,
+    downloadFileName: 'patents_download',
+    headerPagination: true,
+    footerPagination: true,
   },
-  // Help Icon Message
-  tooltipMessage: 'Click button to add selected files.',
-  helpMessage: 'Here help message',
-  // showHideColumns 'true' or 'false'
-  showHideColumns: true,
-  // download csv 'true' or 'false'
-  download: false,
-  // downloaded File Name
-  downloadFileName: 'Bento_case_samples_download',
-  // Set 'selectableRows' to true to show the row selection
-  selectableRows: false,
-  // A maximum of 10 columns are allowed
-  columns: [
-    {
-      dataField: 'patent_id',
-      header: 'Patent ID',
-    },
-    {
-      dataField: 'fulfilled_date',
-      header: 'Fulfilled Date',
-    },
-  ],
-  // Util Functions
-  // Custom function on selct checkbox is selected.
-  customOnRowsSelect: FileOnRowsSelect,
-};
+];
+
+export const GET_ALL_FILEIDS_CASESTAB_FOR_SELECT_ALL = gql`
+query search (          
+  $subject_ids: [String],
+){
+  fileIDsFromList (          
+      subject_ids: $subject_ids,
+  ) 
+}
+  `;
+
+export const GET_ALL_FILEIDS_SAMPLESTAB_FOR_SELECT_ALL = gql`
+query search (          
+  $sample_ids: [String],
+){
+  fileIDsFromList (          
+    sample_ids: $sample_ids,
+  ) 
+}
+  `;
+
+export const GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL = gql`
+query search (          
+  $file_names: [String] 
+){
+  fileIDsFromList (          
+      file_names: $file_names
+  ) 
+}
+  `;
+
+export const GET_FILES_NAME_QUERY = gql`
+query fileOverview($file_ids: [String], $offset: Int = 0, $first: Int = 100000, $order_by:String ="file_name"){
+  fileOverview(file_ids: $file_ids, offset: $offset,first: $first, order_by: $order_by) {
+    file_name
+  }
+}
+  `;
+
+export const GET_ALL_FILEIDS_FROM_CASESTAB_FOR_ADD_ALL_CART = gql`
+query subjectsAddAllToCart(
+  $subject_ids: [String],
+  $programs: [String],
+  $studies: [String],
+  $diagnoses: [String],
+  $rc_scores: [String],
+  $tumor_sizes: [String],
+  $chemo_regimen: [String],
+  $tumor_grades: [String],
+  $er_status: [String],
+  $pr_status: [String],
+  $endo_therapies: [String],
+  $meno_status: [String],
+  $tissue_type: [String],
+  $composition: [String],
+  $association: [String],
+  $file_type: [String],
+  $age_at_index: [Float],
+  $first: Int,
+  $offset: Int= 0, 
+  $order_by: String = "file_id",
+  $sort_direction: String = "asc" 
+  ){
+  subjectOverview(
+      subject_ids: $subject_ids,
+      programs: $programs,
+      studies: $studies,
+      diagnoses: $diagnoses,
+      rc_scores: $rc_scores,
+      tumor_sizes: $tumor_sizes,
+      chemo_regimen: $chemo_regimen,
+      tumor_grades: $tumor_grades,
+      er_status: $er_status,
+      pr_status: $pr_status,
+      endo_therapies: $endo_therapies,
+      meno_status: $meno_status,
+      tissue_type: $tissue_type,
+      composition: $composition,
+      association: $association,
+      file_type: $file_type,
+      age_at_index: $age_at_index,
+      first: $first,
+      offset: $offset,
+      order_by: $order_by,
+      sort_direction: $sort_direction
+      ) {
+      files
+  }
+}
+    `;
+
+export const GET_ALL_FILEIDS_FROM_SAMPLETAB_FOR_ADD_ALL_CART = gql`
+    query samplesAddAllToCart(
+      $subject_ids: [String],
+      $sample_ids: [String],
+      $programs: [String],
+      $studies: [String],
+      $diagnoses: [String],
+      $rc_scores: [String],
+      $tumor_sizes: [String],
+      $chemo_regimen: [String],
+      $tumor_grades: [String],
+      $er_status: [String],
+      $pr_status: [String],
+      $endo_therapies: [String],
+      $meno_status: [String],
+      $tissue_type: [String],
+      $composition: [String],
+      $association: [String],
+      $file_type: [String],
+      $age_at_index: [Float],
+      $first: Int,
+      $offset: Int= 0, 
+      $order_by: String = "file_id",
+      $sort_direction: String = "asc" ){
+      sampleOverview(
+          subject_ids: $subject_ids,
+          sample_ids: $sample_ids,
+          programs: $programs,
+          studies: $studies,
+          diagnoses: $diagnoses,
+          rc_scores: $rc_scores,
+          tumor_sizes: $tumor_sizes,
+          chemo_regimen: $chemo_regimen,
+          tumor_grades: $tumor_grades,
+          er_status: $er_status,
+          pr_status: $pr_status,
+          endo_therapies: $endo_therapies,
+          meno_status: $meno_status,
+          tissue_type: $tissue_type,
+          composition: $composition,
+          association: $association,
+          file_type: $file_type,
+          age_at_index: $age_at_index,
+          first: $first,
+          offset: $offset,
+          order_by: $order_by,
+          sort_direction: $sort_direction
+          ) {
+          files
+      }
+    }
+        `;
+
+export const GET_ALL_FILEIDS_FROM_FILESTAB_FOR_ADD_ALL_CART = gql`
+query fileAddAllToCart(
+  $subject_ids: [String],
+  $programs: [String],
+  $studies: [String],
+  $diagnoses: [String],
+  $rc_scores: [String],
+  $tumor_sizes: [String],
+  $chemo_regimen: [String],
+  $tumor_grades: [String],
+  $er_status: [String],
+  $pr_status: [String],
+  $endo_therapies: [String],
+  $meno_status: [String],
+  $tissue_type: [String],
+  $composition: [String],
+  $association: [String],
+  $file_type: [String],
+  $age_at_index: [Float],
+  $first: Int,
+  $offset: Int= 0, 
+  $order_by: String = "file_id",
+  $sort_direction: String = "asc"
+ ){
+  fileOverview(
+      subject_ids:$subject_ids,
+      programs: $programs,
+      studies: $studies,
+      diagnoses: $diagnoses,
+      rc_scores: $rc_scores,
+      tumor_sizes: $tumor_sizes,
+      chemo_regimen: $chemo_regimen,
+      tumor_grades: $tumor_grades,
+      er_status: $er_status,
+      pr_status: $pr_status,
+      endo_therapies: $endo_therapies,
+      meno_status: $meno_status,
+      tissue_type: $tissue_type,
+      composition: $composition,
+      association: $association,       
+      file_type: $file_type,
+      age_at_index: $age_at_index,
+      first: $first, 
+      offset: $offset, 
+      order_by: $order_by,
+      sort_direction: $sort_direction
+  ){
+      file_id,
+  }
+}
+            `;
 
 // --------------- GraphQL query configuration --------------
 
@@ -554,6 +757,132 @@ const GET_CASE_DETAIL_DATA_QUERY = gql`
   }
 `;
 
+export const GET_PUBLICATIONS_OVERVIEW_QUERY = gql`
+query publicationOverView(
+  $programs: [String],
+  $docs: [String],
+  $fiscal_years: [String],
+  $award_amounts: [String],
+  $offset: Int,
+  $first: Int,
+  $order_by: String,
+  $sort_direction: String 
+  ){
+  publicationOverView(
+    programs: $programs,
+    docs: $docs,
+    fiscal_years: $fiscal_years,
+    award_amounts: $award_amounts,
+    first: $first,
+    offset: $offset,
+    order_by: $order_by,
+    sort_direction: $sort_direction
+  ) {
+    publication_id,
+    pmc_id,
+    year,
+    journal,
+    title,
+    authors,
+    publish_date,
+    citation_count,
+    relative_citation_ratio,
+    nih_percentile,
+    doi,
+  }
+}
+  `;
+
+export const GET_DATASETS_OVERVIEW_QUERY = gql`
+  query datasetOverView(
+    $programs: [String],
+    $docs: [String],
+    $fiscal_years: [String],
+    $award_amounts: [String],
+    $offset: Int,
+    $first: Int,
+    $order_by: String,
+    $sort_direction: String 
+    ){
+    datasetOverView(
+      programs: $programs,
+      docs: $docs,
+      fiscal_years: $fiscal_years,
+      award_amounts: $award_amounts,
+      first: $first,
+      offset: $offset,
+      order_by: $order_by,
+      sort_direction: $sort_direction
+    ) {
+      accession,
+      title,
+      submission_date,
+      last_update_date,
+      release_date,
+      registration_date,
+      type,
+      link,
+      transformed_type
+    }
+}
+  `;
+
+export const GET_CLINICAL_TRIALS_OVERVIEW_QUERY = gql`
+  query clinicalTrialOverView(
+    $programs: [String],
+    $docs: [String],
+    $fiscal_years: [String],
+    $award_amounts: [String],
+    $offset: Int,
+    $first: Int,
+    $order_by: String,
+    $sort_direction: String 
+    ){
+    clinicalTrialOverView(
+      programs: $programs,
+      docs: $docs,
+      fiscal_years: $fiscal_years,
+      award_amounts: $award_amounts,
+      first: $first,
+      offset: $offset,
+      order_by: $order_by,
+      sort_direction: $sort_direction
+    ) {
+      clinical_trial_id,
+      title,
+      last_update_posted,
+      recruitment_status,
+    }
+}
+  `;
+
+export const GET_PATENTS_OVERVIEW_QUERY = gql`
+  query patentOverView(
+    $programs: [String],
+    $docs: [String],
+    $fiscal_years: [String],
+    $award_amounts: [String],
+    $offset: Int,
+    $first: Int,
+    $order_by: String,
+    $sort_direction: String 
+    ){
+    patentOverView(
+      programs: $programs,
+      docs: $docs,
+      fiscal_years: $fiscal_years,
+      award_amounts: $award_amounts,
+      first: $first,
+      offset: $offset,
+      order_by: $order_by,
+      sort_direction: $sort_direction
+    ) {
+      patent_id,
+      fulfilled_date,
+    }
+}
+  `;
+
 export {
   projectHeader,
   dataRoot,
@@ -561,11 +890,5 @@ export {
   filesOfSamples,
   leftPanel,
   rightPanel,
-  table1,
-  table2,
-  table3,
-  table4,
-  table5,
-  table6,
   GET_CASE_DETAIL_DATA_QUERY,
 };
diff --git a/src/pages/caseDetail/caseDetailModal.js b/src/pages/caseDetail/caseDetailModal.js
new file mode 100644
index 00000000..038d2d52
--- /dev/null
+++ b/src/pages/caseDetail/caseDetailModal.js
@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import {
+  withStyles,
+} from '@material-ui/core';
+import {
+  clearTableSelections,
+} from './store/caseDetailReducer';
+import Dialog from '../../components/AddToCartDialog';
+import { getFilesIdsInCart } from '../fileCentricCart/store/cart';
+
+const styles = () => ({
+  button: {
+    borderRadius: '10px',
+    width: '120px',
+    lineHeight: '37px',
+    fontSize: '12px',
+    textTransform: 'uppercase',
+    fontFamily: 'Lato',
+    color: '#fff',
+    backgroundColor: '#142D64',
+    marginTop: '6px',
+    marginBottom: '10px',
+    marginRight: '24px',
+  },
+});
+
+const SelectAllModalDialog = ({
+  classes, openSnack,
+}) => {
+  const childRef = useRef();
+
+  const handleClose = () => {
+    childRef.current.close();
+  };
+
+  async function exportFiles() {
+    // Find the newly added files by comparing
+    const currentFileIdsInCart = getFilesIdsInCart();
+
+    // tell the reducer to clear the selection on the table.
+    clearTableSelections();
+    // tell the reducer to clear the selection on the table.
+    handleClose();
+  }
+
+  const OnYesClick = () => { exportFiles(); };
+  const onNoClick = () => { handleClose(); };
+
+  return (
+    <>
+      {/* <button type="button" onClick={handleClickOpen} className={classes.button}>
+        Add All Files
+      </button> */}
+      <Dialog
+        ref={childRef}
+        onYesClick={OnYesClick}
+        onNoClick={onNoClick}
+      />
+    </>
+  );
+};
+
+export default withStyles(styles, { withTheme: true })(SelectAllModalDialog);
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index e4a24e0d..ecf11488 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -13,15 +13,14 @@ import TabThemeProvider from './caseDetailTabThemeConfig';
 import TabLabel from './caseDetailTabLabel';
 import {
   tabs, tooltipContent, tabContainers, tabIndex, externalLinkIcon,
-} from '../../bento/dashboardTabData';
+} from '../../bento/caseDetailData';
 import {
-  fetchDataForDashboardTab,
+  fetchDataForCaseDetailTab,
   getTableRowSelectionEvent,
   tableHasSelections,
   clearTableSelections,
   fetchAllFileIDs,
-  getFilesCount,
-} from '../dashboardTab/store/dashboardReducer';
+} from './store/caseDetailReducer';
 
 function TabContainer({ children, dir }) {
   return (
@@ -32,46 +31,43 @@ function TabContainer({ children, dir }) {
 }
 
 const tabController = (classes) => {
-  const currentActiveTabTitle = useSelector((state) => (state.dashboardTab
-    && state.dashboardTab.currentActiveTab
-    ? state.dashboardTab.currentActiveTab
+  const currentActiveTabTitle = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.currentActiveTab
+    ? state.caseDetailTab.currentActiveTab
     : tabIndex[0].title));
-  const tabVlaue = tabIndex.map((el) => el.title).indexOf(currentActiveTabTitle) || 0;
-  // tab settings
-  const [currentTab, setCurrentTab] = React.useState(tabVlaue);
 
-  const tableRowSelectionData = [
-    useSelector((state) => (state.dashboardTab.dataCaseSelected)),
-    useSelector((state) => (state.dashboardTab.dataSampleSelected)),
-    useSelector((state) => (state.dashboardTab.dataFileSelected))];
+  const tabValue = tabIndex.map((el) => el.title).indexOf(currentActiveTabTitle) || 0;
 
-  // data from store
-  const dashboard = useSelector((state) => (state.dashboardTab
-    && state.dashboardTab.datatable
-    ? state.dashboardTab.datatable : {}));
+  const [currentTab, setCurrentTab] = React.useState(tabValue);
 
-  // get stats data from store
-  const dashboardStats = useSelector((state) => (state.dashboardTab
-    && state.dashboardTab.stats ? state.dashboardTab.stats : {}));
+  const caseDetail = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.datatable
+    ? state.caseDetailTab.datatable : {}));
+
+  const caseDetailStats = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.stats ? state.caseDetailTab.stats : {}));
+
+  const allFilters = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.allActiveFilters ? state.caseDetailTab.allActiveFilters : {}));
+
+  const autoCompleteSelection = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.autoCompleteSelection
+    ? state.caseDetailTab.autoCompleteSelection.subject_ids : {}));
+
+  const bulkUpload = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.bulkUpload ? state.caseDetailTab.bulkUpload.subject_ids : {}));
 
-  const allFilters = useSelector((state) => (state.dashboardTab
-    && state.dashboardTab.allActiveFilters ? state.dashboardTab.allActiveFilters : {}));
-  const autoCompleteSelection = useSelector((state) => (state.dashboardTab
-    && state.dashboardTab.autoCompleteSelection
-    ? state.dashboardTab.autoCompleteSelection.subject_ids : {}));
-  const bulkUpload = useSelector((state) => (state.dashboardTab
-    && state.dashboardTab.bulkUpload ? state.dashboardTab.bulkUpload.subject_ids : {}));
   const subjectIds = autoCompleteSelection.concat(bulkUpload);
   useEffect(() => {
     setCurrentTab(0);
-  }, [dashboardStats]);
+  }, [caseDetailStats]);
 
-  const { isCaseSelected } = useSelector((state) => state.dashboardTab);
+  const { isCaseSelected } = useSelector((state) => state.caseDetailTab);
 
   const handleTabChange = (event, value) => {
     setCurrentTab(value);
     if (!isCaseSelected) {
-      fetchDataForDashboardTab(tabIndex[value].title);
+      fetchDataForCaseDetailTab(tabIndex[value].title);
     }
   };
 
@@ -193,7 +189,7 @@ const tabController = (classes) => {
       key={index}
       id={tab.id}
       label={
-        getTabLalbel(tab.title, dashboardStats[tab.count] ? dashboardStats[tab.count] : 0)
+        getTabLalbel(tab.title, caseDetailStats[tab.count] ? caseDetailStats[tab.count] : 0)
       }
     />
   ));
@@ -203,7 +199,7 @@ const tabController = (classes) => {
     <TabContainer id={container.id}>
       <TabView
         options={getOptions(container, classes)}
-        data={dashboard[container.dataField] ? dashboard[container.dataField] : 'undefined'}
+        data={caseDetail[container.dataField] ? caseDetail[container.dataField] : 'undefined'}
         customColumn={container}
         customOnRowsSelect={onRowsSelectFunction[container.onRowsSelect]}
         openSnack={openSnack}
@@ -217,7 +213,7 @@ const tabController = (classes) => {
         // eslint-disable-next-line jsx-a11y/tabindex-no-positive
         tabIndex={container.tabIndex}
         externalLinkIcon={externalLinkIcon}
-        count={dashboardStats[container.count] ? dashboardStats[container.count] : 0}
+        count={caseDetailStats[container.count] ? caseDetailStats[container.count] : 0}
         api={container.api}
         paginationAPIField={container.paginationAPIField}
         paginationAPIFieldDesc={container.paginationAPIFieldDesc}
@@ -227,12 +223,9 @@ const tabController = (classes) => {
         allFilters={{ ...allFilters, ...{ subject_ids: subjectIds } }}
         tableHasSelections={tableHasSelections}
         setRowSelection={getTableRowSelectionEvent()}
-        // selectedRowInfo={tableRowSelectionData[container.tabIndex].selectedRowInfo}
-        // selectedRowIndex={tableRowSelectionData[container.tabIndex].selectedRowIndex}
         clearTableSelections={clearTableSelections}
         fetchAllFileIDs={fetchAllFileIDs}
         tableDownloadCSV={container.tableDownloadCSV || false}
-        getFilesCount={getFilesCount}
         tooltipMessage={tooltipContent[currentTab]}
         tooltipIcon={tooltipContent.icon}
         tooltipAlt={tooltipContent.alt}
diff --git a/src/pages/caseDetail/caseDetailTabView.js b/src/pages/caseDetail/caseDetailTabView.js
index dc500cc3..0a153921 100644
--- a/src/pages/caseDetail/caseDetailTabView.js
+++ b/src/pages/caseDetail/caseDetailTabView.js
@@ -1,19 +1,24 @@
 /* eslint-disable */
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   Grid,
+  IconButton,
   withStyles,
 } from '@material-ui/core';
-import { getColumns } from 'bento-components';
+import { Link } from 'react-router-dom';
+import HelpIcon from '@material-ui/icons/Help';
+import { getColumns, ToolTip } from 'bento-components';
 import _ from 'lodash';
+import SelectAllModal from './caseDetailModal';
 import {
-  GET_PROJECTS_OVERVIEW_QUERY,
   GET_PUBLICATIONS_OVERVIEW_QUERY,
   GET_DATASETS_OVERVIEW_QUERY,
   GET_CLINICAL_TRIALS_OVERVIEW_QUERY,
   GET_PATENTS_OVERVIEW_QUERY,
-} from '../../bento/dashboardTabData';
+} from '../../bento/caseDetailData';
 import CustomDataTable from '../../components/serverPaginatedTable/serverPaginatedTable';
+import { addToCart, getCart, cartWillFull } from '../../../src/pages/fileCentricCart/store/cart';
+import AddToCartAlertDialog from '../../components/AddToCartDialog';
 import DocumentDownload from '../../components/DocumentDownload/DocumentDownloadView';
 import globalData from '../../bento/siteWideConfig';
 
@@ -24,8 +29,13 @@ const TabView = ({
   data,
   customColumn,
   primaryKeyIndex = 0,
+  openSnack,
   disableRowSelection,
+  buttonText,
   tableID,
+  saveButtonDefaultStyle,
+  DeactiveSaveButtonDefaultStyle,
+  ActiveSaveButtonDefaultStyle,
   externalLinkIcon,
   options,
   count,
@@ -33,14 +43,101 @@ const TabView = ({
   paginationAPIField,
   paginationAPIFieldDesc,
   dataKey,
+  filteredSubjectIds,
+  filteredSampleIds,
+  filteredFileIds,
+  filteredClinicalTrialIds,
+  filteredPatentIds,
   allFilters,
   defaultSortCoulmn,
   defaultSortDirection,
+  // tableHasSelections,
   setRowSelection,
   selectedRowInfo = [],
   selectedRowIndex = [],
+  clearTableSelections,
+  fetchAllFileIDs,
+  getFilesCount,
   tableDownloadCSV,
+  tooltipMessage,
+  tooltipIcon,
+  tooltipAlt,
 }) => {
+  // Get the existing files ids from  cart state
+  const cart = getCart();
+  const fileIDs = cart.fileIds ? cart.fileIds : [];
+  const saveButton = useRef(null);
+  const saveButton2 = useRef(null);
+  const AddToCartAlertDialogRef = useRef();
+
+  const [cartIsFull, setCartIsFull] = React.useState(false);
+  const buildButtonStyle = (button, styleObject) => {
+    const styleKV = Object.entries(styleObject);
+    // eslint-disable-next-line  no-restricted-syntax, no-unused-vars
+    for (const [key, value] of styleKV) {
+      // eslint-disable-next-line no-param-reassign
+      button.current.style[key] = value;
+    }
+  };
+  const initSaveButtonDefaultStyle = (button) => {
+    // eslint-disable-next-line no-param-reassign
+    button.current.disabled = true;
+    buildButtonStyle(button, saveButtonDefaultStyle);
+  };
+
+  const updateActiveSaveButtonStyle = (flag, button) => {
+    if (flag) {
+      // eslint-disable-next-line no-param-reassign
+      button.current.disabled = true;
+      buildButtonStyle(button, DeactiveSaveButtonDefaultStyle);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      button.current.disabled = false;
+      buildButtonStyle(button, ActiveSaveButtonDefaultStyle);
+    }
+  };
+
+  // async function updateButtonStatus(status) {
+  //   if (!status) {
+  //     updateActiveSaveButtonStyle(true, saveButton);
+  //     updateActiveSaveButtonStyle(true, saveButton2);
+  //   } else {
+  //     updateActiveSaveButtonStyle(false, saveButton);
+  //     updateActiveSaveButtonStyle(false, saveButton2);
+  //   }
+  // }
+
+  // useEffect(() => {
+  //   initSaveButtonDefaultStyle(saveButton);
+  //   initSaveButtonDefaultStyle(saveButton2);
+  //   updateButtonStatus(selectedRowInfo.length > 0);
+  // });
+
+  async function exportFiles() {
+    const selectedIDs = await fetchAllFileIDs(getFilesCount(), selectedRowInfo);
+    // Find the newly added files by comparing
+    const selectFileIds = filteredFileIds != null
+      ? selectedIDs.filter((x) => filteredFileIds.includes(x))
+      : selectedIDs;
+    const newFileIDS = fileIDs !== null ? selectFileIds.filter(
+      (e) => !fileIDs.find((a) => e === a),
+    ).length : selectedIDs.length;
+    if (cartWillFull(newFileIDS)) {
+      // throw an alert
+      setCartIsFull(true);
+      AddToCartAlertDialogRef.current.open();
+    } else if (newFileIDS > 0) {
+      addToCart({ fileIds: selectFileIds });
+      openSnack(newFileIDS);
+      // tell the reducer to clear the selection on the table.
+      clearTableSelections();
+    } else if (newFileIDS === 0) {
+      openSnack(newFileIDS);
+      // tell the reducer to clear the selection on the table.
+      clearTableSelections();
+    }
+  }
+
   function rowSelectionEvent(displayData, rowsSelected) {
     const displayedDataKeies = displayData;
     const selectedRowsKey = rowsSelected
@@ -49,6 +146,8 @@ const TabView = ({
     let newSelectedRowInfo = [];
 
     if (rowsSelected) {
+      // Remove the rowInfo from selectedRowInfo if this row currently be
+      // displayed and not be selected.
       if (selectedRowInfo.length > 0) {
         newSelectedRowInfo = selectedRowInfo.filter((key) => {
           if (displayedDataKeies.includes(key)) {
@@ -62,6 +161,8 @@ const TabView = ({
     }
     newSelectedRowInfo = newSelectedRowInfo.concat(selectedRowsKey);
 
+    // Get selectedRowIndex by comparing current page data with selected row's key.
+    // if rowInfo from selectedRowInfo is currently be displayed
     const newSelectedRowIndex = displayedDataKeies.reduce(
       (accumulator, currentValue, currentIndex) => {
         if (newSelectedRowInfo.includes(currentValue)) {
@@ -71,6 +172,7 @@ const TabView = ({
       }, [],
     );
 
+    // reduce the state chagne, when newSelectedRowIndex and newSelectedRowInfo is same as previous.
     if (_.differenceWith(
       newSelectedRowIndex,
       selectedRowIndex,
@@ -98,10 +200,14 @@ const TabView = ({
     }
   }
 
+  /*
+    Presist user selection
+  */
   function onRowsSelect(curr, allRowsSelected, rowsSelected, displayData) {
     rowSelectionEvent(displayData.map((d) => d.data[primaryKeyIndex]), rowsSelected);
   }
 
+  // overwrite default options
   const defaultOptions = () => ({
     dataKey,
     rowsSelectedTrigger: (displayData, rowsSelected) => rowSelectionEvent(
@@ -130,6 +236,42 @@ const TabView = ({
 
   return (
     <div>
+      {/* <Grid item xs={12} className={classes.saveButtonDiv}>
+        <SelectAllModal tableIDForButton={tableID} openSnack={openSnack} />
+        <AddToCartAlertDialog
+          cartWillFull={cartIsFull}
+          ref={AddToCartAlertDialogRef}
+        />
+        <button
+          type="button"
+          ref={saveButton2}
+          onClick={exportFiles}
+          className={classes.button}
+          id={`${tableID}_${buttonText}`}
+        >
+          {buttonText}
+        </button>
+        <ToolTip classes={{ tooltip: classes.customTooltip, arrow: classes.customArrow }} title={tooltipMessage} arrow placement="bottom">
+          <IconButton
+            aria-label="help"
+            className={classes.helpIconButton}
+          >
+            {tooltipIcon ? (
+              <img
+                src={tooltipIcon}
+                alt={tooltipAlt}
+                className={classes.helpIcon}
+              />
+            ) : (
+              <HelpIcon
+                className={classes.helpIcon}
+                fontSize="small"
+              />
+            )}
+          </IconButton>
+        </ToolTip>
+
+      </Grid> */}
       <Grid container>
         <Grid item xs={12} id={tableID}>
           <CustomDataTable
@@ -150,17 +292,110 @@ const TabView = ({
           />
         </Grid>
       </Grid>
+      {/* <Grid item xs={12} className={classes.saveButtonDivBottom}>
+        <button
+          type="button"
+          ref={saveButton}
+          onClick={exportFiles}
+          className={classes.button}
+        >
+          {buttonText}
+        </button>
+
+        <ToolTip classes={{ tooltip: classes.customTooltip, arrow: classes.customArrow }} title={tooltipMessage} arrow placement="bottom">
+          <IconButton
+            aria-label="help"
+            className={classes.helpIconButton}
+          >
+            {tooltipIcon ? (
+              <img
+                src={tooltipIcon}
+                alt={tooltipAlt}
+                className={classes.helpIcon}
+              />
+            ) : (
+              <HelpIcon
+                className={classes.helpIcon}
+                fontSize="small"
+              />
+            )}
+          </IconButton>
+        </ToolTip>
+        <div style={{ position: 'relative' }}>
+          <Link
+            rel="noreferrer"
+            to={(location) => ({ ...location, pathname: '/fileCentricCart' })}
+            color="inherit"
+            className={classes.cartlink}
+          >
+            Go to Cart
+            {' '}
+            {'>'}
+          </Link>
+        </div>
+
+      </Grid> */}
     </div>
   );
 };
 
 const styles = () => ({
+  cartlink: {
+    fontFamily: 'Lato',
+    color: '#3E6886',
+    fontSize: '12px',
+    marginRight: '70px',
+    textDecoration: 'none',
+    borderBottom: '1px solid #3E6886',
+    paddingBottom: '3px',
+  },
+  caseTitle: {
+    color: '#194563',
+    fontSize: '25.2pt',
+    fontStyle: 'normal',
+    fontFamily: 'Raleway',
+    letterSpacing: '0.025em',
+    backgroundColor: '#f5f5f5',
+    padding: '10px 32px 8px 28px',
+  },
+  chips: {
+    position: 'absolute',
+    marginLeft: '250px',
+    marginTop: '36px',
+    zIndex: '999',
+  },
+  chipRoot: {
+    color: '#ffffff',
+    fontFamily: '"Open Sans", sans-serif',
+    letterSpacing: '0.075em',
+    marginLeft: '10px',
+    backgroundColor: '#9b9b9b',
+    fontSize: '9pt',
+  },
+  chipDeleteIcon: {
+    color: '#ffffff',
+    '&:hover': {
+      color: '#ffffff',
+    },
+  },
   root: {
     fontFamily: '"Open Sans", sans-serif',
     fontSize: '9pt',
     letterSpacing: '0.025em',
     color: '#000',
   },
+  saveButtonDiv: {
+    paddingTop: '5px',
+    paddingRight: '25px',
+    textAlign: 'right',
+  },
+  saveButtonDivBottom: {
+    paddingTop: '5px',
+    paddingRight: '25px',
+    textAlign: 'right',
+    marginBottom: '30px',
+    position: 'relative',
+  },
   button: {
     borderRadius: '10px',
     width: '156px',
@@ -174,6 +409,36 @@ const styles = () => ({
     marginBottom: '10px',
     marginRight: '5px',
   },
+  caseTableBorder: {
+    borderTopColor: '#F48439',
+  },
+  fileTableBorder: {
+    borderTopColor: '#2446C6',
+  },
+  sampleTableBorder: {
+    borderTopColor: '#05C5CC',
+  },
+  messageBottom: {
+    zIndex: '500',
+    position: 'absolute',
+    marginTop: '-148px',
+    marginLeft: 'calc(100% - 220px)',
+  },
+  helpIcon: {
+    zIndex: '600',
+  },
+  helpIconButton: {
+    verticalAlign: 'top',
+    marginLeft: '-5px',
+  },
+  customTooltip: {
+    border: '#03A383 1px solid',
+  },
+  customArrow: {
+    '&::before': {
+      border: '#03A383 1px solid',
+    },
+  },
 });
 
 export default withStyles(styles, { withTheme: true })(TabView);
diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index 0d6161f0..af7c5798 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -5,11 +5,8 @@ import {
 } from '@material-ui/core';
 import _ from 'lodash';
 import { useDispatch } from 'react-redux';
-import { getOptions, getColumns, cn } from 'bento-components';
-import globalData from '../../bento/siteWideConfig';
 import StatsView from '../../components/Stats/StatsView';
 import { Typography } from '../../components/Wrappers/Wrappers';
-import GridWithFooter from '../../components/GridWithFooter/GridView';
 import icon from '../../assets/icons/Cases.Icon.svg';
 import Subsection from '../../components/PropertySubsection/caseDetailSubsection';
 import CustomBreadcrumb from '../../components/Breadcrumb/BreadcrumbView';
@@ -17,19 +14,9 @@ import {
   projectHeader,
   leftPanel,
   rightPanel,
-  table1,
-  table2,
-  table3,
-  table4,
-  table5,
-  table6,
-  externalLinkIcon,
-  tooltipContent,
 } from '../../bento/caseDetailData';
 import Snackbar from '../../components/Snackbar';
 import { fetchDataForDashboardDataTable } from '../dashboard/dashboardState';
-import Tab from '../../components/Tab/Tab';
-import TabPanel from '../../components/Tab/TabPanel';
 import Tabs from './caseDetailTabController';
 
 // Main case detail component
@@ -39,16 +26,9 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
     value: 0,
     action: 'added',
   });
-  function openSnack(value1) {
-    setsnackbarState({ open: true, value: value1, action: 'added' });
-  }
   function closeSnack() {
     setsnackbarState({ open: false });
   }
-  const [currentTab, setCurrentTab] = React.useState(0);
-  const handleTabChange = (event, value) => {
-    setCurrentTab(value);
-  };
   const dispatch = useDispatch();
 
   // make sure dashboard data has been loaded first for stats bar to work
@@ -71,31 +51,6 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
     isALink: true,
   }];
 
-  const tab = {
-    items: [
-      {
-        index: 0,
-        label: `PUBLICATIONS (${data.num_publications})`,
-        value: 'publications',
-      },
-      {
-        index: 1,
-        label: `DATASETS (${data.num_datasets})`,
-        value: 'geos',
-      },
-      {
-        index: 2,
-        label: `CLINICAL TRIALS (${data.num_clinical_trials})`,
-        value: 'sras',
-      },
-      {
-        index: 3,
-        label: `PATENTS (${data.num_patents})`,
-        value: 'dbgaps',
-      },
-    ],
-  };
-
   // // those are questioning codes for ICDC only, need to remove from here.
   // const filesOfSamplesObj = filesOfSamples.reduce(
   //   (obj, item) => ({ ...obj, [item.sample_id]: item.files }), {},
@@ -159,7 +114,6 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
               </div>
             </div>
           </div>
-
           <Grid container spacing={1} className={classes.detailContainer}>
             {/* Left panel */}
             <Grid item sm={6} xs={12} className={[classes.detailPanel, classes.leftPanel]}>
@@ -194,231 +148,7 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
           </Grid>
         </div>
       </div>
-      {/* <Tabs /> */}
-      <div className={classes.container}>
-        <div className={classes.detailContainer}>
-          <Grid container>
-            <Grid item xs={12}>
-              <Tab
-                styleClasses={classes}
-                tabItems={tab.items}
-                currentTab={currentTab}
-                handleTabChange={handleTabChange}
-              />
-            </Grid>
-          </Grid>
-        </div>
-      </div>
-      <TabPanel value={currentTab} index={0}>
-        {table1.display
-          ? (
-            <div id="case_detail_table_associated_samples" className={classes.tableContainer}>
-              <div className={classes.tableDiv}>
-                <Grid item xs={12}>
-                  <Grid container spacing={4}>
-                    <Grid item xs={12}>
-                      <GridWithFooter
-                        data={data[table1.subjectDetailField]}
-                        title={(
-                          <div className={classes.tableTitle}>
-                            <span className={classes.tableHeader}>{table1.tableTitle}</span>
-                          </div>
-                        )}
-                        columns={getColumns(table1, classes, data, externalLinkIcon, '', () => { }, '', globalData.replaceEmptyValueWith)}
-                        options={getOptions(table1, classes)}
-                        customOnRowsSelect={table1.customOnRowsSelect}
-                        openSnack={openSnack}
-                        closeSnack={closeSnack}
-                        disableRowSelection={table1.disableRowSelection}
-                        buttonText={table1.buttonText}
-                        saveButtonDefaultStyle={table1.saveButtonDefaultStyle}
-                        ActiveSaveButtonDefaultStyle={table1.ActiveSaveButtonDefaultStyle}
-                        DeactiveSaveButtonDefaultStyle={table1.DeactiveSaveButtonDefaultStyle}
-                        tooltipMessage={table1.tooltipMessage}
-                        tooltipContent={tooltipContent}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </div>
-            </div>
-          ) : ''}
-      </TabPanel>
-      <TabPanel value={currentTab} index={1}>
-        {table2.display
-          ? (
-            <div id="case_detail_table_associated_files" className={classes.tableContainer}>
-              <div className={classes.tableDiv}>
-                <Grid item xs={12}>
-                  <Grid container spacing={4}>
-                    <Grid item xs={12}>
-                      <GridWithFooter
-                        data={data[table2.subjectDetailField]}
-                        title={(
-                          <div className={classes.tableTitle}>
-                            <span className={classes.tableHeader}>{table2.tableTitle}</span>
-                          </div>
-                        )}
-                        columns={getColumns(table2, classes, data, '', '', () => { }, '', globalData.replaceEmptyValueWith)}
-                        options={getOptions(table2, classes)}
-                        customOnRowsSelect={table2.customOnRowsSelect}
-                        openSnack={openSnack}
-                        closeSnack={closeSnack}
-                        disableRowSelection={table2.disableRowSelection}
-                        buttonText={table2.buttonText}
-                        saveButtonDefaultStyle={table1.saveButtonDefaultStyle}
-                        ActiveSaveButtonDefaultStyle={table1.ActiveSaveButtonDefaultStyle}
-                        DeactiveSaveButtonDefaultStyle={table1.DeactiveSaveButtonDefaultStyle}
-                        tooltipMessage={table2.tooltipMessage}
-                        tooltipContent={tooltipContent}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </div>
-            </div>
-          ) : ''}
-      </TabPanel>
-      <TabPanel value={currentTab} index={2}>
-        {table3.display
-          ? (
-            <div id="case_detail_table_associated_participants" className={classes.tableContainer}>
-              <div className={classes.tableDiv}>
-                <Grid item xs={12}>
-                  <Grid container spacing={4}>
-                    <Grid item xs={12}>
-                      <GridWithFooter
-                        data={data[table3.subjectDetailField]}
-                        title={(
-                          <div className={classes.tableTitle}>
-                            <span className={classes.tableHeader}>{table3.tableTitle}</span>
-                          </div>
-                        )}
-                        columns={getColumns(table3, classes, data, '', '', () => { }, '', globalData.replaceEmptyValueWith)}
-                        options={getOptions(table3, classes)}
-                        customOnRowsSelect={table3.customOnRowsSelect}
-                        openSnack={openSnack}
-                        closeSnack={closeSnack}
-                        disableRowSelection={table3.disableRowSelection}
-                        buttonText={table3.buttonText}
-                        saveButtonDefaultStyle={table3.saveButtonDefaultStyle}
-                        ActiveSaveButtonDefaultStyle={table3.ActiveSaveButtonDefaultStyle}
-                        DeactiveSaveButtonDefaultStyle={table3.DeactiveSaveButtonDefaultStyle}
-                        tooltipMessage={table3.tooltipMessage}
-                        tooltipContent={tooltipContent}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </div>
-            </div>
-          ) : ''}
-      </TabPanel>
-      <TabPanel value={currentTab} index={3}>
-        {table4.display
-          ? (
-            <div id="case_detail_table_associated_participants" className={classes.tableContainer}>
-              <div className={classes.tableDiv}>
-                <Grid item xs={12}>
-                  <Grid container spacing={4}>
-                    <Grid item xs={12}>
-                      <GridWithFooter
-                        data={data[table4.subjectDetailField]}
-                        title={(
-                          <div className={classes.tableTitle}>
-                            <span className={classes.tableHeader}>{table4.tableTitle}</span>
-                          </div>
-                        )}
-                        columns={getColumns(table4, classes, data, '', '', () => { }, '', globalData.replaceEmptyValueWith)}
-                        options={getOptions(table4, classes)}
-                        customOnRowsSelect={table4.customOnRowsSelect}
-                        openSnack={openSnack}
-                        closeSnack={closeSnack}
-                        disableRowSelection={table4.disableRowSelection}
-                        buttonText={table4.buttonText}
-                        saveButtonDefaultStyle={table4.saveButtonDefaultStyle}
-                        ActiveSaveButtonDefaultStyle={table4.ActiveSaveButtonDefaultStyle}
-                        DeactiveSaveButtonDefaultStyle={table4.DeactiveSaveButtonDefaultStyle}
-                        tooltipMessage={table4.tooltipMessage}
-                        tooltipContent={tooltipContent}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </div>
-            </div>
-          ) : ''}
-      </TabPanel>
-      <TabPanel value={currentTab} index={4}>
-        {table5.display
-          ? (
-            <div id="case_detail_table_associated_participants" className={classes.tableContainer}>
-              <div className={classes.tableDiv}>
-                <Grid item xs={12}>
-                  <Grid container spacing={4}>
-                    <Grid item xs={12}>
-                      <GridWithFooter
-                        data={data[table5.subjectDetailField]}
-                        title={(
-                          <div className={classes.tableTitle}>
-                            <span className={classes.tableHeader}>{table5.tableTitle}</span>
-                          </div>
-                        )}
-                        columns={getColumns(table5, classes, data, '', '', () => { }, '', globalData.replaceEmptyValueWith)}
-                        options={getOptions(table5, classes)}
-                        customOnRowsSelect={table5.customOnRowsSelect}
-                        openSnack={openSnack}
-                        closeSnack={closeSnack}
-                        disableRowSelection={table5.disableRowSelection}
-                        buttonText={table5.buttonText}
-                        saveButtonDefaultStyle={table5.saveButtonDefaultStyle}
-                        ActiveSaveButtonDefaultStyle={table5.ActiveSaveButtonDefaultStyle}
-                        DeactiveSaveButtonDefaultStyle={table5.DeactiveSaveButtonDefaultStyle}
-                        tooltipMessage={table5.tooltipMessage}
-                        tooltipContent={tooltipContent}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </div>
-            </div>
-          ) : ''}
-      </TabPanel>
-      <TabPanel value={currentTab} index={5}>
-        {table6.display
-          ? (
-            <div id="case_detail_table_associated_participants" className={classes.tableContainer}>
-              <div className={classes.tableDiv}>
-                <Grid item xs={12}>
-                  <Grid container spacing={4}>
-                    <Grid item xs={12}>
-                      <GridWithFooter
-                        data={data[table6.subjectDetailField]}
-                        title={(
-                          <div className={classes.tableTitle}>
-                            <span className={classes.tableHeader}>{table6.tableTitle}</span>
-                          </div>
-                        )}
-                        columns={getColumns(table6, classes, data)}
-                        options={getOptions(table6, classes)}
-                        customOnRowsSelect={table6.customOnRowsSelect}
-                        openSnack={openSnack}
-                        closeSnack={closeSnack}
-                        disableRowSelection={table6.disableRowSelection}
-                        buttonText={table6.buttonText}
-                        saveButtonDefaultStyle={table6.saveButtonDefaultStyle}
-                        ActiveSaveButtonDefaultStyle={table6.ActiveSaveButtonDefaultStyle}
-                        DeactiveSaveButtonDefaultStyle={table6.DeactiveSaveButtonDefaultStyle}
-                        tooltipMessage={table6.tooltipMessage}
-                        tooltipContent={tooltipContent}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </div>
-            </div>
-          ) : ''}
-      </TabPanel>
+      <Tabs />
       <div className={classes.blankSpace} />
     </>
   );
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
new file mode 100644
index 00000000..1d43e877
--- /dev/null
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -0,0 +1,1289 @@
+/* eslint-disable max-len */
+/* eslint-disable arrow-body-style */
+/* eslint-disable react/destructuring-assignment */
+import _ from 'lodash';
+import {
+  customSort,
+  getFilters,
+  filterData,
+  getCheckBoxData,
+  transformAPIDataIntoCheckBoxData,
+} from 'bento-components';
+import store from '../../../store';
+import client from '../../../utils/graphqlClient';
+
+import {
+  tabContainers,
+  GET_ALL_FILEIDS_CASESTAB_FOR_SELECT_ALL,
+  GET_ALL_FILEIDS_SAMPLESTAB_FOR_SELECT_ALL,
+  GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL,
+  GET_FILES_NAME_QUERY,
+  GET_ALL_FILEIDS_FROM_CASESTAB_FOR_ADD_ALL_CART,
+  GET_ALL_FILEIDS_FROM_SAMPLETAB_FOR_ADD_ALL_CART,
+  GET_ALL_FILEIDS_FROM_FILESTAB_FOR_ADD_ALL_CART,
+  tabIndex,
+  CASE_DETAIL_QUERY,
+  GET_PUBLICATIONS_OVERVIEW_QUERY,
+  GET_DATASETS_OVERVIEW_QUERY,
+  GET_CLINICAL_TRIALS_OVERVIEW_QUERY,
+  GET_PATENTS_OVERVIEW_QUERY,
+  caseIDField,
+} from '../../../bento/caseDetailData';
+import {
+  GET_IDS_BY_TYPE,
+  GET_SUBJECT_IDS,
+  SUBJECT_OVERVIEW_QUERY,
+  GET_SEARCH_NODES_BY_FACET,
+  ageAtIndex,
+} from '../../../bento/localSearchData';
+
+const storeKey = 'caseDetailTab';
+
+const initialState = {
+  caseDetailTab: {
+    autoCompleteSelection: {
+      subject_ids: [],
+      sample_ids: [],
+      file_ids: [],
+    },
+    bulkUpload: {
+      subject_ids: [],
+      sample_ids: [],
+      file_ids: [],
+    },
+    isDataTableUptoDate: false,
+    isFetched: false,
+    isLoading: false,
+    isCaseDetailTableLoading: false,
+    setSideBarLoading: false,
+    error: '',
+    hasError: false,
+    searchCriteria: null,
+    allActiveFilters: {},
+    currentActiveTab: tabIndex[0].title,
+    filteredSubjectIds: null,
+    checkboxForAll: {
+      data: [],
+    },
+    subjectOverView: {
+      data: [],
+    },
+    checkbox: {
+      data: [],
+      defaultPanel: false,
+    },
+    datatable: {
+      dataCase: 'undefined',
+      dataSample: 'undefined',
+      dataFile: 'undefined',
+    },
+    dataCaseSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataSampleSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataFileSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataClinicalTrialSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataPatentSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+  },
+};
+
+// HELPERS
+const getState = () => store.getState()[storeKey];
+
+function shouldFetchDataForCaseDetailTabDataTable(state) {
+  return !(state.isFetched);
+}
+
+// Custom function for mergeWith
+// eslint-disable-next-line consistent-return
+function customizer(objValue, srcValue) {
+  if (_.isArray(objValue)) {
+    return objValue.concat(srcValue);
+  }
+}
+
+const facetSearchData = {
+  project_id: [caseIDField],
+};
+
+/**
+ * Generate a default varibles for filter query.
+ *
+ * Need to be updated with custodian of filter
+ * @return json
+ */
+
+function allFilters() {
+  const emptyFilters = facetSearchData.reduce((acc, facet) => (
+    { ...acc, [facet.datafield]: [] }
+  ), {});
+  return emptyFilters;
+}
+
+function fetchCaseDetailTab() {
+  return () => {
+    store.dispatch({ type: 'REQUEST_CASE_DETAIL_TAB' });
+    return client
+      .query({
+        query: CASE_DETAIL_QUERY,
+        variables: {
+          ...allFilters(),
+          ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
+        },
+      })
+      .then((result) => store.dispatch({ type: 'RECEIVE_CASE_DETAIL_TAB', payload: _.cloneDeep(result) }))
+      .catch((error) => store.dispatch(
+        { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
+      ));
+  };
+}
+
+export async function getAllIds(type) {
+  const allids = await client
+    .query({
+      query: GET_IDS_BY_TYPE(type),
+      variables: {
+      },
+    })
+    .then((result) => result.data.idsLists)
+    .catch((error) => store.dispatch(
+      { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
+    ));
+  return allids;
+}
+export async function getAllSubjectIds(subjectIdsArray) {
+  const allids = await client
+    .query({
+      query: GET_SUBJECT_IDS,
+      variables: {
+        subject_ids: subjectIdsArray,
+      },
+    })
+    .then((result) => result.data.findSubjectIdsInList)
+    .catch((error) => store.dispatch(
+      { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
+    ));
+  return allids;
+}
+
+export const getSubjectIds = () => getState().filteredSubjectIds;
+
+/**
+ * Returns filter variable for graphql query using the all filters.
+ *
+ * @param {object} data
+ * @return {json}
+ */
+
+function createFilterVariables(data) {
+  const currentAllActiveFilters = getState().allActiveFilters;
+  // eslint-disable-next-line  no-unused-vars
+  const filter = Object.entries(currentAllActiveFilters).reduce((acc, [key, val]) => {
+    if (data[0].datafield === key) {
+      return data[0].isChecked
+        ? { ...acc, [key]: [...currentAllActiveFilters[key], ...[data[0].name]] }
+        : { ...acc, [key]: currentAllActiveFilters[key].filter((item) => item !== data[0].name) };
+    }
+    // return { ...acc , [key]: [...currentAllActiveFilters[key],...[data[0].name]] }
+    return { ...acc, [key]: currentAllActiveFilters[key] };
+  }, {});
+
+  return filter;
+}
+
+function createFilterVariablesRange(value, sideBarItem) {
+  const currentAllActiveFilters = getState().allActiveFilters;
+  currentAllActiveFilters[sideBarItem.datafield] = value;
+  return currentAllActiveFilters;
+  // eslint-disable-next-line  no-unused-vars
+}
+
+/**
+ * Returns active filter list while removing the param key.
+ *
+ * @param {object} data
+ * @return {json}
+ */
+function clearGroup(data) {
+  const currentAllActiveFilters = getState().allActiveFilters;
+  currentAllActiveFilters[data] = [];
+  return currentAllActiveFilters;
+}
+
+export function clearSectionSort(groupName) {
+  store.dispatch({
+    type: 'CLEAR_SECTION_SORT',
+    payload: {
+      groupName,
+    },
+  });
+}
+
+/**
+ * Reducer for clear all
+ *
+ * @return distpatcher
+ */
+
+export async function clearAllFiltersExceptBulkUpload() {
+  store.dispatch({ type: 'RESET_ALL_EXCEPT_BULK_UPLOAD' });
+}
+
+const convertResultInPrevType = (result) => {
+  const payload = result;
+  payload.data = {
+    ...result.data,
+    nodeCountsFromLists: {
+      numberOfPublications: result.data.numberOfPublications,
+      numberOfDatasets: result.data.numberOfDatasets,
+      numberOfClinicalTrials: result.data.numberOfClinicalTrials,
+      numberOfPatents: result.data.numberOfPatents,
+    },
+  };
+
+  return payload;
+};
+
+async function getCaseData(variables) {
+  const result = await client.query({
+    query: GET_SEARCH_NODES_BY_FACET,
+    variables,
+  });
+  const data = convertResultInPrevType(result);
+  return data;
+}
+
+const getSubjectDetails = async (variables) => {
+  const result = await client.query({
+    query: SUBJECT_OVERVIEW_QUERY,
+    variables: {
+      offset: 0,
+      first: 100,
+      sort_direction: 'desc',
+      order_by: 'age_at_index',
+      age_at_index: [ageAtIndex, null],
+      ...variables,
+    },
+  });
+  return result;
+};
+
+export function addBulkModalSearchData(value, type) {
+  // const items = value.map((val) => val.title);
+  store.dispatch({ type: 'ADD_BULKSEARCHDATA', payload: { value, type } });
+}
+
+/**
+ * Uplpad Modal Set
+ *
+ * @return distpatcher
+ */
+
+export async function uploadBulkModalSearch(searchcriteria, type) {
+  addBulkModalSearchData(searchcriteria, type);
+  const variables = {
+    ...getState().allActiveFilters,
+    ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
+  };
+
+  const [
+    caseResponse,
+    subjectResponse,
+  ] = await Promise.all([
+    getCaseData(variables),
+    getSubjectDetails(variables),
+  ]);
+
+  store.dispatch({
+    type: 'LOCAL_SEARCH',
+    payload: {
+      subjectResponse,
+      result: caseResponse,
+      variables,
+    },
+  });
+}
+
+/**
+ * Local search
+ *
+ * @return distpatcher
+ */
+
+export async function localSearch(searchcriteria, isQuery = false) {
+  const variables = {
+    ...getState().allActiveFilters,
+    ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
+  };
+
+  const [
+    caseResponse,
+    subjectResponse,
+  ] = await Promise.all([
+    getCaseData(variables),
+    getSubjectDetails(variables),
+  ]);
+  store.dispatch({
+    type: 'LOCAL_SEARCH',
+    payload: {
+      subjectResponse,
+      result: caseResponse,
+      variables,
+    },
+  });
+}
+
+/**
+ * Resets the key selections
+ *
+ * @param {object} payload
+ * @return distpatcher
+ */
+export function resetGroupSelections(payload) {
+  return () => {
+    const { dataField, groupName } = payload;
+    clearSectionSort(groupName);
+  };
+}
+
+/**
+ * Switch to get query sort dorection and sort field .
+ *
+ * @param {string} payload
+ *  @param {json} tabContainer
+ * @return {json} with three keys QUERY, sortfield, sortDirection
+ */
+
+export function addAutoComplete({ newValue, type, isFilteredData = false }) {
+  const items = isFilteredData ? newValue : newValue.map((val) => val.title);
+  store.dispatch({ type: 'ADD_AUTOCOMPLETE_DATA', payload: { value: items, type } });
+}
+
+const querySwitch = (payload, tabContainer) => {
+  switch (payload) {
+    case ('Publications'):
+      return { QUERY: GET_PUBLICATIONS_OVERVIEW_QUERY, sortfield: tabContainer.defaultSortField || '', sortDirection: tabContainer.defaultSortDirection || '' };
+    case ('Datasets'):
+      return { QUERY: GET_DATASETS_OVERVIEW_QUERY, sortfield: tabContainer.defaultSortField || '', sortDirection: tabContainer.defaultSortDirection || '' };
+    case ('Clinical Trials'):
+      return { QUERY: GET_CLINICAL_TRIALS_OVERVIEW_QUERY, sortfield: tabContainer.defaultSortField || '', sortDirection: tabContainer.defaultSortDirection || '' };
+    default:
+      return { QUERY: GET_PATENTS_OVERVIEW_QUERY, sortfield: tabContainer.defaultSortField || '', sortDirection: tabContainer.defaultSortDirection || '' };
+  }
+};
+
+/**
+ * Function to get getquery and default sort.
+ *
+ * @param {string} payload
+ * @return {json} with three keys QUERY,GET_PATENTS_OVERVIEW_QUERY, sortfield
+ */
+
+const getQueryAndDefaultSort = (payload = tabIndex[0].title) => {
+  const tabContainer = tabContainers.find((x) => x.name === payload);
+  return querySwitch(payload, tabContainer);
+};
+
+/**
+ * Updates the current active case detail tab.
+ *
+ * @param {object} data
+ * @param {Array} subjectIDsAfterFilter
+ * @param {Array} sampleIDsAfterFilter
+ * @param {Array} fileIDsAfterFilter
+ * @param {Array} clinicalTrialIDsAfterFilter
+ * @param {Array} patentIDsAfterFilter
+ * @return {json}
+ */
+
+export function fetchDataForCaseDetailTab(
+  payload,
+  filters = null,
+) {
+  const { QUERY, sortfield, sortDirection } = getQueryAndDefaultSort(payload);
+  const newFilters = filters;
+  // deal with empty string inside the age_at_index filter
+  if (filters && filters.age_at_index && filters.age_at_index.length === 2) {
+    if (filters.age_at_index.includes('')) {
+      newFilters.age_at_index = [];
+    }
+    if (typeof filters.age_at_index[0] === 'string') {
+      newFilters.age_at_index[0] = Number(newFilters.age_at_index[0]);
+    }
+    if (typeof filters.age_at_index[1] === 'string') {
+      newFilters.age_at_index[1] = Number(newFilters.age_at_index[1]);
+    }
+  }
+  const activeFilters = newFilters === null
+    ? (getState().allActiveFilters !== {}
+      ? {
+        ...getState().allActiveFilters,
+        ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
+      }
+      : allFilters()) : filters;
+  return client
+    .query({
+      query: QUERY,
+      variables: {
+        ...activeFilters,
+        order_by: sortfield || '',
+        sort_direction: sortDirection || 'asc',
+      },
+    })
+    .then((result) => store.dispatch({ type: 'UPDATE_CURRRENT_TAB_DATA', payload: { currentTab: payload, sortDirection, ..._.cloneDeep(result) } }))
+    .catch((error) => store.dispatch(
+      { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
+    ));
+}
+
+function transformCasesFileIdsToFiles(data) {
+  // use reduce to combine all the files' id into single array
+  const transformData = data.reduce((accumulator, currentValue) => {
+    const { files } = currentValue;
+    // check if file
+    if (files && files.length > 0) {
+      return accumulator.concat(files);
+    }
+    return accumulator;
+  }, []);
+  return transformData.map((item) => ({
+    files: [item.file_id],
+  }));
+}
+
+function transformfileIdsToFiles(data) {
+  // use reduce to combine all the files' id into single array
+  return data.map((item) => ({
+    files: [item.file_id],
+  }));
+}
+
+/**
+ * Gets all file ids for active subjectIds.
+ * TODO this  functtion can use filtered file IDs except for initial load
+ * @param obj fileCoubt
+ * @return {json}
+ */
+export async function fetchAllFileIDsForSelectAll(fileCount = 100000) {
+  const fileIds = getState().filteredFileIds;
+
+  const activeFilters = getState().allActiveFilters !== {}
+    ? getState().allActiveFilters : allFilters();
+
+  const SELECT_ALL_QUERY = getState().currentActiveTab === tabIndex[2].title
+    ? GET_ALL_FILEIDS_FROM_FILESTAB_FOR_ADD_ALL_CART
+    : getState().currentActiveTab === tabIndex[1].title
+      ? GET_ALL_FILEIDS_FROM_SAMPLETAB_FOR_ADD_ALL_CART
+      : GET_ALL_FILEIDS_FROM_CASESTAB_FOR_ADD_ALL_CART;
+
+  const fetchResult = await client
+    .query({
+      query: SELECT_ALL_QUERY,
+      variables: {
+        ...activeFilters,
+        first: fileCount,
+        ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
+      },
+    })
+    .then((result) => {
+      const RESULT_DATA = getState().currentActiveTab === tabIndex[3].title ? 'patentOverView' : getState().currentActiveTab === tabIndex[2].title ? 'clinicalTrialOverView' : getState().currentActiveTab === tabIndex[1].title ? 'datasetOverView' : 'publicationOverView';
+      const fileIdsFromQuery = RESULT_DATA === 'publicationOverView' ? transformfileIdsToFiles(result.data[RESULT_DATA]) : RESULT_DATA === 'datasetOverView' ? transformCasesFileIdsToFiles(result.data[RESULT_DATA]) : result.data[RESULT_DATA] || [];
+      return fileIdsFromQuery;
+    });
+
+  // Restaruting the result Bringing {files} to files
+  const filesArray = fetchResult.reduce((accumulator, currentValue) => {
+    const { files } = currentValue;
+    // check if file
+    if (files && files.length > 0) {
+      return accumulator.concat(files.map((f) => f));
+    }
+    return accumulator;
+  }, []);
+
+  // Removing fileIds that are not in our current list of filtered fileIds
+
+  const filteredFilesArray = fileIds != null
+    ? filesArray.filter((x) => fileIds.includes(x))
+    : filesArray;
+  return filteredFilesArray;
+}
+
+/**
+ * Returns file IDs of given sampleids or subjectids.
+ * @param int fileCount
+ * @param graphqlquery SELECT_ALL_QUERY
+ * @param array subjectIds
+ * @param array sampleIds
+ * @param array clinicalTrialIds
+ * @param array patentIds
+ * @param string apiReturnField
+ * @return {json}
+ */
+
+async function getFileIDs(
+  fileCount = 100000,
+  SELECT_ALL_QUERY,
+  subjectIds = [],
+  sampleIds = [],
+  clinicalTrialIds = [],
+  patentIds = [],
+  fileNames = [],
+  apiReturnField,
+) {
+  const fetchResult = await client
+    .query({
+      query: SELECT_ALL_QUERY,
+      variables: {
+        subject_ids: subjectIds,
+        sample_ids: sampleIds,
+        clinical_trial_ids: clinicalTrialIds,
+        patent_ids: patentIds,
+        file_names: fileNames,
+        first: fileCount,
+      },
+    })
+    .then((result) => result.data[apiReturnField] || []);
+
+  return fetchResult;
+}
+
+/*
+* Removing fileIds that are not in our current list of filtered fileIds
+* @param array fileIds
+* @return array
+*/
+function filterOutFileIds(fileIds) {
+  // Removing fileIds that are not in our current list of filtered fileIds
+  const { filteredFileIds } = getState();
+
+  if (fileIds
+    && fileIds.length > 0
+    && filteredFileIds
+    && filteredFileIds != null
+    && filteredFileIds.length > 0) {
+    return fileIds.filter((x) => filteredFileIds.includes(x));
+  }
+  return fileIds;
+}
+
+/*
+ * Gets all file ids for active subjectIds.
+ * TODO this  functtion can use filtered file IDs except for initial load
+ * @param obj fileCoubt
+ * @return {json}
+ */
+export async function fetchAllFileIDs(fileCount = 100000, selectedIds = []) {
+  let filesIds = [];
+  switch (getState().currentActiveTab) {
+    case tabIndex[2].title:
+      filesIds = await getFileIDs(fileCount, GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL, [], [], selectedIds, 'fileIDsFromList');
+      break;
+    case tabIndex[1].title:
+      filesIds = await getFileIDs(fileCount, GET_ALL_FILEIDS_SAMPLESTAB_FOR_SELECT_ALL, [], selectedIds, [], 'fileIDsFromList');
+      break;
+    default:
+      filesIds = await getFileIDs(fileCount, GET_ALL_FILEIDS_CASESTAB_FOR_SELECT_ALL, selectedIds, [], [], 'fileIDsFromList');
+  }
+  return filterOutFileIds(filesIds);
+}
+
+/**
+ * Reducer for fetch case detail data
+ *
+ * @return distpatcher
+ */
+
+export function fetchDataForCaseDetailTabDataTable() {
+  if (shouldFetchDataForCaseDetailTabDataTable(getState())) {
+    return store.dispatch(fetchCaseDetailTab());
+  }
+  fetchDataForCaseDetailTab(tabIndex[0].title);
+  return store.dispatch({ type: 'READY_CASE_DETAIL_TAB' });
+}
+
+/**
+ * Helper function to create only one filter that was from payload payload
+ * @param {object} payload
+ * @return distpatcher
+ */
+
+function createSingleFilterVariables(payload) {
+  const currentAllActiveFilters = allFilters();
+  // eslint-disable-next-line  no-unused-vars
+  const filter = Object.entries(currentAllActiveFilters).reduce((acc, [key, val]) => {
+    if (payload[0].datafield === key) {
+      return { ...acc, [key]: [...currentAllActiveFilters[key], ...[payload[0].name]] };
+    }
+    return { ...acc, [key]: currentAllActiveFilters[key] };
+  }, {});
+  return filter;
+}
+
+/**
+ * Sort checkboxes by Checked
+ *
+ * @param {object} checkboxData
+ * @return {json}
+ */
+
+function sortByCheckboxByIsChecked(checkboxData) {
+  checkboxData.sort((a, b) => b.isChecked - a.isChecked);
+  return checkboxData;
+}
+
+/**
+ * Sort checkboxes by Alphabet
+ *
+ * @param {object} checkboxData
+ * @return {json}
+ */
+
+function sortByCheckboxItemsByAlphabet(checkboxData) {
+  const sortCheckbox = customSort(checkboxData);
+  return sortByCheckboxByIsChecked(sortCheckbox);
+}
+
+/**
+ * Sort checkboxes by Count
+ *
+ * @param {object} checkboxData
+ * @return {json}
+ */
+
+function sortByCheckboxItemsByCount(checkboxData) {
+  checkboxData.sort((a, b) => b.subjects - a.subjects);
+  return sortByCheckboxByIsChecked(checkboxData);
+}
+
+/**
+ * Sets the given filter variable as the only filter for the dasboard
+ * @param {object} data
+ * @return distpatcher
+ */
+export async function setSingleFilter(payload) {
+  // test weather there are active case detail filters if so clear all filters
+  const singlefiter = createSingleFilterVariables(payload);
+  store.dispatch({ type: 'SET_SINGLE_FILTER', payload: singlefiter });
+}
+
+/**
+ * Reducer for setting single checkbox filter
+ * @param {object} payload
+ * @return distpatcher
+ */
+
+export async function singleCheckBox(payload) {
+  await setSingleFilter(payload);
+  const currentAllFilterVariables = payload === {} ? allFilters : createFilterVariables(payload);
+}
+
+/**
+ * Trigger respective API queries when checkbox is checked.
+ *
+ * @param {object} payload
+ * @return distpatcher
+ */
+export function toggleCheckBox(payload, isQuery = false) {
+  return () => {
+    const currentAllFilterVariables = payload === {} ? allFilters : createFilterVariables(payload);
+  };
+}
+
+export function toggleSlider(value, sideBarItem) {
+  if (!value.includes('')) {
+    const payload = {};
+    const currentAllFilterVariables = createFilterVariablesRange(value, sideBarItem);
+  }
+}
+
+/**
+ * Reducer for sidebar loading
+ *
+ * @return distpatcher
+ */
+
+export function setSideBarToLoading() {
+  store.dispatch({ type: 'SET_SIDEBAR_LOADING' });
+}
+
+/**
+ * Reducer for setting case detail table loading loading
+ *
+ * @return distpatcher
+ */
+
+export function setCaseDetailTableLoading() {
+  store.dispatch({ type: 'SET_CASE_DETAIL_TABLE_LOADING' });
+}
+
+/**
+ * Reducer for sorting checkboxes.
+ *
+ * @return distpatcher
+ */
+
+export function sortSection(groupName, sortBy) {
+  store.dispatch({
+    type: 'SORT_SINGLE_GROUP_CHECKBOX',
+    payload: {
+      groupName,
+      sortBy,
+    },
+  });
+}
+
+export function sortAll() {
+  store.dispatch({
+    type: 'SORT_ALL_GROUP_CHECKBOX_CASE_DETAIL',
+  });
+}
+
+function getCheckbox(data, mapping) {
+  const checkboxData = data[mapping].map((item) => {
+    return { name: item.group, isChecked: false, subjects: item.subjects };
+  });
+  return checkboxData;
+}
+
+/**
+ *  updateFilteredAPIDataIntoCheckBoxData works for first time init Checkbox,
+that function transforms the data which returns from API into a another format
+so it contains more information and easy for front-end to show it correctly.
+ *  * @param {object} currentGroupCount
+ *  * @param {object} willUpdateGroupCount
+ * * @param {object} currentCheckboxSelection
+ * @return {json}
+ */
+
+function customCheckBox(data, facetSearchData1, isEmpty) {
+  const caseCountField = 'subjects';
+  return (
+    facetSearchData1.map((mapping) => ({
+      groupName: mapping.label,
+      checkboxItems: mapping.slider === true
+        ? data[mapping.api]
+        : (isEmpty ? getCheckbox(data, mapping.apiForFiltering) : transformAPIDataIntoCheckBoxData(
+          data[mapping.api],
+          mapping.field,
+          caseCountField,
+          mapping.customNumberSort,
+        )),
+      datafield: mapping.datafield,
+      show: mapping.show,
+      slider: mapping.slider,
+      quantifier: mapping.slider,
+      section: mapping.section,
+      tooltips: mapping.tooltips,
+    }))
+  );
+}
+
+export function updateFilteredAPIDataIntoCheckBoxData(data, facetSearchDataFromConfig) {
+  return (
+    facetSearchDataFromConfig.map((mapping) => ({
+      groupName: mapping.label,
+      checkboxItems: mapping.slider === true
+        ? data[mapping.api]
+        : transformAPIDataIntoCheckBoxData(data[mapping.apiForFiltering], mapping.field),
+      datafield: mapping.datafield,
+      show: mapping.show,
+      slider: mapping.slider,
+      quantifier: mapping.quantifier,
+      section: mapping.section,
+      tooltips: mapping.tooltips,
+    }))
+  );
+}
+
+/**
+ *  Check sidebar has filter selections.
+ * return boolean
+ */
+function hasFilter() {
+  const currentAllActiveFilters = getState().allActiveFilters;
+  return Object.entries(currentAllActiveFilters).filter((item) => item[1].length > 0).length > 0;
+}
+
+/**
+ *  Get file name by fileids
+ * @return {json}
+ */
+
+export async function getFileNamesByFileIds(fileIds) {
+  const data = await client
+    .query({
+      query: GET_FILES_NAME_QUERY,
+      variables: {
+        file_ids: fileIds,
+      },
+    })
+    .then((result) => result.data.fileOverview.map((item) => item.file_name));
+  return data;
+}
+
+/**
+ *  Check table has selections.
+ * @return {json}
+ */
+export async function tableHasSelections() {
+  let selectedRowInfo = [];
+  let filteredIds = [];
+
+  // without the filters, the filteredIds is null
+  if (!hasFilter()) {
+    return selectedRowInfo.length > 0;
+  }
+
+  const filteredNames = await getFileNamesByFileIds(getState().filteredFileIds);
+  switch (getState().currentActiveTab) {
+    case tabIndex[3].title:
+      filteredIds = getState().filteredPatentIds;
+      selectedRowInfo = getState().dataPatentSelected.selectedRowInfo;
+      break;
+
+    case tabIndex[2].title:
+      filteredIds = getState().filteredClinicalTrialIds;
+      selectedRowInfo = getState().dataClinicalTrialSelected.selectedRowInfo;
+      break;
+
+    case tabIndex[1].title:
+      filteredIds = filteredNames;
+      selectedRowInfo = getState().dataFileSelected.selectedRowInfo;
+      break;
+
+    default:
+      filteredIds = getState().filteredSampleIds;
+      selectedRowInfo = getState().dataSampleSelected.selectedRowInfo;
+  }
+
+  return selectedRowInfo.filter(
+    (value) => (filteredIds && filteredIds !== null ? filteredIds.includes(value) : false),
+  ).length > 0;
+}
+
+function setDataFileSelected(result) {
+  store.dispatch({ type: 'SET_FILE_SELECTION', payload: result });
+}
+
+function setDataSampleSelected(result) {
+  store.dispatch({ type: 'SET_SAMPLE_SELECTION', payload: result });
+}
+
+function setDataClinicalTrialSelected(result) {
+  store.dispatch({ type: 'SET_CLINICAL_TRIAL_SELECTION', payload: result });
+}
+
+function setDataPatentSelected(result) {
+  store.dispatch({ type: 'SET_PATENT_SELECTION', payload: result });
+}
+/**
+ *  Returns the functuion depend on current active tab
+ * @return {func}
+ */
+
+export function getTableRowSelectionEvent() {
+  const currentState = getState();
+  const tableRowSelectionEvent = currentState.currentActiveTab === tabIndex[3].title
+    ? setDataPatentSelected
+    : currentState.currentActiveTab === tabIndex[2].title
+      ? setDataClinicalTrialSelected
+      : currentState.currentActiveTab === tabIndex[1].title
+        ? setDataFileSelected
+        : setDataSampleSelected;
+  return tableRowSelectionEvent;
+}
+
+export function clearTableSelections() {
+  store.dispatch({ type: 'CLEAR_TABLE_SELECTION' });
+}
+
+export const getCaseDetail = () => getState();
+
+export function setSearchCriteria(payload) {
+  store.dispatch({
+    type: 'SET_SEARCH_CRITERIA',
+    payload,
+  });
+}
+
+// reducers
+const reducers = {
+  CASE_DETAIL_TAB_QUERY_ERR: (state, item) => ({
+    ...state,
+    hasError: true,
+    error: item,
+    isLoading: false,
+    isFetched: false,
+  }),
+  READY_CASE_DETAIL_TAB: (state) => {
+    return {
+      ...state,
+      isLoading: false,
+      isFetched: true,
+      setSideBarLoading: false,
+      isCaseDetailTableLoading: false,
+    };
+  },
+  LOCAL_SEARCH: (state, item) => {
+    const isEmpty = item.subjectResponse.data
+      && item.subjectResponse.data.subjectOverview
+      && item.subjectResponse.data.subjectOverview.length < 1;
+    const checkboxData = customCheckBox(item.result.data, facetSearchData, isEmpty);
+    const newCheckboxData = [...checkboxData];
+    checkboxData.map((val, idx) => {
+      if (item.variables && item.variables[val.datafield] && item.variables[val.datafield].length) {
+        const checkboxItem = newCheckboxData[idx].checkboxItems;
+        checkboxItem.map((data, id) => {
+          const index = item.variables[val.datafield].findIndex((check) => check === data.name);
+          if (index >= 0) {
+            checkboxItem[id].isChecked = true;
+          }
+          return null;
+        });
+        newCheckboxData[idx].checkboxItems = checkboxItem;
+      }
+      return null;
+    });
+    return {
+      ...state,
+      setSideBarLoading: false,
+      datatable: {
+        dataCase: item.subjectResponse.data.subjectOverview,
+      },
+      checkbox: {
+        data: newCheckboxData,
+        variables: item.variables,
+      },
+    };
+  },
+  UPDATE_CURRRENT_TAB_DATA: (state, item) => (
+    {
+      ...state,
+      isCaseDetailTableLoading: false,
+      currentActiveTab: item.currentTab,
+      datatable: {
+        ...state.datatable,
+        dataPublication: item.data.publicationOverView,
+        dataDataset: item.data.datasetOverView,
+        dataClinicalTrial: item.data.clinicalTrialOverView,
+        dataPatent: item.data.patentOverView,
+      },
+    }
+  ),
+  SET_SEARCH_CRITERIA: (state, item) => ({
+    ...state,
+    searchCriteria: item,
+  }),
+  REQUEST_CASE_DETAIL_TAB: (state) => ({ ...state, isLoading: true }),
+  SET_SIDEBAR_LOADING: (state) => ({ ...state, setSideBarLoading: true }),
+  SET_SINGLE_FILTER: (state, item) => (
+    {
+      ...state,
+      allActiveFilters: item,
+    }
+  ),
+  SET_CASE_DETAIL_TABLE_LOADING: (state) => ({ ...state, isCaseDetailTableLoading: true }),
+  TOGGGLE_CHECKBOX: (state, item) => {
+    const dataTableFilters = getFilters(state.datatable.filters, item);
+    const tableData = state.subjectOverView.data.filter((d) => (filterData(d, dataTableFilters)));
+    const updatedCheckboxData = dataTableFilters && dataTableFilters.length !== 0
+      ? getCheckBoxData(
+        state.subjectOverView.data,
+        state.checkboxForAll.data,
+        state.checkbox.data.filter((d) => item[0].groupName === d.groupName)[0],
+        dataTableFilters,
+      )
+      : state.checkboxForAll.data;
+    return {
+      ...state,
+      isCalulatingCaseDetail: false,
+      checkbox: {
+        data: updatedCheckboxData,
+      },
+      datatable: {
+        ...state.datatable,
+        dataCase: tableData,
+        filters: dataTableFilters,
+      },
+      filters: dataTableFilters,
+    };
+  },
+  RECEIVE_CASE_DETAIL_TAB: (state, rawItem) => {
+    const item = rawItem;
+
+    const checkboxData = customCheckBox(item.data, facetSearchData);
+    fetchDataForCaseDetailTab(tabIndex[0].title, allFilters(), null, null, null, null, null);
+    return item.data
+      ? {
+        ...state.caseDetail,
+        isFetched: true,
+        isLoading: false,
+        hasError: false,
+        setSideBarLoading: false,
+        searchCriteria: null,
+        error: '',
+        allActiveFilters: allFilters(),
+        filteredSubjectIds: null,
+        filteredSampleIds: null,
+        filteredFileIds: null,
+        filteredClinicalTrialIds: null,
+        filteredPatentIds: null,
+        checkboxForAll: {
+          data: checkboxData,
+        },
+        checkbox: {
+          data: checkboxData,
+        },
+        datatable: {
+          filters: [],
+        },
+        dataCaseSelected: {
+          selectedRowInfo: [],
+          selectedRowIndex: [],
+        },
+        dataSampleSelected: {
+          selectedRowInfo: [],
+          selectedRowIndex: [],
+        },
+        dataFileSelected: {
+          selectedRowInfo: [],
+          selectedRowIndex: [],
+        },
+        dataClinicalTrialSelected: {
+          selectedRowInfo: [],
+          selectedRowIndex: [],
+        },
+        dataPatentSelected: {
+          selectedRowInfo: [],
+          selectedRowIndex: [],
+        },
+        autoCompleteSelection: {
+          subject_ids: [],
+          sample_ids: [],
+          file_ids: [],
+        },
+        bulkUpload: {
+          subject_ids: [],
+          sample_ids: [],
+          file_ids: [],
+        },
+      } : { ...state };
+  },
+  CLEAR_ALL: (state, rawItem) => {
+    const item = rawItem;
+
+    const checkboxData = customCheckBox(item.data, facetSearchData);
+    fetchDataForCaseDetailTab(tabIndex[0].title, allFilters());
+    return item.data
+      ? {
+        ...state.caseDetail,
+        isFetched: true,
+        isLoading: false,
+        hasError: false,
+        setSideBarLoading: false,
+        error: '',
+        allActiveFilters: allFilters(),
+        filteredSubjectIds: null,
+        filteredSampleIds: null,
+        filteredFileIds: null,
+        filteredClinicalTrialIds: null,
+        filteredPatentIds: null,
+        checkboxForAll: {
+          data: checkboxData,
+        },
+        autoCompleteSelection: {
+          subject_ids: [],
+          sample_ids: [],
+          file_ids: [],
+        },
+        bulkUpload: {
+          subject_ids: [],
+          sample_ids: [],
+          file_ids: [],
+        },
+        checkbox: {
+          data: checkboxData,
+          variables: {},
+        },
+        datatable: {
+          filters: [],
+        },
+        dataCaseSelected: {
+          ...state.dataCaseSelected,
+        },
+        dataSampleSelected: {
+          ...state.dataSampleSelected,
+        },
+        dataFileSelected: {
+          ...state.dataFileSelected,
+        },
+        dataClinicalTrialSelected: {
+          ...state.dataClinicalTrialSelected,
+        },
+        dataPatentSelected: {
+          ...state.dataPatentSelected,
+        },
+        sortByList: {
+          ...state.sortByList,
+        },
+      } : { ...state };
+  },
+  SORT_SINGLE_GROUP_CHECKBOX: (state, item) => {
+    const groupData = state.checkbox.data.filter((group) => item.groupName === group.groupName)[0];
+    let { sortByList } = state;
+    sortByList = sortByList || {};
+    const sortedCheckboxItems = item.sortBy === 'count'
+      ? sortByCheckboxItemsByCount(groupData.checkboxItems)
+      : sortByCheckboxItemsByAlphabet(groupData.checkboxItems);
+
+    sortByList[groupData.groupName] = item.sortBy;
+    const data = state.checkbox.data.map((group) => {
+      if (group.groupName === groupData.groupName) {
+        const updatedGroupData = group;
+        updatedGroupData.checkboxItems = sortedCheckboxItems;
+        return updatedGroupData;
+      }
+
+      return group;
+    });
+
+    return { ...state, checkbox: { data }, sortByList };
+  },
+  SORT_ALL_GROUP_CHECKBOX_CASE_DETAIL: (state) => {
+    const { sortByList = {} } = state;
+    let { data } = state.checkbox;
+    const rangeData = data.filter((sideBar) => sideBar.slider === true);
+    data = data.filter((sideBar) => sideBar.slider !== true);
+    data.map((group) => {
+      const checkboxItems = sortByList[group.groupName] === 'count'
+        ? sortByCheckboxItemsByCount(group.checkboxItems)
+        : sortByCheckboxItemsByAlphabet(group.checkboxItems);
+      const updatedGroupData = group;
+      updatedGroupData.checkboxItems = checkboxItems;
+      return updatedGroupData;
+    });
+    data = data.concat(rangeData);
+    return { ...state, checkbox: { data } };
+  },
+  CLEAR_SECTION_SORT: (state, item) => {
+    const { sortByList = {} } = state;
+    const { groupName } = item;
+    // eslint-disable-next-line
+    sortByList[groupName] ? delete sortByList[groupName] : null;
+
+    return { ...state, sortByList };
+  },
+  SET_CASES_SELECTION: (state, item) => (
+    {
+      ...state,
+      dataCaseSelected: item,
+    }
+  ),
+  SET_SAMPLE_SELECTION: (state, item) => (
+    {
+      ...state,
+      dataSampleSelected: item,
+    }
+  ),
+  SET_FILE_SELECTION: (state, item) => (
+    {
+      ...state,
+      dataFileSelected: item,
+    }
+  ),
+  SET_CLINICAL_TRIAL_SELECTION: (state, item) => (
+    {
+      ...state,
+      dataClinicalTrialSelected: item,
+    }
+  ),
+  SET_PATENT_SELECTION: (state, item) => (
+    {
+      ...state,
+      dataPatentSelected: item,
+    }
+  ),
+  RESET_CHECKBOXES: (state) => (
+    {
+      ...state,
+      allActiveFilters: allFilters(),
+    }
+  ),
+  CLEAR_TABLE_SELECTION: (state) => ({
+    ...state,
+    dataCaseSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataSampleSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataFileSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataClinicalTrialSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+    dataPatentSelected: {
+      selectedRowInfo: [],
+      selectedRowIndex: [],
+    },
+  }),
+  RESET_ALL: (state) => ({
+    ...state,
+    autoCompleteSelection: {
+      subject_ids: [],
+      sample_ids: [],
+      file_ids: [],
+    },
+    bulkUpload: {
+      subject_ids: [],
+      sample_ids: [],
+      file_ids: [],
+    },
+    allActiveFilters: {},
+  }),
+  RESET_ALL_EXCEPT_BULK_UPLOAD: (state) => ({
+    ...state,
+    autoCompleteSelection: {
+      subject_ids: [],
+      sample_ids: [],
+      file_ids: [],
+    },
+    allActiveFilters: {},
+  }),
+  ADD_AUTOCOMPLETE_DATA: (state, { type, value }) => ({
+    ...state,
+    autoCompleteSelection: {
+      ...state.autoCompleteSelection,
+      [`${type}_ids`]: value,
+    },
+  }),
+  ADD_BULKSEARCHDATA: (state, { type, value }) => ({
+    ...state,
+    bulkUpload: {
+      [`${type}_ids`]: value,
+    },
+  }),
+};
+
+// INJECT-REDUCERS INTO REDUX STORE
+store.injectReducer(storeKey, (state = initialState, { type, payload }) => (
+  reducers[type] ? reducers[type](state, payload) : state));
diff --git a/src/pages/dashboardTab/components/tabController.js b/src/pages/dashboardTab/components/tabController.js
index b3db2325..12d6b1f6 100644
--- a/src/pages/dashboardTab/components/tabController.js
+++ b/src/pages/dashboardTab/components/tabController.js
@@ -36,9 +36,10 @@ const tabController = (classes) => {
     && state.dashboardTab.currentActiveTab
     ? state.dashboardTab.currentActiveTab
     : tabIndex[0].title));
-  const tabVlaue = tabIndex.map((el) => el.title).indexOf(currentActiveTabTitle) || 0;
+
+  const tabValue = tabIndex.map((el) => el.title).indexOf(currentActiveTabTitle) || 0;
   // tab settings
-  const [currentTab, setCurrentTab] = React.useState(tabVlaue);
+  const [currentTab, setCurrentTab] = React.useState(tabValue);
 
   const tableRowSelectionData = [
     useSelector((state) => (state.dashboardTab.dataCaseSelected)),

From e7f6d789eec385312270df6faa1b0f867530ee15 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 7 Nov 2022 16:01:04 -0500
Subject: [PATCH 04/29] INS-434

---
 src/bento/caseDetailData.js                   | 136 ++++++-------
 src/bento/tableDownloadCSV.js                 | 186 ++++++++++++++++++
 .../caseDetail/caseDetailTabController.js     |   2 +
 .../caseDetail/store/caseDetailReducer.js     |  12 +-
 .../dashboardTab/components/tabController.js  |   2 +
 5 files changed, 252 insertions(+), 86 deletions(-)

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index d6f3639b..13d90be1 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -1,9 +1,9 @@
 import gql from 'graphql-tag';
 import {
-  customPublicationsTabDownloadCSV,
-  customDatasetsTabDownloadCSV,
-  customClinicalTrialsTabDownloadCSV,
-  customPatentsTabDownloadCSV,
+  customCaseDetailPublicationsTabDownloadCSV,
+  customCaseDetailDatasetsTabDownloadCSV,
+  customCaseDetailClinicalTrialsTabDownloadCSV,
+  customCaseDetailPatentsTabDownloadCSV,
 } from './tableDownloadCSV';
 
 // --------------- Tooltip configuration --------------
@@ -112,28 +112,28 @@ export const externalLinkIcon = {
 // --------------- Tabs Header Data configuration --------------
 export const tabs = [
   {
-    id: 'publication_tab',
+    id: 'publication_tab_case_detail',
     title: 'Publications',
     dataField: 'dataPublication',
-    count: 'numberOfPublications',
+    count: 'num_publications',
   },
   {
-    id: 'dataset_tab',
+    id: 'dataset_tab_case_detail',
     title: 'Datasets',
     dataField: 'dataDataset',
-    count: 'numberOfDatasets',
+    count: 'num_datasets',
   },
   {
-    id: 'clinical_trial_tab',
+    id: 'clinical_trial_tab_case_detail',
     title: 'Clinical Trials',
     dataField: 'dataClinicalTrial',
-    count: 'numberOfClinicalTrials',
+    count: 'num_clinical_trials',
   },
   {
-    id: 'patent_tab',
+    id: 'patent_tab_case_detail',
     title: 'Patents',
     dataField: 'dataPatent',
-    count: 'numberOfPatents',
+    count: 'num_patents',
   },
 ];
 
@@ -182,10 +182,10 @@ export const tabContainers = [
     name: 'Publications',
     dataField: 'dataPublication',
     api: 'GET_PUBLICATIONS_OVERVIEW_QUERY',
-    paginationAPIField: 'publicationOverView',
+    paginationAPIField: 'publicationOverViewByProject',
     defaultSortField: 'publication_id',
     defaultSortDirection: 'asc',
-    count: 'numberOfPublications',
+    count: 'num_publications',
     buttonText: 'Add Selected Files',
     dataKey: 'publication_id',
     saveButtonDefaultStyle: {
@@ -262,14 +262,14 @@ export const tabContainers = [
         },
       },
     ],
-    id: 'publication_tab',
+    id: 'case_detail_publication_tab',
     onRowsSelect: 'type1',
     disableRowSelection: 'type1',
-    tableID: 'publication_tab_table',
+    tableID: 'case_detail_publication_tab_table',
     selectableRows: false,
-    tabIndex: '1',
-    tableDownloadCSV: customPublicationsTabDownloadCSV,
-    downloadFileName: 'publications_download',
+    tabIndex: '0',
+    tableDownloadCSV: customCaseDetailPublicationsTabDownloadCSV,
+    downloadFileName: 'case_detail_publications_download',
     headerPagination: true,
     footerPagination: true,
   },
@@ -277,10 +277,10 @@ export const tabContainers = [
     name: 'Datasets',
     dataField: 'dataDataset',
     api: 'GET_DATASETS_OVERVIEW_QUERY',
-    paginationAPIField: 'datasetOverView',
+    paginationAPIField: 'datasetOverViewByProject',
     defaultSortField: 'accession',
     defaultSortDirection: 'asc',
-    count: 'numberOfDatasets',
+    count: 'num_datasets',
     buttonText: 'Add Selected Files',
     dataKey: 'accession',
     saveButtonDefaultStyle: {
@@ -373,14 +373,14 @@ export const tabContainers = [
         },
       },
     ],
-    id: 'dataset_tab',
+    id: 'case_detail_dataset_tab',
     onRowsSelect: 'type1',
     disableRowSelection: 'type1',
-    tableID: 'dataset_tab_table',
+    tableID: 'case_detail_dataset_tab_table',
     selectableRows: false,
-    tabIndex: '2',
-    tableDownloadCSV: customDatasetsTabDownloadCSV,
-    downloadFileName: 'datasets_download',
+    tabIndex: '1',
+    tableDownloadCSV: customCaseDetailDatasetsTabDownloadCSV,
+    downloadFileName: 'case_detail_datasets_download',
     headerPagination: true,
     footerPagination: true,
   },
@@ -388,10 +388,10 @@ export const tabContainers = [
     name: 'Clinical Trials',
     dataField: 'dataClinicalTrial',
     api: 'GET_CLINICAL_TRIALS_OVERVIEW_QUERY',
-    paginationAPIField: 'clinicalTrialOverView',
+    paginationAPIField: 'clinicalTrialOverViewByProject',
     defaultSortField: 'clinical_trial_id',
     defaultSortDirection: 'asc',
-    count: 'numberOfClinicalTrials',
+    count: 'num_clinical_trials',
     buttonText: 'Add Selected Files',
     dataKey: 'clinical_trial_id',
     saveButtonDefaultStyle: {
@@ -450,14 +450,14 @@ export const tabContainers = [
         },
       },
     ],
-    id: 'clinical_trial_tab',
+    id: 'case_detail_clinical_trial_tab',
     onRowsSelect: 'type1',
     disableRowSelection: 'type1',
-    tableID: 'clinical_trial_tab_table',
+    tableID: 'case_detail_clinical_trial_tab_table',
     selectableRows: false,
-    tabIndex: '3',
-    tableDownloadCSV: customClinicalTrialsTabDownloadCSV,
-    downloadFileName: 'clinical_trials_download',
+    tabIndex: '2',
+    tableDownloadCSV: customCaseDetailClinicalTrialsTabDownloadCSV,
+    downloadFileName: 'case_detail_clinical_trials_download',
     headerPagination: true,
     footerPagination: true,
   },
@@ -465,10 +465,10 @@ export const tabContainers = [
     name: 'Patents',
     dataField: 'dataPatent',
     api: 'GET_PATENTS_OVERVIEW_QUERY',
-    paginationAPIField: 'patentOverView',
+    paginationAPIField: 'patentOverViewByProject',
     defaultSortField: 'patent_id',
     defaultSortDirection: 'asc',
-    count: 'numberOfPatents',
+    count: 'num_patents',
     buttonText: 'Add Selected Files',
     dataKey: 'patent_id',
     saveButtonDefaultStyle: {
@@ -508,14 +508,14 @@ export const tabContainers = [
         },
       },
     ],
-    id: 'patent_tab',
+    id: 'case_detail_patent_tab',
     onRowsSelect: 'type1',
     disableRowSelection: 'type1',
-    tableID: 'patent_tab_table',
+    tableID: 'case_detail_patent_tab_table',
     selectableRows: false,
-    tabIndex: '4',
-    tableDownloadCSV: customPatentsTabDownloadCSV,
-    downloadFileName: 'patents_download',
+    tabIndex: '3',
+    tableDownloadCSV: customCaseDetailPatentsTabDownloadCSV,
+    downloadFileName: 'case_detail_patents_download',
     headerPagination: true,
     footerPagination: true,
   },
@@ -758,21 +758,15 @@ const GET_CASE_DETAIL_DATA_QUERY = gql`
 `;
 
 export const GET_PUBLICATIONS_OVERVIEW_QUERY = gql`
-query publicationOverView(
-  $programs: [String],
-  $docs: [String],
-  $fiscal_years: [String],
-  $award_amounts: [String],
+query publicationOverViewByProject(
+  $project_id: [String],
   $offset: Int,
   $first: Int,
   $order_by: String,
   $sort_direction: String 
   ){
-  publicationOverView(
-    programs: $programs,
-    docs: $docs,
-    fiscal_years: $fiscal_years,
-    award_amounts: $award_amounts,
+  publicationOverViewByProject(
+    project_id: $project_id,
     first: $first,
     offset: $offset,
     order_by: $order_by,
@@ -794,21 +788,15 @@ query publicationOverView(
   `;
 
 export const GET_DATASETS_OVERVIEW_QUERY = gql`
-  query datasetOverView(
-    $programs: [String],
-    $docs: [String],
-    $fiscal_years: [String],
-    $award_amounts: [String],
+  query datasetOverViewByProject(
+    $project_id: [String],
     $offset: Int,
     $first: Int,
     $order_by: String,
     $sort_direction: String 
     ){
-    datasetOverView(
-      programs: $programs,
-      docs: $docs,
-      fiscal_years: $fiscal_years,
-      award_amounts: $award_amounts,
+    datasetOverViewByProject(
+      project_id: $project_id,
       first: $first,
       offset: $offset,
       order_by: $order_by,
@@ -828,21 +816,15 @@ export const GET_DATASETS_OVERVIEW_QUERY = gql`
   `;
 
 export const GET_CLINICAL_TRIALS_OVERVIEW_QUERY = gql`
-  query clinicalTrialOverView(
-    $programs: [String],
-    $docs: [String],
-    $fiscal_years: [String],
-    $award_amounts: [String],
+  query clinicalTrialOverViewByProject(
+    $project_id: [String],
     $offset: Int,
     $first: Int,
     $order_by: String,
     $sort_direction: String 
     ){
-    clinicalTrialOverView(
-      programs: $programs,
-      docs: $docs,
-      fiscal_years: $fiscal_years,
-      award_amounts: $award_amounts,
+    clinicalTrialOverViewByProject(
+      project_id: $project_id,
       first: $first,
       offset: $offset,
       order_by: $order_by,
@@ -857,21 +839,15 @@ export const GET_CLINICAL_TRIALS_OVERVIEW_QUERY = gql`
   `;
 
 export const GET_PATENTS_OVERVIEW_QUERY = gql`
-  query patentOverView(
-    $programs: [String],
-    $docs: [String],
-    $fiscal_years: [String],
-    $award_amounts: [String],
+  query patentOverViewByProject(
+    $project_id: [String],
     $offset: Int,
     $first: Int,
     $order_by: String,
     $sort_direction: String 
     ){
-    patentOverView(
-      programs: $programs,
-      docs: $docs,
-      fiscal_years: $fiscal_years,
-      award_amounts: $award_amounts,
+    patentOverViewByProject(
+      project_id: $project_id,
       first: $first,
       offset: $offset,
       order_by: $order_by,
diff --git a/src/bento/tableDownloadCSV.js b/src/bento/tableDownloadCSV.js
index 5ae43391..ea2ab12a 100644
--- a/src/bento/tableDownloadCSV.js
+++ b/src/bento/tableDownloadCSV.js
@@ -367,6 +367,192 @@ export const customPatentsTabDownloadCSV = {
   defaultFullTableDownload: true,
 };
 
+export const GET_CASE_DETAIL_PUBLICATIONS_TAB = gql`
+query publicationOverViewByProject(
+  $project_id: [String],
+  $offset: Int,
+  $first: Int,
+  $order_by: String,
+  $sort_direction: String 
+  ){
+  publicationOverViewByProject(
+    project_id: $project_id,
+    first: $first,
+    offset: $offset,
+    order_by: $order_by,
+    sort_direction: $sort_direction
+  ) {
+    publication_id,
+    pmc_id,
+    year,
+    journal,
+    title,
+    authors,
+    publish_date,
+    citation_count,
+    relative_citation_ratio,
+    nih_percentile,
+    doi,
+  }
+}
+  `;
+
+export const customCaseDetailPublicationsTabDownloadCSV = {
+  keysToInclude: [
+    'publication_id',
+    'title',
+    'authors',
+    'citation_count',
+    'relative_citation_ratio',
+    'nih_percentile',
+  ],
+  header: [
+    'PubMed ID',
+    'Title',
+    'Authors',
+    'Citation Count',
+    'Relative Citation Ratio',
+    'NIH Percentile',
+  ],
+  query: GET_CASE_DETAIL_PUBLICATIONS_TAB,
+  apiVariable: 'publicationOverViewByProject',
+  fileName: 'INS Case Detail Publications',
+  defaultFullTableDownload: true,
+};
+
+export const GET_CASE_DETAIL_DATASETS_TAB = gql`
+query datasetOverViewByProject(
+  $project_id: [String],
+  $offset: Int,
+  $first: Int,
+  $order_by: String,
+  $sort_direction: String 
+  ){
+  datasetOverViewByProject(
+    project_id: $project_id,
+    first: $first,
+    offset: $offset,
+    order_by: $order_by,
+    sort_direction: $sort_direction
+  ) {
+    accession,
+    title,
+    submission_date,
+    last_update_date,
+    release_date,
+    registration_date,
+    type,
+    link,
+    transformed_type
+  }
+}
+`;
+
+export const customCaseDetailDatasetsTabDownloadCSV = {
+  keysToInclude: [
+    'accession',
+    'link',
+    'transformed_type',
+    'title',
+    'submission_date',
+    'last_update_date',
+    'release_date',
+    'registration_date',
+  ],
+  header: [
+    'Accession',
+    'Link',
+    'Type',
+    'Title',
+    'Submission Date',
+    'Last Update Date',
+    'Release Date',
+    'Registration Date',
+  ],
+  query: GET_CASE_DETAIL_DATASETS_TAB,
+  apiVariable: 'datasetOverViewByProject',
+  fileName: 'INS Case Detail Datasets',
+  defaultFullTableDownload: true,
+};
+
+export const GET_CASE_DETAIL_CLINICAL_TRIALS_TAB = gql`
+query clinicalTrialOverViewByProject(
+  $project_id: [String],
+  $offset: Int,
+  $first: Int,
+  $order_by: String,
+  $sort_direction: String 
+  ){
+  clinicalTrialOverViewByProject(
+    project_id: $project_id,
+    first: $first,
+    offset: $offset,
+    order_by: $order_by,
+    sort_direction: $sort_direction
+  ) {
+    clinical_trial_id,
+    title,
+    last_update_posted,
+    recruitment_status,
+  }
+}
+`;
+
+export const customCaseDetailClinicalTrialsTabDownloadCSV = {
+  keysToInclude: [
+    'clinical_trial_id',
+    'title',
+    'last_update_posted',
+    'recruitment_status',
+  ],
+  header: [
+    'Clinical Trial ID',
+    'Title',
+    'Last Update Posted',
+    'Recruitment Status',
+  ],
+  query: GET_CASE_DETAIL_CLINICAL_TRIALS_TAB,
+  apiVariable: 'clinicalTrialOverViewByProject',
+  fileName: 'INS Case Detail Clinical Trials',
+  defaultFullTableDownload: true,
+};
+
+export const GET_CASE_DETAIL_PATENTS_TAB = gql`
+query patentOverViewByProject(
+  $project_id: [String],
+  $offset: Int,
+  $first: Int,
+  $order_by: String,
+  $sort_direction: String 
+  ){
+  patentOverViewByProject(
+    project_id: $project_id,
+    first: $first,
+    offset: $offset,
+    order_by: $order_by,
+    sort_direction: $sort_direction
+  ) {
+    patent_id,
+    fulfilled_date,
+  }
+}
+`;
+
+export const customCaseDetailPatentsTabDownloadCSV = {
+  keysToInclude: [
+    'patent_id',
+    'fulfilled_date',
+  ],
+  header: [
+    'Patent ID',
+    'Fulfilled Date',
+  ],
+  query: GET_CASE_DETAIL_PATENTS_TAB,
+  apiVariable: 'patentOverViewByProject',
+  fileName: 'INS Case Detail Patents',
+  defaultFullTableDownload: true,
+};
+
 export const MY_CART = gql`
 query filesInList($file_ids: [String], $offset: Int = 0, $first: Int = 1000, $order_by:String ="") {
     filesInList(file_ids: $file_ids, offset: $offset,first: $first, order_by: $order_by) {
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index ecf11488..d62a1b47 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -31,6 +31,8 @@ function TabContainer({ children, dir }) {
 }
 
 const tabController = (classes) => {
+  useSelector((state) => (console.log('state: ', state)));
+
   const currentActiveTabTitle = useSelector((state) => (state.caseDetailTab
     && state.caseDetailTab.currentActiveTab
     ? state.caseDetailTab.currentActiveTab
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 1d43e877..38a70454 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -499,8 +499,8 @@ export async function fetchAllFileIDsForSelectAll(fileCount = 100000) {
       },
     })
     .then((result) => {
-      const RESULT_DATA = getState().currentActiveTab === tabIndex[3].title ? 'patentOverView' : getState().currentActiveTab === tabIndex[2].title ? 'clinicalTrialOverView' : getState().currentActiveTab === tabIndex[1].title ? 'datasetOverView' : 'publicationOverView';
-      const fileIdsFromQuery = RESULT_DATA === 'publicationOverView' ? transformfileIdsToFiles(result.data[RESULT_DATA]) : RESULT_DATA === 'datasetOverView' ? transformCasesFileIdsToFiles(result.data[RESULT_DATA]) : result.data[RESULT_DATA] || [];
+      const RESULT_DATA = getState().currentActiveTab === tabIndex[3].title ? 'patentOverViewByProject' : getState().currentActiveTab === tabIndex[2].title ? 'clinicalTrialOverViewByProject' : getState().currentActiveTab === tabIndex[1].title ? 'datasetOverViewByProject' : 'publicationOverViewByProject';
+      const fileIdsFromQuery = RESULT_DATA === 'publicationOverViewByProject' ? transformfileIdsToFiles(result.data[RESULT_DATA]) : RESULT_DATA === 'datasetOverViewByProject' ? transformCasesFileIdsToFiles(result.data[RESULT_DATA]) : result.data[RESULT_DATA] || [];
       return fileIdsFromQuery;
     });
 
@@ -977,10 +977,10 @@ const reducers = {
       currentActiveTab: item.currentTab,
       datatable: {
         ...state.datatable,
-        dataPublication: item.data.publicationOverView,
-        dataDataset: item.data.datasetOverView,
-        dataClinicalTrial: item.data.clinicalTrialOverView,
-        dataPatent: item.data.patentOverView,
+        dataPublication: item.data.publicationOverViewByProject,
+        dataDataset: item.data.datasetOverViewByProject,
+        dataClinicalTrial: item.data.clinicalTrialOverViewByProject,
+        dataPatent: item.data.patentOverViewByProject,
       },
     }
   ),
diff --git a/src/pages/dashboardTab/components/tabController.js b/src/pages/dashboardTab/components/tabController.js
index 12d6b1f6..5e0e406d 100644
--- a/src/pages/dashboardTab/components/tabController.js
+++ b/src/pages/dashboardTab/components/tabController.js
@@ -32,6 +32,8 @@ function TabContainer({ children, dir }) {
 }
 
 const tabController = (classes) => {
+  useSelector((state) => (console.log('state: ', state.dashboardTab)));
+
   const currentActiveTabTitle = useSelector((state) => (state.dashboardTab
     && state.dashboardTab.currentActiveTab
     ? state.dashboardTab.currentActiveTab

From 3a7bac600a7467906565f59a5d5ee68fe0a1cc0e Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 7 Nov 2022 16:08:21 -0500
Subject: [PATCH 05/29] INS-434

---
 src/pages/caseDetail/caseDetailTabView.js     | 167 +-----------------
 src/pages/caseDetail/caseDetailView.js        |  21 ---
 .../caseDetail/store/caseDetailReducer.js     |  33 ----
 3 files changed, 3 insertions(+), 218 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailTabView.js b/src/pages/caseDetail/caseDetailTabView.js
index 0a153921..81639a5e 100644
--- a/src/pages/caseDetail/caseDetailTabView.js
+++ b/src/pages/caseDetail/caseDetailTabView.js
@@ -1,15 +1,11 @@
 /* eslint-disable */
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import {
   Grid,
-  IconButton,
   withStyles,
 } from '@material-ui/core';
-import { Link } from 'react-router-dom';
-import HelpIcon from '@material-ui/icons/Help';
-import { getColumns, ToolTip } from 'bento-components';
+import { getColumns } from 'bento-components';
 import _ from 'lodash';
-import SelectAllModal from './caseDetailModal';
 import {
   GET_PUBLICATIONS_OVERVIEW_QUERY,
   GET_DATASETS_OVERVIEW_QUERY,
@@ -17,8 +13,7 @@ import {
   GET_PATENTS_OVERVIEW_QUERY,
 } from '../../bento/caseDetailData';
 import CustomDataTable from '../../components/serverPaginatedTable/serverPaginatedTable';
-import { addToCart, getCart, cartWillFull } from '../../../src/pages/fileCentricCart/store/cart';
-import AddToCartAlertDialog from '../../components/AddToCartDialog';
+import { getCart } from '../../../src/pages/fileCentricCart/store/cart';
 import DocumentDownload from '../../components/DocumentDownload/DocumentDownloadView';
 import globalData from '../../bento/siteWideConfig';
 
@@ -29,13 +24,8 @@ const TabView = ({
   data,
   customColumn,
   primaryKeyIndex = 0,
-  openSnack,
   disableRowSelection,
-  buttonText,
   tableID,
-  saveButtonDefaultStyle,
-  DeactiveSaveButtonDefaultStyle,
-  ActiveSaveButtonDefaultStyle,
   externalLinkIcon,
   options,
   count,
@@ -43,31 +33,17 @@ const TabView = ({
   paginationAPIField,
   paginationAPIFieldDesc,
   dataKey,
-  filteredSubjectIds,
-  filteredSampleIds,
-  filteredFileIds,
-  filteredClinicalTrialIds,
-  filteredPatentIds,
   allFilters,
   defaultSortCoulmn,
   defaultSortDirection,
-  // tableHasSelections,
   setRowSelection,
   selectedRowInfo = [],
   selectedRowIndex = [],
-  clearTableSelections,
-  fetchAllFileIDs,
-  getFilesCount,
   tableDownloadCSV,
-  tooltipMessage,
-  tooltipIcon,
-  tooltipAlt,
 }) => {
   // Get the existing files ids from  cart state
   const cart = getCart();
   const fileIDs = cart.fileIds ? cart.fileIds : [];
-  const saveButton = useRef(null);
-  const saveButton2 = useRef(null);
   const AddToCartAlertDialogRef = useRef();
 
   const [cartIsFull, setCartIsFull] = React.useState(false);
@@ -79,64 +55,6 @@ const TabView = ({
       button.current.style[key] = value;
     }
   };
-  const initSaveButtonDefaultStyle = (button) => {
-    // eslint-disable-next-line no-param-reassign
-    button.current.disabled = true;
-    buildButtonStyle(button, saveButtonDefaultStyle);
-  };
-
-  const updateActiveSaveButtonStyle = (flag, button) => {
-    if (flag) {
-      // eslint-disable-next-line no-param-reassign
-      button.current.disabled = true;
-      buildButtonStyle(button, DeactiveSaveButtonDefaultStyle);
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      button.current.disabled = false;
-      buildButtonStyle(button, ActiveSaveButtonDefaultStyle);
-    }
-  };
-
-  // async function updateButtonStatus(status) {
-  //   if (!status) {
-  //     updateActiveSaveButtonStyle(true, saveButton);
-  //     updateActiveSaveButtonStyle(true, saveButton2);
-  //   } else {
-  //     updateActiveSaveButtonStyle(false, saveButton);
-  //     updateActiveSaveButtonStyle(false, saveButton2);
-  //   }
-  // }
-
-  // useEffect(() => {
-  //   initSaveButtonDefaultStyle(saveButton);
-  //   initSaveButtonDefaultStyle(saveButton2);
-  //   updateButtonStatus(selectedRowInfo.length > 0);
-  // });
-
-  async function exportFiles() {
-    const selectedIDs = await fetchAllFileIDs(getFilesCount(), selectedRowInfo);
-    // Find the newly added files by comparing
-    const selectFileIds = filteredFileIds != null
-      ? selectedIDs.filter((x) => filteredFileIds.includes(x))
-      : selectedIDs;
-    const newFileIDS = fileIDs !== null ? selectFileIds.filter(
-      (e) => !fileIDs.find((a) => e === a),
-    ).length : selectedIDs.length;
-    if (cartWillFull(newFileIDS)) {
-      // throw an alert
-      setCartIsFull(true);
-      AddToCartAlertDialogRef.current.open();
-    } else if (newFileIDS > 0) {
-      addToCart({ fileIds: selectFileIds });
-      openSnack(newFileIDS);
-      // tell the reducer to clear the selection on the table.
-      clearTableSelections();
-    } else if (newFileIDS === 0) {
-      openSnack(newFileIDS);
-      // tell the reducer to clear the selection on the table.
-      clearTableSelections();
-    }
-  }
 
   function rowSelectionEvent(displayData, rowsSelected) {
     const displayedDataKeies = displayData;
@@ -236,42 +154,6 @@ const TabView = ({
 
   return (
     <div>
-      {/* <Grid item xs={12} className={classes.saveButtonDiv}>
-        <SelectAllModal tableIDForButton={tableID} openSnack={openSnack} />
-        <AddToCartAlertDialog
-          cartWillFull={cartIsFull}
-          ref={AddToCartAlertDialogRef}
-        />
-        <button
-          type="button"
-          ref={saveButton2}
-          onClick={exportFiles}
-          className={classes.button}
-          id={`${tableID}_${buttonText}`}
-        >
-          {buttonText}
-        </button>
-        <ToolTip classes={{ tooltip: classes.customTooltip, arrow: classes.customArrow }} title={tooltipMessage} arrow placement="bottom">
-          <IconButton
-            aria-label="help"
-            className={classes.helpIconButton}
-          >
-            {tooltipIcon ? (
-              <img
-                src={tooltipIcon}
-                alt={tooltipAlt}
-                className={classes.helpIcon}
-              />
-            ) : (
-              <HelpIcon
-                className={classes.helpIcon}
-                fontSize="small"
-              />
-            )}
-          </IconButton>
-        </ToolTip>
-
-      </Grid> */}
       <Grid container>
         <Grid item xs={12} id={tableID}>
           <CustomDataTable
@@ -292,49 +174,6 @@ const TabView = ({
           />
         </Grid>
       </Grid>
-      {/* <Grid item xs={12} className={classes.saveButtonDivBottom}>
-        <button
-          type="button"
-          ref={saveButton}
-          onClick={exportFiles}
-          className={classes.button}
-        >
-          {buttonText}
-        </button>
-
-        <ToolTip classes={{ tooltip: classes.customTooltip, arrow: classes.customArrow }} title={tooltipMessage} arrow placement="bottom">
-          <IconButton
-            aria-label="help"
-            className={classes.helpIconButton}
-          >
-            {tooltipIcon ? (
-              <img
-                src={tooltipIcon}
-                alt={tooltipAlt}
-                className={classes.helpIcon}
-              />
-            ) : (
-              <HelpIcon
-                className={classes.helpIcon}
-                fontSize="small"
-              />
-            )}
-          </IconButton>
-        </ToolTip>
-        <div style={{ position: 'relative' }}>
-          <Link
-            rel="noreferrer"
-            to={(location) => ({ ...location, pathname: '/fileCentricCart' })}
-            color="inherit"
-            className={classes.cartlink}
-          >
-            Go to Cart
-            {' '}
-            {'>'}
-          </Link>
-        </div>
-
-      </Grid> */}
     </div>
   );
 };
diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index af7c5798..ec258b50 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -51,27 +51,6 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
     isALink: true,
   }];
 
-  // // those are questioning codes for ICDC only, need to remove from here.
-  // const filesOfSamplesObj = filesOfSamples.reduce(
-  //   (obj, item) => ({ ...obj, [item.sample_id]: item.files }), {},
-  // );
-
-  // // NOTE: Needs improvement.
-  // const datFieldsFromRoot = [];
-  // table1.columns.forEach((e) => (e.dataFromRoot ? datFieldsFromRoot.push(e.dataField) : null));
-
-  // const samplesData = data.samples.map((s) => {
-  //   const files = filesOfSamplesObj[s.sample_id];
-  //   const sample = _.cloneDeep(s);
-  //   sample.files = files;
-  //   if (datFieldsFromRoot.length > 0) {
-  //     datFieldsFromRoot.forEach((e) => {
-  //       sample[e] = data[e];
-  //     });
-  //   }
-  //   return sample;
-  // });
-
   return (
     <>
       <Snackbar
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 38a70454..1384d279 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -77,10 +77,6 @@ const initialState = {
       dataSample: 'undefined',
       dataFile: 'undefined',
     },
-    dataCaseSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
     dataSampleSelected: {
       selectedRowInfo: [],
       selectedRowIndex: [],
@@ -211,18 +207,6 @@ function createFilterVariablesRange(value, sideBarItem) {
   // eslint-disable-next-line  no-unused-vars
 }
 
-/**
- * Returns active filter list while removing the param key.
- *
- * @param {object} data
- * @return {json}
- */
-function clearGroup(data) {
-  const currentAllActiveFilters = getState().allActiveFilters;
-  currentAllActiveFilters[data] = [];
-  return currentAllActiveFilters;
-}
-
 export function clearSectionSort(groupName) {
   store.dispatch({
     type: 'CLEAR_SECTION_SORT',
@@ -1051,10 +1035,6 @@ const reducers = {
         datatable: {
           filters: [],
         },
-        dataCaseSelected: {
-          selectedRowInfo: [],
-          selectedRowIndex: [],
-        },
         dataSampleSelected: {
           selectedRowInfo: [],
           selectedRowIndex: [],
@@ -1122,9 +1102,6 @@ const reducers = {
         datatable: {
           filters: [],
         },
-        dataCaseSelected: {
-          ...state.dataCaseSelected,
-        },
         dataSampleSelected: {
           ...state.dataSampleSelected,
         },
@@ -1187,12 +1164,6 @@ const reducers = {
 
     return { ...state, sortByList };
   },
-  SET_CASES_SELECTION: (state, item) => (
-    {
-      ...state,
-      dataCaseSelected: item,
-    }
-  ),
   SET_SAMPLE_SELECTION: (state, item) => (
     {
       ...state,
@@ -1225,10 +1196,6 @@ const reducers = {
   ),
   CLEAR_TABLE_SELECTION: (state) => ({
     ...state,
-    dataCaseSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
     dataSampleSelected: {
       selectedRowInfo: [],
       selectedRowIndex: [],

From 362605f8cceb23a378ea3068fa57a5ff43c400ae Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 7 Nov 2022 16:10:49 -0500
Subject: [PATCH 06/29] INS-434

---
 src/pages/caseDetail/caseDetailTabController.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index d62a1b47..ca4b2eb9 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -30,7 +30,7 @@ function TabContainer({ children, dir }) {
   );
 }
 
-const tabController = (classes) => {
+const caseDetailTabController = (classes) => {
   useSelector((state) => (console.log('state: ', state)));
 
   const currentActiveTabTitle = useSelector((state) => (state.caseDetailTab
@@ -299,4 +299,4 @@ const styles = () => ({
     zIndex: '300',
   },
 });
-export default withStyles(styles, { withTheme: true })(tabController);
+export default withStyles(styles, { withTheme: true })(caseDetailTabController);

From 7039cf534072a2183fb55576e4a687590e59951b Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Tue, 8 Nov 2022 14:22:23 -0500
Subject: [PATCH 07/29] INS-434

---
 src/components/Layout/LayoutView.js          |  4 +-
 src/pages/caseDetail/caseDetailController.js | 56 ++++++++++++++-
 src/pages/caseDetail/caseDetailState.js      | 74 ++++++++++++++++++++
 src/store/index.js                           |  2 +
 4 files changed, 131 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/caseDetail/caseDetailState.js

diff --git a/src/components/Layout/LayoutView.js b/src/components/Layout/LayoutView.js
index e90bf492..7bd66c5b 100644
--- a/src/components/Layout/LayoutView.js
+++ b/src/components/Layout/LayoutView.js
@@ -35,14 +35,12 @@ const Layout = ({ classes, isSidebarOpened }) => (
       <>
         <Header />
         <NavBar />
-        {/* Reminder: Ajay need to replace the ICDC with env variable and
-          change build npm to read env variable */}
         <div
           className={classes.content}
         >
           <Route component={ScrollToTop} />
           <Switch>
-            <Route exact path="/ICDC/" component={Home} />
+            <Route exact path="/INS/" component={Home} />
             <Route exact path="/" component={Home} />
             <Route exact path="/home" component={Home} />
             <Route path="/explore" component={Dashboard} />
diff --git a/src/pages/caseDetail/caseDetailController.js b/src/pages/caseDetail/caseDetailController.js
index 6d2c4c93..73a3dd3e 100644
--- a/src/pages/caseDetail/caseDetailController.js
+++ b/src/pages/caseDetail/caseDetailController.js
@@ -1,4 +1,6 @@
-import React from 'react';
+/* eslint-disable max-len */
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { useQuery } from '@apollo/client';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import CaseDetailView from './caseDetailView';
@@ -6,6 +8,7 @@ import { Typography } from '../../components/Wrappers/Wrappers';
 import {
   GET_CASE_DETAIL_DATA_QUERY, dataRoot, caseIDField, filesOfSamples,
 } from '../../bento/caseDetailData';
+import { fetchDataForCaseDetailDataTable } from './caseDetailState';
 
 const CaseDetailContainer = ({ match }) => {
   const { loading, error, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
@@ -23,5 +26,54 @@ const CaseDetailContainer = ({ match }) => {
 
   return <CaseDetailView data={data[dataRoot]} filesOfSamples={data[filesOfSamples]} />;
 };
+class CaseDetailController extends Component {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch(fetchDataForCaseDetailDataTable());
+  }
+
+  render() {
+    const {
+      isLoading, hasError, error, isFetched, isSidebarOpened,
+    } = this.props;
+
+    if (hasError) {
+      return (
+        <Typography variant="headline" color="error" size="sm">
+          {error && `An error has occurred in loading dashboard component: ${error}`}
+        </Typography>
+      );
+    }
+    if (isLoading) {
+      return <CircularProgress />;
+    }
+
+    if (isFetched) {
+      return (
+        CaseDetailContainer
+      );
+    }
+    return (
+      <Typography variant="headline" size="sm">
+        {error && `An error has occurred in loading stats component: ${error}`}
+      </Typography>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  const {
+    isLoading, isFetched, hasError, error,
+  } = state.dashboard;
+
+  const { isSidebarOpened } = state.layout;
+  return {
+    isLoading,
+    hasError,
+    error,
+    isFetched,
+    isSidebarOpened,
+  };
+}
 
-export default CaseDetailContainer;
+export default connect(mapStateToProps)(CaseDetailController);
diff --git a/src/pages/caseDetail/caseDetailState.js b/src/pages/caseDetail/caseDetailState.js
new file mode 100644
index 00000000..1cb8e7ae
--- /dev/null
+++ b/src/pages/caseDetail/caseDetailState.js
@@ -0,0 +1,74 @@
+export const initialState = {
+  caseDetail: {
+    isDataTableUptoDate: false,
+    isFetched: false,
+    isLoading: false,
+    error: '',
+    hasError: false,
+    subjectOverView: {
+      data: [],
+    },
+    datatable: {
+      filters: [],
+      data: [],
+    },
+  },
+};
+
+export const GET_CASE_DETAIL_DATA_QUERY_ERR = 'GET_CASE_DETAIL_DATA_QUERY_ERR';
+export const READY_CASE_DETAIL = 'READY_CASE_DETAIL';
+export const REQUEST_CASE_DETAIL = 'REQUEST_CASE_DETAIL';
+export const FETCH_ALL_DATA_FOR_CASE_DETAIL_TABLE = 'FETCH_ALL_DATA_FOR_CASE_DETAIL_TABLE';
+
+function readyCaseDetail() {
+  return {
+    type: READY_CASE_DETAIL,
+  };
+}
+
+export function fetchAllDataForCaseDetailDataTable() {
+  return (dispatch, getState) => Promise.resolve();
+}
+
+export function AsyncFetchAllDataForCaseDetailDataTable() {
+  return async (dispatch, getState) => Promise.resolve();
+}
+
+export function fetchDataForCaseDetailDataTable() {
+  return (dispatch, getState) => dispatch(readyCaseDetail());
+}
+
+export default function caseDetailReducer(state = initialState, action) {
+  switch (action.type) {
+    case GET_CASE_DETAIL_DATA_QUERY_ERR:
+      return {
+        ...state,
+        hasError: true,
+        error: action.error,
+        isLoading: false,
+        isFetched: false,
+      };
+    case FETCH_ALL_DATA_FOR_CASE_DETAIL_TABLE:
+      return {
+        ...state,
+        isDataTableUptoDate: true,
+        subjectOverView: {
+          data: action.payload.data.projectOverView,
+        },
+        datatable: {
+          data: action.payload.data.projectOverView,
+          filters: [],
+        },
+      };
+    case READY_CASE_DETAIL:
+      return {
+        ...state,
+        isLoading: false,
+        isFetched: true,
+      };
+    case REQUEST_CASE_DETAIL:
+      return { ...state, isLoading: true };
+    default:
+      return state;
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
index 14c16865..cece2e8f 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,11 +4,13 @@ import { createLogger } from 'redux-logger';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import layout from '../components/Layout/LayoutState';
 import dashboard from '../pages/dashboard/dashboardState';
+import caseDetail from '../pages/caseDetail/caseDetailState';
 import stats from '../components/Stats/StatsState';
 
 const reducers = {
   layout,
   dashboard,
+  caseDetail,
   stats,
 };
 const loggerMiddleware = createLogger();

From c29fc7fdf50e1d435cff72ca2e913427b7c5da85 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Tue, 8 Nov 2022 14:23:58 -0500
Subject: [PATCH 08/29] INS-434

---
 src/pages/caseDetail/caseDetailTabController.js    | 2 --
 src/pages/dashboardTab/components/tabController.js | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index ca4b2eb9..e7b5293a 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -31,8 +31,6 @@ function TabContainer({ children, dir }) {
 }
 
 const caseDetailTabController = (classes) => {
-  useSelector((state) => (console.log('state: ', state)));
-
   const currentActiveTabTitle = useSelector((state) => (state.caseDetailTab
     && state.caseDetailTab.currentActiveTab
     ? state.caseDetailTab.currentActiveTab
diff --git a/src/pages/dashboardTab/components/tabController.js b/src/pages/dashboardTab/components/tabController.js
index 5e0e406d..12d6b1f6 100644
--- a/src/pages/dashboardTab/components/tabController.js
+++ b/src/pages/dashboardTab/components/tabController.js
@@ -32,8 +32,6 @@ function TabContainer({ children, dir }) {
 }
 
 const tabController = (classes) => {
-  useSelector((state) => (console.log('state: ', state.dashboardTab)));
-
   const currentActiveTabTitle = useSelector((state) => (state.dashboardTab
     && state.dashboardTab.currentActiveTab
     ? state.dashboardTab.currentActiveTab

From 0c814c042bdd485dddccad5158a30b0f30601591 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Tue, 8 Nov 2022 14:44:37 -0500
Subject: [PATCH 09/29] INS-434

---
 src/pages/caseDetail/caseDetailController.js | 53 +++++++++++++-------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailController.js b/src/pages/caseDetail/caseDetailController.js
index 73a3dd3e..4f6cbbfb 100644
--- a/src/pages/caseDetail/caseDetailController.js
+++ b/src/pages/caseDetail/caseDetailController.js
@@ -10,22 +10,23 @@ import {
 } from '../../bento/caseDetailData';
 import { fetchDataForCaseDetailDataTable } from './caseDetailState';
 
-const CaseDetailContainer = ({ match }) => {
-  const { loading, error, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
-    variables: { [caseIDField]: match.params.id },
-  });
+// const CaseDetailContainer = ({ match }) => {
+//   const { loading, error, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
+//     variables: { [caseIDField]: match.params.id },
+//   });
 
-  if (loading) return <CircularProgress />;
-  if (error || !data || data[dataRoot][caseIDField] !== match.params.id) {
-    return (
-      <Typography variant="h5" color="error" size="sm">
-        {error ? `An error has occurred in loading stats component: ${error}` : 'Recieved wrong data'}
-      </Typography>
-    );
-  }
+//   if (loading) return <CircularProgress />;
+//   if (error || !data || data[dataRoot][caseIDField] !== match.params.id) {
+//     return (
+//       <Typography variant="h5" color="error" size="sm">
+//         {error ? `An error has occurred in loading stats component: ${error}` : 'Recieved wrong data'}
+//       </Typography>
+//     );
+//   }
+
+//   return <CaseDetailView data={data[dataRoot]} filesOfSamples={data[filesOfSamples]} />;
+// };
 
-  return <CaseDetailView data={data[dataRoot]} filesOfSamples={data[filesOfSamples]} />;
-};
 class CaseDetailController extends Component {
   componentDidMount() {
     const { dispatch } = this.props;
@@ -34,25 +35,41 @@ class CaseDetailController extends Component {
 
   render() {
     const {
-      isLoading, hasError, error, isFetched, isSidebarOpened,
+      isLoading, hasError, error, isFetched, match,
     } = this.props;
 
+    const { loading, dataError, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
+      variables: { [caseIDField]: match.params.id },
+    });
+
+    if (loading) return <CircularProgress />;
+
+    if (dataError || !data || data[dataRoot][caseIDField] !== match.params.id) {
+      return (
+        <Typography variant="h5" color="error" size="sm">
+          {dataError ? `An error has occurred in loading stats component: ${dataError}` : 'Recieved wrong data'}
+        </Typography>
+      );
+    }
+
     if (hasError) {
       return (
         <Typography variant="headline" color="error" size="sm">
-          {error && `An error has occurred in loading dashboard component: ${error}`}
+          {error && `An error has occurred in loading case detail component: ${error}`}
         </Typography>
       );
     }
+
     if (isLoading) {
       return <CircularProgress />;
     }
 
     if (isFetched) {
       return (
-        CaseDetailContainer
+        <CaseDetailView data={data[dataRoot]} filesOfSamples={data[filesOfSamples]} />
       );
     }
+
     return (
       <Typography variant="headline" size="sm">
         {error && `An error has occurred in loading stats component: ${error}`}
@@ -64,7 +81,7 @@ class CaseDetailController extends Component {
 function mapStateToProps(state) {
   const {
     isLoading, isFetched, hasError, error,
-  } = state.dashboard;
+  } = state.caseDetail;
 
   const { isSidebarOpened } = state.layout;
   return {

From c703ab28e91e9f32f59c259154c351d1d89ae199 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Thu, 10 Nov 2022 09:24:58 -0500
Subject: [PATCH 10/29] INS-434

---
 src/bento/caseDetailData.js                   |  3 -
 src/pages/caseDetail/caseDetailController.js  | 69 +++++++++----------
 src/pages/caseDetail/caseDetailTabView.js     | 18 -----
 src/pages/caseDetail/caseDetailView.js        |  3 +-
 .../caseDetail/store/caseDetailReducer.js     | 64 +++++++++++++----
 5 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index 13d90be1..0f8463ac 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -720,8 +720,6 @@ query fileAddAllToCart(
 
 // query name, also used as root of returned data
 const dataRoot = 'projectDetail';
-// query name, also used as key for files to Samples Mapping.
-const filesOfSamples = 'samplesForSubjectId';
 // Primary ID field used to query a case
 const caseIDField = 'project_id';
 
@@ -863,7 +861,6 @@ export {
   projectHeader,
   dataRoot,
   caseIDField,
-  filesOfSamples,
   leftPanel,
   rightPanel,
   GET_CASE_DETAIL_DATA_QUERY,
diff --git a/src/pages/caseDetail/caseDetailController.js b/src/pages/caseDetail/caseDetailController.js
index 4f6cbbfb..340d014d 100644
--- a/src/pages/caseDetail/caseDetailController.js
+++ b/src/pages/caseDetail/caseDetailController.js
@@ -6,51 +6,33 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import CaseDetailView from './caseDetailView';
 import { Typography } from '../../components/Wrappers/Wrappers';
 import {
-  GET_CASE_DETAIL_DATA_QUERY, dataRoot, caseIDField, filesOfSamples,
+  GET_CASE_DETAIL_DATA_QUERY, dataRoot, caseIDField,
 } from '../../bento/caseDetailData';
-import { fetchDataForCaseDetailDataTable } from './caseDetailState';
-
-// const CaseDetailContainer = ({ match }) => {
-//   const { loading, error, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
-//     variables: { [caseIDField]: match.params.id },
-//   });
-
-//   if (loading) return <CircularProgress />;
-//   if (error || !data || data[dataRoot][caseIDField] !== match.params.id) {
-//     return (
-//       <Typography variant="h5" color="error" size="sm">
-//         {error ? `An error has occurred in loading stats component: ${error}` : 'Recieved wrong data'}
-//       </Typography>
-//     );
-//   }
-
-//   return <CaseDetailView data={data[dataRoot]} filesOfSamples={data[filesOfSamples]} />;
-// };
+import { fetchDataForCaseDetailTabDataTable } from './store/caseDetailReducer';
 
 class CaseDetailController extends Component {
   componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(fetchDataForCaseDetailDataTable());
+    fetchDataForCaseDetailTabDataTable();
   }
 
   render() {
     const {
-      isLoading, hasError, error, isFetched, match,
+      isLoading, hasError, error, isFetched, data,
     } = this.props;
 
-    const { loading, dataError, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
-      variables: { [caseIDField]: match.params.id },
-    });
+    // const { loading, dataError, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
+    //   variables: { [caseIDField]: match.params.id },
+    // });
 
-    if (loading) return <CircularProgress />;
+    // if (loading) return <CircularProgress />;
 
-    if (dataError || !data || data[dataRoot][caseIDField] !== match.params.id) {
-      return (
-        <Typography variant="h5" color="error" size="sm">
-          {dataError ? `An error has occurred in loading stats component: ${dataError}` : 'Recieved wrong data'}
-        </Typography>
-      );
-    }
+    // if (dataError || !data || data[dataRoot][caseIDField] !== match.params.id) {
+    //   return (
+    //     <Typography variant="h5" color="error" size="sm">
+    //       {dataError ? `An error has occurred in loading stats component: ${dataError}` : 'Recieved wrong data'}
+    //     </Typography>
+    //   );
+    // }
 
     if (hasError) {
       return (
@@ -66,7 +48,7 @@ class CaseDetailController extends Component {
 
     if (isFetched) {
       return (
-        <CaseDetailView data={data[dataRoot]} filesOfSamples={data[filesOfSamples]} />
+        <CaseDetailView data={data[dataRoot]} />
       );
     }
 
@@ -81,7 +63,7 @@ class CaseDetailController extends Component {
 function mapStateToProps(state) {
   const {
     isLoading, isFetched, hasError, error,
-  } = state.caseDetail;
+  } = state.caseDetailTab;
 
   const { isSidebarOpened } = state.layout;
   return {
@@ -94,3 +76,20 @@ function mapStateToProps(state) {
 }
 
 export default connect(mapStateToProps)(CaseDetailController);
+
+// const CaseDetailContainer = ({ match }) => {
+//   const { loading, error, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
+//     variables: { [caseIDField]: match.params.id },
+//   });
+
+//   if (loading) return <CircularProgress />;
+//   if (error || !data || data[dataRoot][caseIDField] !== match.params.id) {
+//     return (
+//       <Typography variant="h5" color="error" size="sm">
+//         {error ? `An error has occurred in loading stats component: ${error}` : 'Recieved wrong data'}
+//       </Typography>
+//     );
+//   }
+
+//   return <CaseDetailView data={data[dataRoot]} />;
+// };
diff --git a/src/pages/caseDetail/caseDetailTabView.js b/src/pages/caseDetail/caseDetailTabView.js
index 81639a5e..cc5dbe7b 100644
--- a/src/pages/caseDetail/caseDetailTabView.js
+++ b/src/pages/caseDetail/caseDetailTabView.js
@@ -41,20 +41,9 @@ const TabView = ({
   selectedRowIndex = [],
   tableDownloadCSV,
 }) => {
-  // Get the existing files ids from  cart state
   const cart = getCart();
   const fileIDs = cart.fileIds ? cart.fileIds : [];
-  const AddToCartAlertDialogRef = useRef();
-
   const [cartIsFull, setCartIsFull] = React.useState(false);
-  const buildButtonStyle = (button, styleObject) => {
-    const styleKV = Object.entries(styleObject);
-    // eslint-disable-next-line  no-restricted-syntax, no-unused-vars
-    for (const [key, value] of styleKV) {
-      // eslint-disable-next-line no-param-reassign
-      button.current.style[key] = value;
-    }
-  };
 
   function rowSelectionEvent(displayData, rowsSelected) {
     const displayedDataKeies = displayData;
@@ -79,8 +68,6 @@ const TabView = ({
     }
     newSelectedRowInfo = newSelectedRowInfo.concat(selectedRowsKey);
 
-    // Get selectedRowIndex by comparing current page data with selected row's key.
-    // if rowInfo from selectedRowInfo is currently be displayed
     const newSelectedRowIndex = displayedDataKeies.reduce(
       (accumulator, currentValue, currentIndex) => {
         if (newSelectedRowInfo.includes(currentValue)) {
@@ -90,7 +77,6 @@ const TabView = ({
       }, [],
     );
 
-    // reduce the state chagne, when newSelectedRowIndex and newSelectedRowInfo is same as previous.
     if (_.differenceWith(
       newSelectedRowIndex,
       selectedRowIndex,
@@ -118,14 +104,10 @@ const TabView = ({
     }
   }
 
-  /*
-    Presist user selection
-  */
   function onRowsSelect(curr, allRowsSelected, rowsSelected, displayData) {
     rowSelectionEvent(displayData.map((d) => d.data[primaryKeyIndex]), rowsSelected);
   }
 
-  // overwrite default options
   const defaultOptions = () => ({
     dataKey,
     rowsSelectedTrigger: (displayData, rowsSelected) => rowSelectionEvent(
diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index ec258b50..2adbcb69 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -20,7 +20,7 @@ import { fetchDataForDashboardDataTable } from '../dashboard/dashboardState';
 import Tabs from './caseDetailTabController';
 
 // Main case detail component
-const CaseDetail = ({ data, filesOfSamples, classes }) => {
+const CaseDetail = ({ data, classes }) => {
   const [snackbarState, setsnackbarState] = React.useState({
     open: false,
     value: 0,
@@ -69,7 +69,6 @@ const CaseDetail = ({ data, filesOfSamples, classes }) => {
                 src={icon}
                 alt="Bento case detail header logo"
               />
-
             </div>
             <div className={classes.headerTitle}>
               <div className={classes.headerMainTitle}>
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 1384d279..cdeb7966 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -111,10 +111,6 @@ function customizer(objValue, srcValue) {
   }
 }
 
-const facetSearchData = {
-  project_id: [caseIDField],
-};
-
 /**
  * Generate a default varibles for filter query.
  *
@@ -123,9 +119,9 @@ const facetSearchData = {
  */
 
 function allFilters() {
-  const emptyFilters = facetSearchData.reduce((acc, facet) => (
-    { ...acc, [facet.datafield]: [] }
-  ), {});
+  const emptyFilters = {
+    project_id: [caseIDField],
+  };
   return emptyFilters;
 }
 
@@ -923,10 +919,22 @@ const reducers = {
     };
   },
   LOCAL_SEARCH: (state, item) => {
-    const isEmpty = item.subjectResponse.data
-      && item.subjectResponse.data.subjectOverview
-      && item.subjectResponse.data.subjectOverview.length < 1;
-    const checkboxData = customCheckBox(item.result.data, facetSearchData, isEmpty);
+    const checkboxData = [
+      {
+        groupName: 'Project',
+        checkboxItems: [
+          {
+            name: caseIDField,
+            isChecked: true,
+            subjects: 1,
+          },
+        ],
+        datafield: 'project_id',
+        section: 'Projects',
+        show: false,
+      },
+    ];
+
     const newCheckboxData = [...checkboxData];
     checkboxData.map((val, idx) => {
       if (item.variables && item.variables[val.datafield] && item.variables[val.datafield].length) {
@@ -1009,7 +1017,22 @@ const reducers = {
   RECEIVE_CASE_DETAIL_TAB: (state, rawItem) => {
     const item = rawItem;
 
-    const checkboxData = customCheckBox(item.data, facetSearchData);
+    const checkboxData = [
+      {
+        groupName: 'Project',
+        checkboxItems: [
+          {
+            name: caseIDField,
+            isChecked: true,
+            subjects: 1,
+          },
+        ],
+        datafield: 'project_id',
+        section: 'Projects',
+        show: false,
+      },
+    ];
+
     fetchDataForCaseDetailTab(tabIndex[0].title, allFilters(), null, null, null, null, null);
     return item.data
       ? {
@@ -1066,7 +1089,22 @@ const reducers = {
   CLEAR_ALL: (state, rawItem) => {
     const item = rawItem;
 
-    const checkboxData = customCheckBox(item.data, facetSearchData);
+    const checkboxData = [
+      {
+        groupName: 'Project',
+        checkboxItems: [
+          {
+            name: caseIDField,
+            isChecked: true,
+            subjects: 1,
+          },
+        ],
+        datafield: 'project_id',
+        section: 'Projects',
+        show: false,
+      },
+    ];
+
     fetchDataForCaseDetailTab(tabIndex[0].title, allFilters());
     return item.data
       ? {

From 098d928fc75a818ff37fc813546d3f022379d119 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Thu, 10 Nov 2022 10:48:01 -0500
Subject: [PATCH 11/29] INS-434

---
 src/bento/caseDetailData.js                   | 22 +---------
 src/pages/caseDetail/caseDetailController.js  | 42 +++----------------
 src/pages/caseDetail/caseDetailState.js       |  1 +
 .../caseDetail/store/caseDetailReducer.js     | 21 ++++++----
 4 files changed, 22 insertions(+), 64 deletions(-)

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index 0f8463ac..8eec5a05 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -165,17 +165,6 @@ export const tabIndex = [
   },
 ];
 
-export const CASE_DETAIL_QUERY = gql`
-query projectDetail($project_id: String!) {
-  projectDetail(project_id: $project_id) {
-    num_publications
-    num_datasets
-    num_clinical_trials
-    num_patents
-  }
-}
-`;
-
 // --------------- Tabs Table configuration --------------
 export const tabContainers = [
   {
@@ -718,13 +707,8 @@ query fileAddAllToCart(
 
 // --------------- GraphQL query configuration --------------
 
-// query name, also used as root of returned data
-const dataRoot = 'projectDetail';
-// Primary ID field used to query a case
-const caseIDField = 'project_id';
-
 // GraphQL query to retrieve detailed info for a case
-const GET_CASE_DETAIL_DATA_QUERY = gql`
+const CASE_DETAIL_QUERY = gql`
   query projectDetail($project_id: String!) {
     projectDetail(project_id: $project_id) {
       project_id
@@ -859,9 +843,7 @@ export const GET_PATENTS_OVERVIEW_QUERY = gql`
 
 export {
   projectHeader,
-  dataRoot,
-  caseIDField,
   leftPanel,
   rightPanel,
-  GET_CASE_DETAIL_DATA_QUERY,
+  CASE_DETAIL_QUERY,
 };
diff --git a/src/pages/caseDetail/caseDetailController.js b/src/pages/caseDetail/caseDetailController.js
index 340d014d..672386ba 100644
--- a/src/pages/caseDetail/caseDetailController.js
+++ b/src/pages/caseDetail/caseDetailController.js
@@ -1,13 +1,9 @@
 /* eslint-disable max-len */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { useQuery } from '@apollo/client';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import CaseDetailView from './caseDetailView';
 import { Typography } from '../../components/Wrappers/Wrappers';
-import {
-  GET_CASE_DETAIL_DATA_QUERY, dataRoot, caseIDField,
-} from '../../bento/caseDetailData';
 import { fetchDataForCaseDetailTabDataTable } from './store/caseDetailReducer';
 
 class CaseDetailController extends Component {
@@ -17,22 +13,10 @@ class CaseDetailController extends Component {
 
   render() {
     const {
-      isLoading, hasError, error, isFetched, data,
+      isLoading, hasError, error, isFetched, data, match,
     } = this.props;
 
-    // const { loading, dataError, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
-    //   variables: { [caseIDField]: match.params.id },
-    // });
-
-    // if (loading) return <CircularProgress />;
-
-    // if (dataError || !data || data[dataRoot][caseIDField] !== match.params.id) {
-    //   return (
-    //     <Typography variant="h5" color="error" size="sm">
-    //       {dataError ? `An error has occurred in loading stats component: ${dataError}` : 'Recieved wrong data'}
-    //     </Typography>
-    //   );
-    // }
+    console.log('caseIDField: ', match.params.id);
 
     if (hasError) {
       return (
@@ -48,7 +32,7 @@ class CaseDetailController extends Component {
 
     if (isFetched) {
       return (
-        <CaseDetailView data={data[dataRoot]} />
+        <CaseDetailView data={data} />
       );
     }
 
@@ -62,7 +46,7 @@ class CaseDetailController extends Component {
 
 function mapStateToProps(state) {
   const {
-    isLoading, isFetched, hasError, error,
+    isLoading, isFetched, hasError, error, data,
   } = state.caseDetailTab;
 
   const { isSidebarOpened } = state.layout;
@@ -70,26 +54,10 @@ function mapStateToProps(state) {
     isLoading,
     hasError,
     error,
+    data,
     isFetched,
     isSidebarOpened,
   };
 }
 
 export default connect(mapStateToProps)(CaseDetailController);
-
-// const CaseDetailContainer = ({ match }) => {
-//   const { loading, error, data } = useQuery(GET_CASE_DETAIL_DATA_QUERY, {
-//     variables: { [caseIDField]: match.params.id },
-//   });
-
-//   if (loading) return <CircularProgress />;
-//   if (error || !data || data[dataRoot][caseIDField] !== match.params.id) {
-//     return (
-//       <Typography variant="h5" color="error" size="sm">
-//         {error ? `An error has occurred in loading stats component: ${error}` : 'Recieved wrong data'}
-//       </Typography>
-//     );
-//   }
-
-//   return <CaseDetailView data={data[dataRoot]} />;
-// };
diff --git a/src/pages/caseDetail/caseDetailState.js b/src/pages/caseDetail/caseDetailState.js
index 1cb8e7ae..86788a45 100644
--- a/src/pages/caseDetail/caseDetailState.js
+++ b/src/pages/caseDetail/caseDetailState.js
@@ -12,6 +12,7 @@ export const initialState = {
       filters: [],
       data: [],
     },
+    data: {},
   },
 };
 
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index cdeb7966..ed032517 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -27,7 +27,7 @@ import {
   GET_DATASETS_OVERVIEW_QUERY,
   GET_CLINICAL_TRIALS_OVERVIEW_QUERY,
   GET_PATENTS_OVERVIEW_QUERY,
-  caseIDField,
+  // caseIDField,
 } from '../../../bento/caseDetailData';
 import {
   GET_IDS_BY_TYPE,
@@ -37,6 +37,8 @@ import {
   ageAtIndex,
 } from '../../../bento/localSearchData';
 
+const caseIDField = '1P01CA210944-01';
+
 const storeKey = 'caseDetailTab';
 
 const initialState = {
@@ -93,6 +95,7 @@ const initialState = {
       selectedRowInfo: [],
       selectedRowIndex: [],
     },
+    data: {},
   },
 };
 
@@ -120,7 +123,7 @@ function customizer(objValue, srcValue) {
 
 function allFilters() {
   const emptyFilters = {
-    project_id: [caseIDField],
+    project_id: caseIDField,
   };
   return emptyFilters;
 }
@@ -225,12 +228,12 @@ export async function clearAllFiltersExceptBulkUpload() {
 const convertResultInPrevType = (result) => {
   const payload = result;
   payload.data = {
-    ...result.data,
+    ...result.data.projectDetail,
     nodeCountsFromLists: {
-      numberOfPublications: result.data.numberOfPublications,
-      numberOfDatasets: result.data.numberOfDatasets,
-      numberOfClinicalTrials: result.data.numberOfClinicalTrials,
-      numberOfPatents: result.data.numberOfPatents,
+      numberOfPublications: result.data.projectDetail.num_publications,
+      numberOfDatasets: result.data.projectDetail.num_datasets,
+      numberOfClinicalTrials: result.data.projectDetail.num_clinical_trials,
+      numberOfPatents: result.data.projectDetail.num_patents,
     },
   };
 
@@ -960,6 +963,7 @@ const reducers = {
         data: newCheckboxData,
         variables: item.variables,
       },
+      data: item.result.data,
     };
   },
   UPDATE_CURRRENT_TAB_DATA: (state, item) => (
@@ -1012,6 +1016,7 @@ const reducers = {
         filters: dataTableFilters,
       },
       filters: dataTableFilters,
+      data: tableData,
     };
   },
   RECEIVE_CASE_DETAIL_TAB: (state, rawItem) => {
@@ -1084,6 +1089,7 @@ const reducers = {
           sample_ids: [],
           file_ids: [],
         },
+        data: item.data.projectDetail,
       } : { ...state };
   },
   CLEAR_ALL: (state, rawItem) => {
@@ -1155,6 +1161,7 @@ const reducers = {
         sortByList: {
           ...state.sortByList,
         },
+        data: item.data.projectDetail,
       } : { ...state };
   },
   SORT_SINGLE_GROUP_CHECKBOX: (state, item) => {

From b926099d777f775d3a232d7fac9e0927af4c62da Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Thu, 10 Nov 2022 11:03:03 -0500
Subject: [PATCH 12/29] INS-434

---
 src/pages/caseDetail/store/caseDetailReducer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index ed032517..335677c9 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -933,7 +933,7 @@ const reducers = {
           },
         ],
         datafield: 'project_id',
-        section: 'Projects',
+        section: 'Project',
         show: false,
       },
     ];
@@ -1033,7 +1033,7 @@ const reducers = {
           },
         ],
         datafield: 'project_id',
-        section: 'Projects',
+        section: 'Project',
         show: false,
       },
     ];
@@ -1106,7 +1106,7 @@ const reducers = {
           },
         ],
         datafield: 'project_id',
-        section: 'Projects',
+        section: 'Project',
         show: false,
       },
     ];

From 8032ccb6b0ac0e2251109507f4202544a7e99fb9 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 14 Nov 2022 16:21:10 -0500
Subject: [PATCH 13/29] INS-434

---
 src/pages/caseDetail/caseDetailController.js  |  2 -
 .../caseDetail/caseDetailTabController.js     |  5 ++
 .../caseDetail/store/caseDetailReducer.js     | 48 +++----------------
 3 files changed, 12 insertions(+), 43 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailController.js b/src/pages/caseDetail/caseDetailController.js
index 672386ba..2795e778 100644
--- a/src/pages/caseDetail/caseDetailController.js
+++ b/src/pages/caseDetail/caseDetailController.js
@@ -16,8 +16,6 @@ class CaseDetailController extends Component {
       isLoading, hasError, error, isFetched, data, match,
     } = this.props;
 
-    console.log('caseIDField: ', match.params.id);
-
     if (hasError) {
       return (
         <Typography variant="headline" color="error" size="sm">
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index e7b5293a..eeddb740 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -95,6 +95,11 @@ const caseDetailTabController = (classes) => {
 
   function getTabLalbel(title, count) {
     const tabObj = tabIndex[currentTab];
+
+    if (!tabObj || !tabObj.title) {
+      window.location.reload();
+    }
+
     // NOTE: refactor white color to theme's white color.
     const primaryColor = (tabObj.title === title) ? tabIndex[currentTab].selectedColor : undefined;
     const secondaryColor = (tabObj.title === title) ? tabObj.secondaryColor : undefined;
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 335677c9..f0e06ac0 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -37,7 +37,13 @@ import {
   ageAtIndex,
 } from '../../../bento/localSearchData';
 
-const caseIDField = '1P01CA210944-01';
+let caseIDField;
+
+const temp = window.location.href.match(/([^/]+$)/g);
+if (temp) {
+  // eslint-disable-next-line prefer-destructuring
+  caseIDField = temp[0];
+}
 
 const storeKey = 'caseDetailTab';
 
@@ -735,46 +741,6 @@ export function sortAll() {
   });
 }
 
-function getCheckbox(data, mapping) {
-  const checkboxData = data[mapping].map((item) => {
-    return { name: item.group, isChecked: false, subjects: item.subjects };
-  });
-  return checkboxData;
-}
-
-/**
- *  updateFilteredAPIDataIntoCheckBoxData works for first time init Checkbox,
-that function transforms the data which returns from API into a another format
-so it contains more information and easy for front-end to show it correctly.
- *  * @param {object} currentGroupCount
- *  * @param {object} willUpdateGroupCount
- * * @param {object} currentCheckboxSelection
- * @return {json}
- */
-
-function customCheckBox(data, facetSearchData1, isEmpty) {
-  const caseCountField = 'subjects';
-  return (
-    facetSearchData1.map((mapping) => ({
-      groupName: mapping.label,
-      checkboxItems: mapping.slider === true
-        ? data[mapping.api]
-        : (isEmpty ? getCheckbox(data, mapping.apiForFiltering) : transformAPIDataIntoCheckBoxData(
-          data[mapping.api],
-          mapping.field,
-          caseCountField,
-          mapping.customNumberSort,
-        )),
-      datafield: mapping.datafield,
-      show: mapping.show,
-      slider: mapping.slider,
-      quantifier: mapping.slider,
-      section: mapping.section,
-      tooltips: mapping.tooltips,
-    }))
-  );
-}
-
 export function updateFilteredAPIDataIntoCheckBoxData(data, facetSearchDataFromConfig) {
   return (
     facetSearchDataFromConfig.map((mapping) => ({

From 713680cea85105ce21a6e8dcd515b5de64666b72 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 14 Nov 2022 16:46:22 -0500
Subject: [PATCH 14/29] INS-434

---
 src/pages/caseDetail/caseDetailTabController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index eeddb740..0ac11bc9 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -45,7 +45,7 @@ const caseDetailTabController = (classes) => {
     ? state.caseDetailTab.datatable : {}));
 
   const caseDetailStats = useSelector((state) => (state.caseDetailTab
-    && state.caseDetailTab.stats ? state.caseDetailTab.stats : {}));
+    && state.caseDetailTab.data ? state.caseDetailTab.data : {}));
 
   const allFilters = useSelector((state) => (state.caseDetailTab
     && state.caseDetailTab.allActiveFilters ? state.caseDetailTab.allActiveFilters : {}));

From a14975bd87bfc1cd15e9701a4b6f7abb605496af Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 14 Nov 2022 16:58:33 -0500
Subject: [PATCH 15/29] INS-434

---
 src/pages/caseDetail/caseDetailView.js | 8 +++++++-
 src/themes/dark.js                     | 4 ++--
 src/themes/light.js                    | 4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index 2adbcb69..1c197b3f 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -126,7 +126,9 @@ const CaseDetail = ({ data, classes }) => {
           </Grid>
         </div>
       </div>
-      <Tabs />
+      <div className={classes.detailTabContainer}>
+        <Tabs />
+      </div>
       <div className={classes.blankSpace} />
     </>
   );
@@ -203,6 +205,10 @@ const styles = (theme) => ({
     size: '12px',
     lineHeight: '23px',
   },
+  detailTabContainer: {
+    maxWidth: theme.custom.maxContentWidth,
+    margin: 'auto',
+  },
   detailPanel: {
     paddingTop: '0 !important',
     paddingBottom: '0 !important',
diff --git a/src/themes/dark.js b/src/themes/dark.js
index 59b71d1d..7edd88b4 100644
--- a/src/themes/dark.js
+++ b/src/themes/dark.js
@@ -29,7 +29,7 @@ export default {
   custom: {
     maxContentWidth: '1440px',
     maxContent: 'white',
-    bodyBackGround: '#E5F0FA',
+    bodyBackGround: '#F3F3F3',
     cardBackGround: '#f0f6f8',
     fontFamilySans: '"Open Sans", sans-serif',
     footorBackground: '#325068',
@@ -236,7 +236,7 @@ export default {
       footerText: 'white',
     },
     background: {
-      default: '#E5F0FA',
+      default: '#F3F3F3',
       light: '#F3F5FF',
     },
     clearQueryResultColor: {
diff --git a/src/themes/light.js b/src/themes/light.js
index 96a2e530..c63392ff 100755
--- a/src/themes/light.js
+++ b/src/themes/light.js
@@ -29,7 +29,7 @@ export default {
   custom: {
     maxContentWidth: '1440px',
     maxContent: 'white',
-    bodyBackGround: '#E5F0FA',
+    bodyBackGround: '#F3F3F3',
     cardBackGround: '#f0f6f8',
     fontFamilySans: '"Open Sans", sans-serif',
     footorBackground: '#325068',
@@ -236,7 +236,7 @@ export default {
       footerText: 'white',
     },
     background: {
-      default: '#E5F0FA',
+      default: '#F3F3F3',
       light: '#F3F5FF',
     },
     clearQueryResultColor: {

From 974eb69ccd65b18f1998b374bf5d7cabd11f4e59 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 14 Nov 2022 18:12:11 -0500
Subject: [PATCH 16/29] INS-469

---
 .../serverPaginatedTable/components/utils.js      | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/serverPaginatedTable/components/utils.js b/src/components/serverPaginatedTable/components/utils.js
index 71819d86..6658e18a 100644
--- a/src/components/serverPaginatedTable/components/utils.js
+++ b/src/components/serverPaginatedTable/components/utils.js
@@ -35,6 +35,21 @@ export function convertToCSV(jsonse, keysToInclude, header) {
       let columnResult = entry[keyName];
       if (typeof columnResult === 'string') columnResult.replace(/"/g, '""');
       if (typeof columnResult === 'string' && columnResult.search(/("|,|\n)/g) >= 0) columnResult = `"${columnResult}"`;
+
+      if (typeof columnResult === 'object') {
+        let finalColumnResult = '';
+
+        for (let i = 0; i < columnResult.length; i += 1) {
+          if (i === 0) {
+            finalColumnResult += `"${columnResult[0]}`;
+          } else {
+            finalColumnResult += `, ${columnResult[i]}`;
+          }
+        }
+
+        columnResult = `${finalColumnResult}"`;
+      }
+
       line += columnResult !== null ? columnResult : ' ';
       return line;
     });

From abbf1c48ea7dd532fa09392121dc023bdf27df55 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 14 Nov 2022 19:12:41 -0500
Subject: [PATCH 17/29] INS-469

---
 src/components/serverPaginatedTable/components/utils.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/serverPaginatedTable/components/utils.js b/src/components/serverPaginatedTable/components/utils.js
index 6658e18a..3a0ab917 100644
--- a/src/components/serverPaginatedTable/components/utils.js
+++ b/src/components/serverPaginatedTable/components/utils.js
@@ -33,8 +33,13 @@ export function convertToCSV(jsonse, keysToInclude, header) {
     keysToInclude.map((keyName) => {
       if (line !== '') line += ',';
       let columnResult = entry[keyName];
-      if (typeof columnResult === 'string') columnResult.replace(/"/g, '""');
-      if (typeof columnResult === 'string' && columnResult.search(/("|,|\n)/g) >= 0) columnResult = `"${columnResult}"`;
+      if (typeof columnResult === 'string') {
+        const intialColumnResult = columnResult.replace(/"/g, '""');
+        columnResult = intialColumnResult;
+        if (columnResult.search(/("|,|\n)/g) >= 0) {
+          columnResult = `"${columnResult}"`;
+        }
+      }
 
       if (typeof columnResult === 'object') {
         let finalColumnResult = '';

From f1411564dc92816791a4da71804e2069451d5013 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Tue, 15 Nov 2022 15:12:12 -0500
Subject: [PATCH 18/29] INS-434

---
 src/pages/caseDetail/store/caseDetailReducer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index f0e06ac0..35bf9d9c 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -39,10 +39,10 @@ import {
 
 let caseIDField;
 
-const temp = window.location.href.match(/([^/]+$)/g);
-if (temp) {
+const projectIdString = window.location.href.match(/([^/]+$)/g);
+if (projectIdString) {
   // eslint-disable-next-line prefer-destructuring
-  caseIDField = temp[0];
+  caseIDField = projectIdString[0];
 }
 
 const storeKey = 'caseDetailTab';

From afeacc98d84a2677451a817573c44557e978113b Mon Sep 17 00:00:00 2001
From: David-YuWei <ywwei85@gmail.com>
Date: Wed, 23 Nov 2022 11:45:03 -0500
Subject: [PATCH 19/29] Update INS-434 feature: adjust the project detail page
 implementation

---
 src/bento/caseDetailData.js                   | 200 +---
 src/components/NavBar/NavBarContainer.js      |   2 -
 .../serverPaginatedTable/components/utils.js  |   2 +-
 src/pages/caseDetail/caseDetailController.js  |  88 +-
 src/pages/caseDetail/caseDetailModal.js       |  63 --
 .../caseDetail/caseDetailTabController.js     | 151 +--
 src/pages/caseDetail/caseDetailTabView.js     |  93 +-
 src/pages/caseDetail/caseDetailView.js        |  25 +-
 .../caseDetail/store/caseDetailReducer.js     | 977 +-----------------
 9 files changed, 71 insertions(+), 1530 deletions(-)
 delete mode 100644 src/pages/caseDetail/caseDetailModal.js

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index 8eec5a05..38bf3b40 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -510,200 +510,10 @@ export const tabContainers = [
   },
 ];
 
-export const GET_ALL_FILEIDS_CASESTAB_FOR_SELECT_ALL = gql`
-query search (          
-  $subject_ids: [String],
-){
-  fileIDsFromList (          
-      subject_ids: $subject_ids,
-  ) 
-}
-  `;
-
-export const GET_ALL_FILEIDS_SAMPLESTAB_FOR_SELECT_ALL = gql`
-query search (          
-  $sample_ids: [String],
-){
-  fileIDsFromList (          
-    sample_ids: $sample_ids,
-  ) 
-}
-  `;
-
-export const GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL = gql`
-query search (          
-  $file_names: [String] 
-){
-  fileIDsFromList (          
-      file_names: $file_names
-  ) 
-}
-  `;
-
-export const GET_FILES_NAME_QUERY = gql`
-query fileOverview($file_ids: [String], $offset: Int = 0, $first: Int = 100000, $order_by:String ="file_name"){
-  fileOverview(file_ids: $file_ids, offset: $offset,first: $first, order_by: $order_by) {
-    file_name
-  }
-}
-  `;
-
-export const GET_ALL_FILEIDS_FROM_CASESTAB_FOR_ADD_ALL_CART = gql`
-query subjectsAddAllToCart(
-  $subject_ids: [String],
-  $programs: [String],
-  $studies: [String],
-  $diagnoses: [String],
-  $rc_scores: [String],
-  $tumor_sizes: [String],
-  $chemo_regimen: [String],
-  $tumor_grades: [String],
-  $er_status: [String],
-  $pr_status: [String],
-  $endo_therapies: [String],
-  $meno_status: [String],
-  $tissue_type: [String],
-  $composition: [String],
-  $association: [String],
-  $file_type: [String],
-  $age_at_index: [Float],
-  $first: Int,
-  $offset: Int= 0, 
-  $order_by: String = "file_id",
-  $sort_direction: String = "asc" 
-  ){
-  subjectOverview(
-      subject_ids: $subject_ids,
-      programs: $programs,
-      studies: $studies,
-      diagnoses: $diagnoses,
-      rc_scores: $rc_scores,
-      tumor_sizes: $tumor_sizes,
-      chemo_regimen: $chemo_regimen,
-      tumor_grades: $tumor_grades,
-      er_status: $er_status,
-      pr_status: $pr_status,
-      endo_therapies: $endo_therapies,
-      meno_status: $meno_status,
-      tissue_type: $tissue_type,
-      composition: $composition,
-      association: $association,
-      file_type: $file_type,
-      age_at_index: $age_at_index,
-      first: $first,
-      offset: $offset,
-      order_by: $order_by,
-      sort_direction: $sort_direction
-      ) {
-      files
-  }
-}
-    `;
-
-export const GET_ALL_FILEIDS_FROM_SAMPLETAB_FOR_ADD_ALL_CART = gql`
-    query samplesAddAllToCart(
-      $subject_ids: [String],
-      $sample_ids: [String],
-      $programs: [String],
-      $studies: [String],
-      $diagnoses: [String],
-      $rc_scores: [String],
-      $tumor_sizes: [String],
-      $chemo_regimen: [String],
-      $tumor_grades: [String],
-      $er_status: [String],
-      $pr_status: [String],
-      $endo_therapies: [String],
-      $meno_status: [String],
-      $tissue_type: [String],
-      $composition: [String],
-      $association: [String],
-      $file_type: [String],
-      $age_at_index: [Float],
-      $first: Int,
-      $offset: Int= 0, 
-      $order_by: String = "file_id",
-      $sort_direction: String = "asc" ){
-      sampleOverview(
-          subject_ids: $subject_ids,
-          sample_ids: $sample_ids,
-          programs: $programs,
-          studies: $studies,
-          diagnoses: $diagnoses,
-          rc_scores: $rc_scores,
-          tumor_sizes: $tumor_sizes,
-          chemo_regimen: $chemo_regimen,
-          tumor_grades: $tumor_grades,
-          er_status: $er_status,
-          pr_status: $pr_status,
-          endo_therapies: $endo_therapies,
-          meno_status: $meno_status,
-          tissue_type: $tissue_type,
-          composition: $composition,
-          association: $association,
-          file_type: $file_type,
-          age_at_index: $age_at_index,
-          first: $first,
-          offset: $offset,
-          order_by: $order_by,
-          sort_direction: $sort_direction
-          ) {
-          files
-      }
-    }
-        `;
-
-export const GET_ALL_FILEIDS_FROM_FILESTAB_FOR_ADD_ALL_CART = gql`
-query fileAddAllToCart(
-  $subject_ids: [String],
-  $programs: [String],
-  $studies: [String],
-  $diagnoses: [String],
-  $rc_scores: [String],
-  $tumor_sizes: [String],
-  $chemo_regimen: [String],
-  $tumor_grades: [String],
-  $er_status: [String],
-  $pr_status: [String],
-  $endo_therapies: [String],
-  $meno_status: [String],
-  $tissue_type: [String],
-  $composition: [String],
-  $association: [String],
-  $file_type: [String],
-  $age_at_index: [Float],
-  $first: Int,
-  $offset: Int= 0, 
-  $order_by: String = "file_id",
-  $sort_direction: String = "asc"
- ){
-  fileOverview(
-      subject_ids:$subject_ids,
-      programs: $programs,
-      studies: $studies,
-      diagnoses: $diagnoses,
-      rc_scores: $rc_scores,
-      tumor_sizes: $tumor_sizes,
-      chemo_regimen: $chemo_regimen,
-      tumor_grades: $tumor_grades,
-      er_status: $er_status,
-      pr_status: $pr_status,
-      endo_therapies: $endo_therapies,
-      meno_status: $meno_status,
-      tissue_type: $tissue_type,
-      composition: $composition,
-      association: $association,       
-      file_type: $file_type,
-      age_at_index: $age_at_index,
-      first: $first, 
-      offset: $offset, 
-      order_by: $order_by,
-      sort_direction: $sort_direction
-  ){
-      file_id,
-  }
-}
-            `;
+// query name, also used as root of returned data
+const dataRoot = 'projectDetail';
+// Primary ID field used to query a case
+const caseIDField = 'project_id';
 
 // --------------- GraphQL query configuration --------------
 
@@ -843,6 +653,8 @@ export const GET_PATENTS_OVERVIEW_QUERY = gql`
 
 export {
   projectHeader,
+  dataRoot,
+  caseIDField,
   leftPanel,
   rightPanel,
   CASE_DETAIL_QUERY,
diff --git a/src/components/NavBar/NavBarContainer.js b/src/components/NavBar/NavBarContainer.js
index 174240c7..73f89722 100755
--- a/src/components/NavBar/NavBarContainer.js
+++ b/src/components/NavBar/NavBarContainer.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import NavBarView from './NavBarView';
 import { toggleSidebar } from '../Layout/LayoutState';
-import { initCart } from '../../pages/fileCentricCart/store/cart';
 
 export default compose(
   withRouter,
@@ -16,7 +15,6 @@ export default compose(
   ),
   lifecycle({
     componentDidMount() {
-      initCart();
     },
     shouldComponentUpdate({ location: nextLocation }) {
       const pathName = this.props.location.pathname;
diff --git a/src/components/serverPaginatedTable/components/utils.js b/src/components/serverPaginatedTable/components/utils.js
index 3a0ab917..6856237b 100644
--- a/src/components/serverPaginatedTable/components/utils.js
+++ b/src/components/serverPaginatedTable/components/utils.js
@@ -41,7 +41,7 @@ export function convertToCSV(jsonse, keysToInclude, header) {
         }
       }
 
-      if (typeof columnResult === 'object') {
+      if (columnResult !== null && typeof columnResult === 'object') {
         let finalColumnResult = '';
 
         for (let i = 0; i < columnResult.length; i += 1) {
diff --git a/src/pages/caseDetail/caseDetailController.js b/src/pages/caseDetail/caseDetailController.js
index 2795e778..3bc1afd6 100644
--- a/src/pages/caseDetail/caseDetailController.js
+++ b/src/pages/caseDetail/caseDetailController.js
@@ -1,61 +1,45 @@
-/* eslint-disable max-len */
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import CaseDetailView from './caseDetailView';
 import { Typography } from '../../components/Wrappers/Wrappers';
-import { fetchDataForCaseDetailTabDataTable } from './store/caseDetailReducer';
-
-class CaseDetailController extends Component {
-  componentDidMount() {
-    fetchDataForCaseDetailTabDataTable();
-  }
-
-  render() {
-    const {
-      isLoading, hasError, error, isFetched, data, match,
-    } = this.props;
-
-    if (hasError) {
-      return (
-        <Typography variant="headline" color="error" size="sm">
-          {error && `An error has occurred in loading case detail component: ${error}`}
-        </Typography>
-      );
-    }
-
-    if (isLoading) {
-      return <CircularProgress />;
-    }
-
-    if (isFetched) {
-      return (
-        <CaseDetailView data={data} />
-      );
-    }
-
+import {
+  dataRoot, caseIDField,
+} from '../../bento/caseDetailData';
+import {
+  fetchCaseDetailTab,
+} from './store/caseDetailReducer';
+
+const CaseDetailContainer = ({ match }) => {
+  const loading = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.isLoading
+    ? state.caseDetailTab.isLoading
+    : false));
+
+  const error = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.error
+    ? state.caseDetailTab.error
+    : ''));
+
+  const data = useSelector((state) => (state.caseDetailTab
+    && state.caseDetailTab.data
+    ? state.caseDetailTab.data
+    : undefined));
+
+  useEffect(() => {
+    fetchCaseDetailTab(match.params.id);
+  }, []);
+
+  if (loading) return <CircularProgress />;
+  if (error || !data || data[dataRoot][caseIDField] !== match.params.id) {
     return (
-      <Typography variant="headline" size="sm">
-        {error && `An error has occurred in loading stats component: ${error}`}
+      <Typography variant="h5" color="error" size="sm">
+        {error ? `An error has occurred in loading stats component: ${error}` : 'Recieved wrong data'}
       </Typography>
     );
   }
-}
-
-function mapStateToProps(state) {
-  const {
-    isLoading, isFetched, hasError, error, data,
-  } = state.caseDetailTab;
 
-  const { isSidebarOpened } = state.layout;
-  return {
-    isLoading,
-    hasError,
-    error,
-    data,
-    isFetched,
-    isSidebarOpened,
-  };
-}
+  return <CaseDetailView data={data[dataRoot]} />;
+};
 
-export default connect(mapStateToProps)(CaseDetailController);
+export default CaseDetailContainer;
diff --git a/src/pages/caseDetail/caseDetailModal.js b/src/pages/caseDetail/caseDetailModal.js
deleted file mode 100644
index 038d2d52..00000000
--- a/src/pages/caseDetail/caseDetailModal.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useRef } from 'react';
-import {
-  withStyles,
-} from '@material-ui/core';
-import {
-  clearTableSelections,
-} from './store/caseDetailReducer';
-import Dialog from '../../components/AddToCartDialog';
-import { getFilesIdsInCart } from '../fileCentricCart/store/cart';
-
-const styles = () => ({
-  button: {
-    borderRadius: '10px',
-    width: '120px',
-    lineHeight: '37px',
-    fontSize: '12px',
-    textTransform: 'uppercase',
-    fontFamily: 'Lato',
-    color: '#fff',
-    backgroundColor: '#142D64',
-    marginTop: '6px',
-    marginBottom: '10px',
-    marginRight: '24px',
-  },
-});
-
-const SelectAllModalDialog = ({
-  classes, openSnack,
-}) => {
-  const childRef = useRef();
-
-  const handleClose = () => {
-    childRef.current.close();
-  };
-
-  async function exportFiles() {
-    // Find the newly added files by comparing
-    const currentFileIdsInCart = getFilesIdsInCart();
-
-    // tell the reducer to clear the selection on the table.
-    clearTableSelections();
-    // tell the reducer to clear the selection on the table.
-    handleClose();
-  }
-
-  const OnYesClick = () => { exportFiles(); };
-  const onNoClick = () => { handleClose(); };
-
-  return (
-    <>
-      {/* <button type="button" onClick={handleClickOpen} className={classes.button}>
-        Add All Files
-      </button> */}
-      <Dialog
-        ref={childRef}
-        onYesClick={OnYesClick}
-        onNoClick={onNoClick}
-      />
-    </>
-  );
-};
-
-export default withStyles(styles, { withTheme: true })(SelectAllModalDialog);
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index 0ac11bc9..392aa6de 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -5,21 +5,15 @@ import {
 } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import SwipeableViews from 'react-swipeable-views';
-import Snackbar from '@material-ui/core/Snackbar';
 import { getOptions } from 'bento-components';
 import TabView from './caseDetailTabView';
-import SuccessOutlinedIcon from '../../utils/SuccessOutlined';
 import TabThemeProvider from './caseDetailTabThemeConfig';
 import TabLabel from './caseDetailTabLabel';
 import {
-  tabs, tooltipContent, tabContainers, tabIndex, externalLinkIcon,
+  dataRoot, tabs, tooltipContent, tabContainers, tabIndex, externalLinkIcon,
 } from '../../bento/caseDetailData';
 import {
   fetchDataForCaseDetailTab,
-  getTableRowSelectionEvent,
-  tableHasSelections,
-  clearTableSelections,
-  fetchAllFileIDs,
 } from './store/caseDetailReducer';
 
 function TabContainer({ children, dir }) {
@@ -30,7 +24,7 @@ function TabContainer({ children, dir }) {
   );
 }
 
-const caseDetailTabController = (classes) => {
+const caseDetailTabController = ({ projectID, classes }) => {
   const currentActiveTabTitle = useSelector((state) => (state.caseDetailTab
     && state.caseDetailTab.currentActiveTab
     ? state.caseDetailTab.currentActiveTab
@@ -50,40 +44,15 @@ const caseDetailTabController = (classes) => {
   const allFilters = useSelector((state) => (state.caseDetailTab
     && state.caseDetailTab.allActiveFilters ? state.caseDetailTab.allActiveFilters : {}));
 
-  const autoCompleteSelection = useSelector((state) => (state.caseDetailTab
-    && state.caseDetailTab.autoCompleteSelection
-    ? state.caseDetailTab.autoCompleteSelection.subject_ids : {}));
-
-  const bulkUpload = useSelector((state) => (state.caseDetailTab
-    && state.caseDetailTab.bulkUpload ? state.caseDetailTab.bulkUpload.subject_ids : {}));
-
-  const subjectIds = autoCompleteSelection.concat(bulkUpload);
   useEffect(() => {
-    setCurrentTab(0);
-  }, [caseDetailStats]);
-
-  const { isCaseSelected } = useSelector((state) => state.caseDetailTab);
+    fetchDataForCaseDetailTab(tabIndex[0].title, [projectID]);
+  }, []);
 
   const handleTabChange = (event, value) => {
     setCurrentTab(value);
-    if (!isCaseSelected) {
-      fetchDataForCaseDetailTab(tabIndex[value].title);
-    }
+    fetchDataForCaseDetailTab(tabIndex[value].title, [projectID]);
   };
 
-  const [snackbarState, setsnackbarState] = React.useState({
-    open: false,
-    value: 0,
-  });
-  function openSnack(value1) {
-    setsnackbarState({ open: true, value: value1 });
-  }
-
-  // eslint-disable-next-line no-unused-vars
-  function closeSnack() {
-    setsnackbarState({ open: false });
-  }
-
   function getBorderStyle() {
     const style = '3px solid #42779a';
     return `${style}`;
@@ -114,87 +83,14 @@ const caseDetailTabController = (classes) => {
     );
   }
 
-  /* on row select event
-    @param  data  data for initial the table  sample -> [files]
-    @param  allRowsSelected : selected rows
-    @output [f.uuid]
-  */
-  function Type1OnRowsSelect(data, allRowsSelected) {
-    // use reduce to combine all the files' id into single array
-    return allRowsSelected.reduce((accumulator, currentValue) => {
-      if (data[currentValue.dataIndex]) {
-        const { files } = data[currentValue.dataIndex];
-        // check if file exists
-        if (files && files.length > 0) {
-          return accumulator.concat(files.map((f) => f.file_id));
-        }
-      }
-      return accumulator;
-    }, []);
-  }
-
-  /* on row select event
-    @param  data  data for initial the table  sample -> [files]
-    @param  allRowsSelected : selected rows
-    @output [f.uuid]
-  */
-  function Type2OnRowsSelect(data, allRowsSelected) {
-    return allRowsSelected.map((row) => data[row.dataIndex].file_id);
-  }
-
-  /* on row select event
-    @param  data  data for initial the table  sample -> [files]
-    @param  allRowsSelected : selected rows
-    @output [f.uuid]
-  */
-  function Type3OnRowsSelect(data, allRowsSelected) {
-    // use reduce to combine all the files' id into single array
-    return allRowsSelected.reduce((accumulator, currentValue) => {
-      const { files } = data[currentValue.dataIndex];
-      // check if file
-      if (files && files.length > 0) {
-        return accumulator.concat(files);
-      }
-      return accumulator;
-    }, []);
-  }
-
-  // onRowsSelectFunction contains all the onRowsSelection functions
-  // user can pick one for use.
-  const onRowsSelectFunction = {
-    type1: Type1OnRowsSelect,
-    type2: Type2OnRowsSelect,
-    type3: Type3OnRowsSelect,
-  };
-
-  // This function for future use
-  /*  To check if this row is selectable or not.
-    I want the system to visually communicate ("flag") which of
-    the samples being displayed have already had all of their files added to the cart.
-    @param  data  row of data from sample tab
-    @param  cartData, list of fileIDs
-    @output  boolean true-> selectable
-*/
-  // eslint-disable-next-line no-unused-vars
-  function disableRowSelection(data, cartData) {
-    return true;
-  }
-
-  // disableRowSelectionFunction contains all the disableRowSelection functions
-  // user can pick one for use.
-  const disableRowSelectionFunction = {
-    type1: disableRowSelection,
-    type2: disableRowSelection,
-    type3: disableRowSelection,
-  };
-
   // Tab Header Generator
   const TABs = tabs.map((tab, index) => (
     <Tab
       key={index}
       id={tab.id}
       label={
-        getTabLalbel(tab.title, caseDetailStats[tab.count] ? caseDetailStats[tab.count] : 0)
+        getTabLalbel(tab.title, caseDetailStats[dataRoot][tab.count]
+          ? caseDetailStats[dataRoot][tab.count] : 0)
       }
     />
   ));
@@ -206,10 +102,6 @@ const caseDetailTabController = (classes) => {
         options={getOptions(container, classes)}
         data={caseDetail[container.dataField] ? caseDetail[container.dataField] : 'undefined'}
         customColumn={container}
-        customOnRowsSelect={onRowsSelectFunction[container.onRowsSelect]}
-        openSnack={openSnack}
-        closeSnack={closeSnack}
-        disableRowSelection={disableRowSelectionFunction[container.disableRowSelection]}
         buttonText={container.buttonText}
         tableID={container.tableID}
         saveButtonDefaultStyle={container.saveButtonDefaultStyle}
@@ -218,18 +110,15 @@ const caseDetailTabController = (classes) => {
         // eslint-disable-next-line jsx-a11y/tabindex-no-positive
         tabIndex={container.tabIndex}
         externalLinkIcon={externalLinkIcon}
-        count={caseDetailStats[container.count] ? caseDetailStats[container.count] : 0}
+        count={caseDetailStats[dataRoot][container.count]
+          ? caseDetailStats[dataRoot][container.count] : 0}
         api={container.api}
         paginationAPIField={container.paginationAPIField}
         paginationAPIFieldDesc={container.paginationAPIFieldDesc}
         defaultSortCoulmn={container.defaultSortField || ''}
         defaultSortDirection={container.defaultSortDirection || 'asc'}
         dataKey={container.dataKey}
-        allFilters={{ ...allFilters, ...{ subject_ids: subjectIds } }}
-        tableHasSelections={tableHasSelections}
-        setRowSelection={getTableRowSelectionEvent()}
-        clearTableSelections={clearTableSelections}
-        fetchAllFileIDs={fetchAllFileIDs}
+        allFilters={{ ...allFilters, ...{ subject_ids: [] } }}
         tableDownloadCSV={container.tableDownloadCSV || false}
         tooltipMessage={tooltipContent[currentTab]}
         tooltipIcon={tooltipContent.icon}
@@ -240,26 +129,6 @@ const caseDetailTabController = (classes) => {
 
   return (
     <>
-      <Snackbar
-        className={classes.snackBar}
-        open={snackbarState.open}
-        onClose={closeSnack}
-        autoHideDuration={3000}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        message={(
-          <div className={classes.snackBarMessage}>
-            <span className={classes.snackBarMessageIcon}>
-              <SuccessOutlinedIcon />
-              {' '}
-            </span>
-            <span className={classes.snackBarText}>
-              {snackbarState.value}
-              {' '}
-              File(s) successfully added to your cart
-            </span>
-          </div>
-        )}
-      />
       <TabThemeProvider tableBorder={getBorderStyle()} tablecolor={getTableColor()}>
         <Tabs
           classes
diff --git a/src/pages/caseDetail/caseDetailTabView.js b/src/pages/caseDetail/caseDetailTabView.js
index cc5dbe7b..a0ddd7bd 100644
--- a/src/pages/caseDetail/caseDetailTabView.js
+++ b/src/pages/caseDetail/caseDetailTabView.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React, { useRef } from 'react';
+import React from 'react';
 import {
   Grid,
   withStyles,
@@ -13,7 +13,6 @@ import {
   GET_PATENTS_OVERVIEW_QUERY,
 } from '../../bento/caseDetailData';
 import CustomDataTable from '../../components/serverPaginatedTable/serverPaginatedTable';
-import { getCart } from '../../../src/pages/fileCentricCart/store/cart';
 import DocumentDownload from '../../components/DocumentDownload/DocumentDownloadView';
 import globalData from '../../bento/siteWideConfig';
 
@@ -24,7 +23,6 @@ const TabView = ({
   data,
   customColumn,
   primaryKeyIndex = 0,
-  disableRowSelection,
   tableID,
   externalLinkIcon,
   options,
@@ -36,94 +34,16 @@ const TabView = ({
   allFilters,
   defaultSortCoulmn,
   defaultSortDirection,
-  setRowSelection,
-  selectedRowInfo = [],
-  selectedRowIndex = [],
   tableDownloadCSV,
 }) => {
-  const cart = getCart();
-  const fileIDs = cart.fileIds ? cart.fileIds : [];
-  const [cartIsFull, setCartIsFull] = React.useState(false);
-
-  function rowSelectionEvent(displayData, rowsSelected) {
-    const displayedDataKeies = displayData;
-    const selectedRowsKey = rowsSelected
-      ? rowsSelected.map((index) => displayedDataKeies[index])
-      : [];
-    let newSelectedRowInfo = [];
-
-    if (rowsSelected) {
-      // Remove the rowInfo from selectedRowInfo if this row currently be
-      // displayed and not be selected.
-      if (selectedRowInfo.length > 0) {
-        newSelectedRowInfo = selectedRowInfo.filter((key) => {
-          if (displayedDataKeies.includes(key)) {
-            return false;
-          }
-          return true;
-        });
-      }
-    } else {
-      newSelectedRowInfo = selectedRowInfo;
-    }
-    newSelectedRowInfo = newSelectedRowInfo.concat(selectedRowsKey);
-
-    const newSelectedRowIndex = displayedDataKeies.reduce(
-      (accumulator, currentValue, currentIndex) => {
-        if (newSelectedRowInfo.includes(currentValue)) {
-          accumulator.push(currentIndex);
-        }
-        return accumulator;
-      }, [],
-    );
-
-    if (_.differenceWith(
-      newSelectedRowIndex,
-      selectedRowIndex,
-      _.isEqual,
-    ).length !== 0
-      || _.differenceWith(
-        newSelectedRowInfo,
-        selectedRowInfo,
-        _.isEqual,
-      ).length !== 0
-      || _.differenceWith(
-        selectedRowInfo,
-        newSelectedRowInfo,
-        _.isEqual,
-      ).length !== 0
-      || _.differenceWith(
-        selectedRowIndex,
-        newSelectedRowIndex,
-        _.isEqual,
-      ).length !== 0) {
-      setRowSelection({
-        selectedRowInfo: newSelectedRowInfo,
-        selectedRowIndex: newSelectedRowIndex,
-      });
-    }
-  }
-
-  function onRowsSelect(curr, allRowsSelected, rowsSelected, displayData) {
-    rowSelectionEvent(displayData.map((d) => d.data[primaryKeyIndex]), rowsSelected);
-  }
-
   const defaultOptions = () => ({
     dataKey,
-    rowsSelectedTrigger: (displayData, rowsSelected) => rowSelectionEvent(
-      displayData,
-      rowsSelected,
-    ),
-    rowsSelected: selectedRowIndex,
-    onRowSelectionChange: onRowsSelect,
-    isRowSelectable: (dataIndex) => (disableRowSelection
-      ? disableRowSelection(data[dataIndex], fileIDs) : true),
+    isRowSelectable: false,
   });
 
   const finalOptions = {
     ...options,
     ...defaultOptions(),
-    serverTableRowCount: selectedRowInfo.length,
   };
 
   const dataTransformCallbacks = customColumn.columns.filter((column, idx) => {
@@ -161,15 +81,6 @@ const TabView = ({
 };
 
 const styles = () => ({
-  cartlink: {
-    fontFamily: 'Lato',
-    color: '#3E6886',
-    fontSize: '12px',
-    marginRight: '70px',
-    textDecoration: 'none',
-    borderBottom: '1px solid #3E6886',
-    paddingBottom: '3px',
-  },
   caseTitle: {
     color: '#194563',
     fontSize: '25.2pt',
diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index 1c197b3f..fadbc264 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -15,27 +15,10 @@ import {
   leftPanel,
   rightPanel,
 } from '../../bento/caseDetailData';
-import Snackbar from '../../components/Snackbar';
-import { fetchDataForDashboardDataTable } from '../dashboard/dashboardState';
 import Tabs from './caseDetailTabController';
 
 // Main case detail component
 const CaseDetail = ({ data, classes }) => {
-  const [snackbarState, setsnackbarState] = React.useState({
-    open: false,
-    value: 0,
-    action: 'added',
-  });
-  function closeSnack() {
-    setsnackbarState({ open: false });
-  }
-  const dispatch = useDispatch();
-
-  // make sure dashboard data has been loaded first for stats bar to work
-  React.useEffect(() => {
-    dispatch(fetchDataForDashboardDataTable());
-  }, []);
-
   const stat = {
     numberOfPrograms: 1,
     numberOfProjects: 1,
@@ -53,12 +36,6 @@ const CaseDetail = ({ data, classes }) => {
 
   return (
     <>
-      <Snackbar
-        snackbarState={snackbarState}
-        closeSnack={closeSnack}
-        autoHideDuration={3000}
-        classes={classes}
-      />
       <StatsView data={stat} />
       <div className={classes.container}>
         <div className={classes.innerContainer}>
@@ -127,7 +104,7 @@ const CaseDetail = ({ data, classes }) => {
         </div>
       </div>
       <div className={classes.detailTabContainer}>
-        <Tabs />
+        <Tabs projectID={data.project_id} />
       </div>
       <div className={classes.blankSpace} />
     </>
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 35bf9d9c..3de2d6d7 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -4,9 +4,6 @@
 import _ from 'lodash';
 import {
   customSort,
-  getFilters,
-  filterData,
-  getCheckBoxData,
   transformAPIDataIntoCheckBoxData,
 } from 'bento-components';
 import store from '../../../store';
@@ -14,13 +11,6 @@ import client from '../../../utils/graphqlClient';
 
 import {
   tabContainers,
-  GET_ALL_FILEIDS_CASESTAB_FOR_SELECT_ALL,
-  GET_ALL_FILEIDS_SAMPLESTAB_FOR_SELECT_ALL,
-  GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL,
-  GET_FILES_NAME_QUERY,
-  GET_ALL_FILEIDS_FROM_CASESTAB_FOR_ADD_ALL_CART,
-  GET_ALL_FILEIDS_FROM_SAMPLETAB_FOR_ADD_ALL_CART,
-  GET_ALL_FILEIDS_FROM_FILESTAB_FOR_ADD_ALL_CART,
   tabIndex,
   CASE_DETAIL_QUERY,
   GET_PUBLICATIONS_OVERVIEW_QUERY,
@@ -29,78 +19,22 @@ import {
   GET_PATENTS_OVERVIEW_QUERY,
   // caseIDField,
 } from '../../../bento/caseDetailData';
-import {
-  GET_IDS_BY_TYPE,
-  GET_SUBJECT_IDS,
-  SUBJECT_OVERVIEW_QUERY,
-  GET_SEARCH_NODES_BY_FACET,
-  ageAtIndex,
-} from '../../../bento/localSearchData';
-
-let caseIDField;
-
-const projectIdString = window.location.href.match(/([^/]+$)/g);
-if (projectIdString) {
-  // eslint-disable-next-line prefer-destructuring
-  caseIDField = projectIdString[0];
-}
 
 const storeKey = 'caseDetailTab';
 
 const initialState = {
   caseDetailTab: {
-    autoCompleteSelection: {
-      subject_ids: [],
-      sample_ids: [],
-      file_ids: [],
-    },
-    bulkUpload: {
-      subject_ids: [],
-      sample_ids: [],
-      file_ids: [],
-    },
-    isDataTableUptoDate: false,
     isFetched: false,
     isLoading: false,
     isCaseDetailTableLoading: false,
-    setSideBarLoading: false,
     error: '',
     hasError: false,
-    searchCriteria: null,
     allActiveFilters: {},
     currentActiveTab: tabIndex[0].title,
     filteredSubjectIds: null,
-    checkboxForAll: {
-      data: [],
-    },
     subjectOverView: {
       data: [],
     },
-    checkbox: {
-      data: [],
-      defaultPanel: false,
-    },
-    datatable: {
-      dataCase: 'undefined',
-      dataSample: 'undefined',
-      dataFile: 'undefined',
-    },
-    dataSampleSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-    dataFileSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-    dataClinicalTrialSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-    dataPatentSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
     data: {},
   },
 };
@@ -120,245 +54,21 @@ function customizer(objValue, srcValue) {
   }
 }
 
-/**
- * Generate a default varibles for filter query.
- *
- * Need to be updated with custodian of filter
- * @return json
- */
-
-function allFilters() {
-  const emptyFilters = {
-    project_id: caseIDField,
-  };
-  return emptyFilters;
-}
-
-function fetchCaseDetailTab() {
-  return () => {
-    store.dispatch({ type: 'REQUEST_CASE_DETAIL_TAB' });
-    return client
-      .query({
-        query: CASE_DETAIL_QUERY,
-        variables: {
-          ...allFilters(),
-          ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
-        },
-      })
-      .then((result) => store.dispatch({ type: 'RECEIVE_CASE_DETAIL_TAB', payload: _.cloneDeep(result) }))
-      .catch((error) => store.dispatch(
-        { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
-      ));
-  };
-}
-
-export async function getAllIds(type) {
-  const allids = await client
-    .query({
-      query: GET_IDS_BY_TYPE(type),
-      variables: {
-      },
-    })
-    .then((result) => result.data.idsLists)
-    .catch((error) => store.dispatch(
-      { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
-    ));
-  return allids;
-}
-export async function getAllSubjectIds(subjectIdsArray) {
-  const allids = await client
+export function fetchCaseDetailTab(projectID) {
+  store.dispatch({ type: 'REQUEST_CASE_DETAIL_TAB' });
+  const filter = { project_id: projectID };
+  return client
     .query({
-      query: GET_SUBJECT_IDS,
+      query: CASE_DETAIL_QUERY,
       variables: {
-        subject_ids: subjectIdsArray,
+        ...filter,
+        ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
       },
     })
-    .then((result) => result.data.findSubjectIdsInList)
+    .then((result) => store.dispatch({ type: 'RECEIVE_CASE_DETAIL_TAB', payload: _.cloneDeep(result) }))
     .catch((error) => store.dispatch(
       { type: 'CASE_DETAIL_TAB_QUERY_ERR', error },
     ));
-  return allids;
-}
-
-export const getSubjectIds = () => getState().filteredSubjectIds;
-
-/**
- * Returns filter variable for graphql query using the all filters.
- *
- * @param {object} data
- * @return {json}
- */
-
-function createFilterVariables(data) {
-  const currentAllActiveFilters = getState().allActiveFilters;
-  // eslint-disable-next-line  no-unused-vars
-  const filter = Object.entries(currentAllActiveFilters).reduce((acc, [key, val]) => {
-    if (data[0].datafield === key) {
-      return data[0].isChecked
-        ? { ...acc, [key]: [...currentAllActiveFilters[key], ...[data[0].name]] }
-        : { ...acc, [key]: currentAllActiveFilters[key].filter((item) => item !== data[0].name) };
-    }
-    // return { ...acc , [key]: [...currentAllActiveFilters[key],...[data[0].name]] }
-    return { ...acc, [key]: currentAllActiveFilters[key] };
-  }, {});
-
-  return filter;
-}
-
-function createFilterVariablesRange(value, sideBarItem) {
-  const currentAllActiveFilters = getState().allActiveFilters;
-  currentAllActiveFilters[sideBarItem.datafield] = value;
-  return currentAllActiveFilters;
-  // eslint-disable-next-line  no-unused-vars
-}
-
-export function clearSectionSort(groupName) {
-  store.dispatch({
-    type: 'CLEAR_SECTION_SORT',
-    payload: {
-      groupName,
-    },
-  });
-}
-
-/**
- * Reducer for clear all
- *
- * @return distpatcher
- */
-
-export async function clearAllFiltersExceptBulkUpload() {
-  store.dispatch({ type: 'RESET_ALL_EXCEPT_BULK_UPLOAD' });
-}
-
-const convertResultInPrevType = (result) => {
-  const payload = result;
-  payload.data = {
-    ...result.data.projectDetail,
-    nodeCountsFromLists: {
-      numberOfPublications: result.data.projectDetail.num_publications,
-      numberOfDatasets: result.data.projectDetail.num_datasets,
-      numberOfClinicalTrials: result.data.projectDetail.num_clinical_trials,
-      numberOfPatents: result.data.projectDetail.num_patents,
-    },
-  };
-
-  return payload;
-};
-
-async function getCaseData(variables) {
-  const result = await client.query({
-    query: GET_SEARCH_NODES_BY_FACET,
-    variables,
-  });
-  const data = convertResultInPrevType(result);
-  return data;
-}
-
-const getSubjectDetails = async (variables) => {
-  const result = await client.query({
-    query: SUBJECT_OVERVIEW_QUERY,
-    variables: {
-      offset: 0,
-      first: 100,
-      sort_direction: 'desc',
-      order_by: 'age_at_index',
-      age_at_index: [ageAtIndex, null],
-      ...variables,
-    },
-  });
-  return result;
-};
-
-export function addBulkModalSearchData(value, type) {
-  // const items = value.map((val) => val.title);
-  store.dispatch({ type: 'ADD_BULKSEARCHDATA', payload: { value, type } });
-}
-
-/**
- * Uplpad Modal Set
- *
- * @return distpatcher
- */
-
-export async function uploadBulkModalSearch(searchcriteria, type) {
-  addBulkModalSearchData(searchcriteria, type);
-  const variables = {
-    ...getState().allActiveFilters,
-    ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
-  };
-
-  const [
-    caseResponse,
-    subjectResponse,
-  ] = await Promise.all([
-    getCaseData(variables),
-    getSubjectDetails(variables),
-  ]);
-
-  store.dispatch({
-    type: 'LOCAL_SEARCH',
-    payload: {
-      subjectResponse,
-      result: caseResponse,
-      variables,
-    },
-  });
-}
-
-/**
- * Local search
- *
- * @return distpatcher
- */
-
-export async function localSearch(searchcriteria, isQuery = false) {
-  const variables = {
-    ...getState().allActiveFilters,
-    ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
-  };
-
-  const [
-    caseResponse,
-    subjectResponse,
-  ] = await Promise.all([
-    getCaseData(variables),
-    getSubjectDetails(variables),
-  ]);
-  store.dispatch({
-    type: 'LOCAL_SEARCH',
-    payload: {
-      subjectResponse,
-      result: caseResponse,
-      variables,
-    },
-  });
-}
-
-/**
- * Resets the key selections
- *
- * @param {object} payload
- * @return distpatcher
- */
-export function resetGroupSelections(payload) {
-  return () => {
-    const { dataField, groupName } = payload;
-    clearSectionSort(groupName);
-  };
-}
-
-/**
- * Switch to get query sort dorection and sort field .
- *
- * @param {string} payload
- *  @param {json} tabContainer
- * @return {json} with three keys QUERY, sortfield, sortDirection
- */
-
-export function addAutoComplete({ newValue, type, isFilteredData = false }) {
-  const items = isFilteredData ? newValue : newValue.map((val) => val.title);
-  store.dispatch({ type: 'ADD_AUTOCOMPLETE_DATA', payload: { value: items, type } });
 }
 
 const querySwitch = (payload, tabContainer) => {
@@ -400,29 +110,10 @@ const getQueryAndDefaultSort = (payload = tabIndex[0].title) => {
 
 export function fetchDataForCaseDetailTab(
   payload,
-  filters = null,
+  projectID,
 ) {
   const { QUERY, sortfield, sortDirection } = getQueryAndDefaultSort(payload);
-  const newFilters = filters;
-  // deal with empty string inside the age_at_index filter
-  if (filters && filters.age_at_index && filters.age_at_index.length === 2) {
-    if (filters.age_at_index.includes('')) {
-      newFilters.age_at_index = [];
-    }
-    if (typeof filters.age_at_index[0] === 'string') {
-      newFilters.age_at_index[0] = Number(newFilters.age_at_index[0]);
-    }
-    if (typeof filters.age_at_index[1] === 'string') {
-      newFilters.age_at_index[1] = Number(newFilters.age_at_index[1]);
-    }
-  }
-  const activeFilters = newFilters === null
-    ? (getState().allActiveFilters !== {}
-      ? {
-        ...getState().allActiveFilters,
-        ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
-      }
-      : allFilters()) : filters;
+  const activeFilters = { project_id: projectID };
   return client
     .query({
       query: QUERY,
@@ -438,158 +129,6 @@ export function fetchDataForCaseDetailTab(
     ));
 }
 
-function transformCasesFileIdsToFiles(data) {
-  // use reduce to combine all the files' id into single array
-  const transformData = data.reduce((accumulator, currentValue) => {
-    const { files } = currentValue;
-    // check if file
-    if (files && files.length > 0) {
-      return accumulator.concat(files);
-    }
-    return accumulator;
-  }, []);
-  return transformData.map((item) => ({
-    files: [item.file_id],
-  }));
-}
-
-function transformfileIdsToFiles(data) {
-  // use reduce to combine all the files' id into single array
-  return data.map((item) => ({
-    files: [item.file_id],
-  }));
-}
-
-/**
- * Gets all file ids for active subjectIds.
- * TODO this  functtion can use filtered file IDs except for initial load
- * @param obj fileCoubt
- * @return {json}
- */
-export async function fetchAllFileIDsForSelectAll(fileCount = 100000) {
-  const fileIds = getState().filteredFileIds;
-
-  const activeFilters = getState().allActiveFilters !== {}
-    ? getState().allActiveFilters : allFilters();
-
-  const SELECT_ALL_QUERY = getState().currentActiveTab === tabIndex[2].title
-    ? GET_ALL_FILEIDS_FROM_FILESTAB_FOR_ADD_ALL_CART
-    : getState().currentActiveTab === tabIndex[1].title
-      ? GET_ALL_FILEIDS_FROM_SAMPLETAB_FOR_ADD_ALL_CART
-      : GET_ALL_FILEIDS_FROM_CASESTAB_FOR_ADD_ALL_CART;
-
-  const fetchResult = await client
-    .query({
-      query: SELECT_ALL_QUERY,
-      variables: {
-        ...activeFilters,
-        first: fileCount,
-        ..._.mergeWith({}, getState().bulkUpload, getState().autoCompleteSelection, customizer),
-      },
-    })
-    .then((result) => {
-      const RESULT_DATA = getState().currentActiveTab === tabIndex[3].title ? 'patentOverViewByProject' : getState().currentActiveTab === tabIndex[2].title ? 'clinicalTrialOverViewByProject' : getState().currentActiveTab === tabIndex[1].title ? 'datasetOverViewByProject' : 'publicationOverViewByProject';
-      const fileIdsFromQuery = RESULT_DATA === 'publicationOverViewByProject' ? transformfileIdsToFiles(result.data[RESULT_DATA]) : RESULT_DATA === 'datasetOverViewByProject' ? transformCasesFileIdsToFiles(result.data[RESULT_DATA]) : result.data[RESULT_DATA] || [];
-      return fileIdsFromQuery;
-    });
-
-  // Restaruting the result Bringing {files} to files
-  const filesArray = fetchResult.reduce((accumulator, currentValue) => {
-    const { files } = currentValue;
-    // check if file
-    if (files && files.length > 0) {
-      return accumulator.concat(files.map((f) => f));
-    }
-    return accumulator;
-  }, []);
-
-  // Removing fileIds that are not in our current list of filtered fileIds
-
-  const filteredFilesArray = fileIds != null
-    ? filesArray.filter((x) => fileIds.includes(x))
-    : filesArray;
-  return filteredFilesArray;
-}
-
-/**
- * Returns file IDs of given sampleids or subjectids.
- * @param int fileCount
- * @param graphqlquery SELECT_ALL_QUERY
- * @param array subjectIds
- * @param array sampleIds
- * @param array clinicalTrialIds
- * @param array patentIds
- * @param string apiReturnField
- * @return {json}
- */
-
-async function getFileIDs(
-  fileCount = 100000,
-  SELECT_ALL_QUERY,
-  subjectIds = [],
-  sampleIds = [],
-  clinicalTrialIds = [],
-  patentIds = [],
-  fileNames = [],
-  apiReturnField,
-) {
-  const fetchResult = await client
-    .query({
-      query: SELECT_ALL_QUERY,
-      variables: {
-        subject_ids: subjectIds,
-        sample_ids: sampleIds,
-        clinical_trial_ids: clinicalTrialIds,
-        patent_ids: patentIds,
-        file_names: fileNames,
-        first: fileCount,
-      },
-    })
-    .then((result) => result.data[apiReturnField] || []);
-
-  return fetchResult;
-}
-
-/*
-* Removing fileIds that are not in our current list of filtered fileIds
-* @param array fileIds
-* @return array
-*/
-function filterOutFileIds(fileIds) {
-  // Removing fileIds that are not in our current list of filtered fileIds
-  const { filteredFileIds } = getState();
-
-  if (fileIds
-    && fileIds.length > 0
-    && filteredFileIds
-    && filteredFileIds != null
-    && filteredFileIds.length > 0) {
-    return fileIds.filter((x) => filteredFileIds.includes(x));
-  }
-  return fileIds;
-}
-
-/*
- * Gets all file ids for active subjectIds.
- * TODO this  functtion can use filtered file IDs except for initial load
- * @param obj fileCoubt
- * @return {json}
- */
-export async function fetchAllFileIDs(fileCount = 100000, selectedIds = []) {
-  let filesIds = [];
-  switch (getState().currentActiveTab) {
-    case tabIndex[2].title:
-      filesIds = await getFileIDs(fileCount, GET_ALL_FILEIDS_FILESTAB_FOR_SELECT_ALL, [], [], selectedIds, 'fileIDsFromList');
-      break;
-    case tabIndex[1].title:
-      filesIds = await getFileIDs(fileCount, GET_ALL_FILEIDS_SAMPLESTAB_FOR_SELECT_ALL, [], selectedIds, [], 'fileIDsFromList');
-      break;
-    default:
-      filesIds = await getFileIDs(fileCount, GET_ALL_FILEIDS_CASESTAB_FOR_SELECT_ALL, selectedIds, [], [], 'fileIDsFromList');
-  }
-  return filterOutFileIds(filesIds);
-}
-
 /**
  * Reducer for fetch case detail data
  *
@@ -604,111 +143,6 @@ export function fetchDataForCaseDetailTabDataTable() {
   return store.dispatch({ type: 'READY_CASE_DETAIL_TAB' });
 }
 
-/**
- * Helper function to create only one filter that was from payload payload
- * @param {object} payload
- * @return distpatcher
- */
-
-function createSingleFilterVariables(payload) {
-  const currentAllActiveFilters = allFilters();
-  // eslint-disable-next-line  no-unused-vars
-  const filter = Object.entries(currentAllActiveFilters).reduce((acc, [key, val]) => {
-    if (payload[0].datafield === key) {
-      return { ...acc, [key]: [...currentAllActiveFilters[key], ...[payload[0].name]] };
-    }
-    return { ...acc, [key]: currentAllActiveFilters[key] };
-  }, {});
-  return filter;
-}
-
-/**
- * Sort checkboxes by Checked
- *
- * @param {object} checkboxData
- * @return {json}
- */
-
-function sortByCheckboxByIsChecked(checkboxData) {
-  checkboxData.sort((a, b) => b.isChecked - a.isChecked);
-  return checkboxData;
-}
-
-/**
- * Sort checkboxes by Alphabet
- *
- * @param {object} checkboxData
- * @return {json}
- */
-
-function sortByCheckboxItemsByAlphabet(checkboxData) {
-  const sortCheckbox = customSort(checkboxData);
-  return sortByCheckboxByIsChecked(sortCheckbox);
-}
-
-/**
- * Sort checkboxes by Count
- *
- * @param {object} checkboxData
- * @return {json}
- */
-
-function sortByCheckboxItemsByCount(checkboxData) {
-  checkboxData.sort((a, b) => b.subjects - a.subjects);
-  return sortByCheckboxByIsChecked(checkboxData);
-}
-
-/**
- * Sets the given filter variable as the only filter for the dasboard
- * @param {object} data
- * @return distpatcher
- */
-export async function setSingleFilter(payload) {
-  // test weather there are active case detail filters if so clear all filters
-  const singlefiter = createSingleFilterVariables(payload);
-  store.dispatch({ type: 'SET_SINGLE_FILTER', payload: singlefiter });
-}
-
-/**
- * Reducer for setting single checkbox filter
- * @param {object} payload
- * @return distpatcher
- */
-
-export async function singleCheckBox(payload) {
-  await setSingleFilter(payload);
-  const currentAllFilterVariables = payload === {} ? allFilters : createFilterVariables(payload);
-}
-
-/**
- * Trigger respective API queries when checkbox is checked.
- *
- * @param {object} payload
- * @return distpatcher
- */
-export function toggleCheckBox(payload, isQuery = false) {
-  return () => {
-    const currentAllFilterVariables = payload === {} ? allFilters : createFilterVariables(payload);
-  };
-}
-
-export function toggleSlider(value, sideBarItem) {
-  if (!value.includes('')) {
-    const payload = {};
-    const currentAllFilterVariables = createFilterVariablesRange(value, sideBarItem);
-  }
-}
-
-/**
- * Reducer for sidebar loading
- *
- * @return distpatcher
- */
-
-export function setSideBarToLoading() {
-  store.dispatch({ type: 'SET_SIDEBAR_LOADING' });
-}
-
 /**
  * Reducer for setting case detail table loading loading
  *
@@ -741,125 +175,6 @@ export function sortAll() {
   });
 }
 
-export function updateFilteredAPIDataIntoCheckBoxData(data, facetSearchDataFromConfig) {
-  return (
-    facetSearchDataFromConfig.map((mapping) => ({
-      groupName: mapping.label,
-      checkboxItems: mapping.slider === true
-        ? data[mapping.api]
-        : transformAPIDataIntoCheckBoxData(data[mapping.apiForFiltering], mapping.field),
-      datafield: mapping.datafield,
-      show: mapping.show,
-      slider: mapping.slider,
-      quantifier: mapping.quantifier,
-      section: mapping.section,
-      tooltips: mapping.tooltips,
-    }))
-  );
-}
-
-/**
- *  Check sidebar has filter selections.
- * return boolean
- */
-function hasFilter() {
-  const currentAllActiveFilters = getState().allActiveFilters;
-  return Object.entries(currentAllActiveFilters).filter((item) => item[1].length > 0).length > 0;
-}
-
-/**
- *  Get file name by fileids
- * @return {json}
- */
-
-export async function getFileNamesByFileIds(fileIds) {
-  const data = await client
-    .query({
-      query: GET_FILES_NAME_QUERY,
-      variables: {
-        file_ids: fileIds,
-      },
-    })
-    .then((result) => result.data.fileOverview.map((item) => item.file_name));
-  return data;
-}
-
-/**
- *  Check table has selections.
- * @return {json}
- */
-export async function tableHasSelections() {
-  let selectedRowInfo = [];
-  let filteredIds = [];
-
-  // without the filters, the filteredIds is null
-  if (!hasFilter()) {
-    return selectedRowInfo.length > 0;
-  }
-
-  const filteredNames = await getFileNamesByFileIds(getState().filteredFileIds);
-  switch (getState().currentActiveTab) {
-    case tabIndex[3].title:
-      filteredIds = getState().filteredPatentIds;
-      selectedRowInfo = getState().dataPatentSelected.selectedRowInfo;
-      break;
-
-    case tabIndex[2].title:
-      filteredIds = getState().filteredClinicalTrialIds;
-      selectedRowInfo = getState().dataClinicalTrialSelected.selectedRowInfo;
-      break;
-
-    case tabIndex[1].title:
-      filteredIds = filteredNames;
-      selectedRowInfo = getState().dataFileSelected.selectedRowInfo;
-      break;
-
-    default:
-      filteredIds = getState().filteredSampleIds;
-      selectedRowInfo = getState().dataSampleSelected.selectedRowInfo;
-  }
-
-  return selectedRowInfo.filter(
-    (value) => (filteredIds && filteredIds !== null ? filteredIds.includes(value) : false),
-  ).length > 0;
-}
-
-function setDataFileSelected(result) {
-  store.dispatch({ type: 'SET_FILE_SELECTION', payload: result });
-}
-
-function setDataSampleSelected(result) {
-  store.dispatch({ type: 'SET_SAMPLE_SELECTION', payload: result });
-}
-
-function setDataClinicalTrialSelected(result) {
-  store.dispatch({ type: 'SET_CLINICAL_TRIAL_SELECTION', payload: result });
-}
-
-function setDataPatentSelected(result) {
-  store.dispatch({ type: 'SET_PATENT_SELECTION', payload: result });
-}
-/**
- *  Returns the functuion depend on current active tab
- * @return {func}
- */
-
-export function getTableRowSelectionEvent() {
-  const currentState = getState();
-  const tableRowSelectionEvent = currentState.currentActiveTab === tabIndex[3].title
-    ? setDataPatentSelected
-    : currentState.currentActiveTab === tabIndex[2].title
-      ? setDataClinicalTrialSelected
-      : currentState.currentActiveTab === tabIndex[1].title
-        ? setDataFileSelected
-        : setDataSampleSelected;
-  return tableRowSelectionEvent;
-}
-
-export function clearTableSelections() {
-  store.dispatch({ type: 'CLEAR_TABLE_SELECTION' });
-}
-
 export const getCaseDetail = () => getState();
 
 export function setSearchCriteria(payload) {
@@ -887,51 +202,6 @@ const reducers = {
       isCaseDetailTableLoading: false,
     };
   },
-  LOCAL_SEARCH: (state, item) => {
-    const checkboxData = [
-      {
-        groupName: 'Project',
-        checkboxItems: [
-          {
-            name: caseIDField,
-            isChecked: true,
-            subjects: 1,
-          },
-        ],
-        datafield: 'project_id',
-        section: 'Project',
-        show: false,
-      },
-    ];
-
-    const newCheckboxData = [...checkboxData];
-    checkboxData.map((val, idx) => {
-      if (item.variables && item.variables[val.datafield] && item.variables[val.datafield].length) {
-        const checkboxItem = newCheckboxData[idx].checkboxItems;
-        checkboxItem.map((data, id) => {
-          const index = item.variables[val.datafield].findIndex((check) => check === data.name);
-          if (index >= 0) {
-            checkboxItem[id].isChecked = true;
-          }
-          return null;
-        });
-        newCheckboxData[idx].checkboxItems = checkboxItem;
-      }
-      return null;
-    });
-    return {
-      ...state,
-      setSideBarLoading: false,
-      datatable: {
-        dataCase: item.subjectResponse.data.subjectOverview,
-      },
-      checkbox: {
-        data: newCheckboxData,
-        variables: item.variables,
-      },
-      data: item.result.data,
-    };
-  },
   UPDATE_CURRRENT_TAB_DATA: (state, item) => (
     {
       ...state,
@@ -952,221 +222,27 @@ const reducers = {
   }),
   REQUEST_CASE_DETAIL_TAB: (state) => ({ ...state, isLoading: true }),
   SET_SIDEBAR_LOADING: (state) => ({ ...state, setSideBarLoading: true }),
-  SET_SINGLE_FILTER: (state, item) => (
-    {
-      ...state,
-      allActiveFilters: item,
-    }
-  ),
   SET_CASE_DETAIL_TABLE_LOADING: (state) => ({ ...state, isCaseDetailTableLoading: true }),
-  TOGGGLE_CHECKBOX: (state, item) => {
-    const dataTableFilters = getFilters(state.datatable.filters, item);
-    const tableData = state.subjectOverView.data.filter((d) => (filterData(d, dataTableFilters)));
-    const updatedCheckboxData = dataTableFilters && dataTableFilters.length !== 0
-      ? getCheckBoxData(
-        state.subjectOverView.data,
-        state.checkboxForAll.data,
-        state.checkbox.data.filter((d) => item[0].groupName === d.groupName)[0],
-        dataTableFilters,
-      )
-      : state.checkboxForAll.data;
-    return {
-      ...state,
-      isCalulatingCaseDetail: false,
-      checkbox: {
-        data: updatedCheckboxData,
-      },
-      datatable: {
-        ...state.datatable,
-        dataCase: tableData,
-        filters: dataTableFilters,
-      },
-      filters: dataTableFilters,
-      data: tableData,
-    };
-  },
   RECEIVE_CASE_DETAIL_TAB: (state, rawItem) => {
     const item = rawItem;
-
-    const checkboxData = [
-      {
-        groupName: 'Project',
-        checkboxItems: [
-          {
-            name: caseIDField,
-            isChecked: true,
-            subjects: 1,
-          },
-        ],
-        datafield: 'project_id',
-        section: 'Project',
-        show: false,
-      },
-    ];
-
-    fetchDataForCaseDetailTab(tabIndex[0].title, allFilters(), null, null, null, null, null);
-    return item.data
-      ? {
-        ...state.caseDetail,
-        isFetched: true,
-        isLoading: false,
-        hasError: false,
-        setSideBarLoading: false,
-        searchCriteria: null,
-        error: '',
-        allActiveFilters: allFilters(),
-        filteredSubjectIds: null,
-        filteredSampleIds: null,
-        filteredFileIds: null,
-        filteredClinicalTrialIds: null,
-        filteredPatentIds: null,
-        checkboxForAll: {
-          data: checkboxData,
-        },
-        checkbox: {
-          data: checkboxData,
-        },
-        datatable: {
-          filters: [],
-        },
-        dataSampleSelected: {
-          selectedRowInfo: [],
-          selectedRowIndex: [],
-        },
-        dataFileSelected: {
-          selectedRowInfo: [],
-          selectedRowIndex: [],
-        },
-        dataClinicalTrialSelected: {
-          selectedRowInfo: [],
-          selectedRowIndex: [],
-        },
-        dataPatentSelected: {
-          selectedRowInfo: [],
-          selectedRowIndex: [],
-        },
-        autoCompleteSelection: {
-          subject_ids: [],
-          sample_ids: [],
-          file_ids: [],
-        },
-        bulkUpload: {
-          subject_ids: [],
-          sample_ids: [],
-          file_ids: [],
-        },
-        data: item.data.projectDetail,
-      } : { ...state };
-  },
-  CLEAR_ALL: (state, rawItem) => {
-    const item = rawItem;
-
-    const checkboxData = [
-      {
-        groupName: 'Project',
-        checkboxItems: [
-          {
-            name: caseIDField,
-            isChecked: true,
-            subjects: 1,
-          },
-        ],
-        datafield: 'project_id',
-        section: 'Project',
-        show: false,
-      },
-    ];
-
-    fetchDataForCaseDetailTab(tabIndex[0].title, allFilters());
+    const filter = { project_id: item.data.projectDetail.project_id };
+    // fetchDataForCaseDetailTab(tabIndex[0].title, allFilters(), null, null, null, null, null);
     return item.data
       ? {
         ...state.caseDetail,
         isFetched: true,
         isLoading: false,
         hasError: false,
-        setSideBarLoading: false,
         error: '',
-        allActiveFilters: allFilters(),
+        allActiveFilters: filter,
         filteredSubjectIds: null,
         filteredSampleIds: null,
         filteredFileIds: null,
         filteredClinicalTrialIds: null,
         filteredPatentIds: null,
-        checkboxForAll: {
-          data: checkboxData,
-        },
-        autoCompleteSelection: {
-          subject_ids: [],
-          sample_ids: [],
-          file_ids: [],
-        },
-        bulkUpload: {
-          subject_ids: [],
-          sample_ids: [],
-          file_ids: [],
-        },
-        checkbox: {
-          data: checkboxData,
-          variables: {},
-        },
-        datatable: {
-          filters: [],
-        },
-        dataSampleSelected: {
-          ...state.dataSampleSelected,
-        },
-        dataFileSelected: {
-          ...state.dataFileSelected,
-        },
-        dataClinicalTrialSelected: {
-          ...state.dataClinicalTrialSelected,
-        },
-        dataPatentSelected: {
-          ...state.dataPatentSelected,
-        },
-        sortByList: {
-          ...state.sortByList,
-        },
-        data: item.data.projectDetail,
+        data: item.data,
       } : { ...state };
   },
-  SORT_SINGLE_GROUP_CHECKBOX: (state, item) => {
-    const groupData = state.checkbox.data.filter((group) => item.groupName === group.groupName)[0];
-    let { sortByList } = state;
-    sortByList = sortByList || {};
-    const sortedCheckboxItems = item.sortBy === 'count'
-      ? sortByCheckboxItemsByCount(groupData.checkboxItems)
-      : sortByCheckboxItemsByAlphabet(groupData.checkboxItems);
-
-    sortByList[groupData.groupName] = item.sortBy;
-    const data = state.checkbox.data.map((group) => {
-      if (group.groupName === groupData.groupName) {
-        const updatedGroupData = group;
-        updatedGroupData.checkboxItems = sortedCheckboxItems;
-        return updatedGroupData;
-      }
-
-      return group;
-    });
-
-    return { ...state, checkbox: { data }, sortByList };
-  },
-  SORT_ALL_GROUP_CHECKBOX_CASE_DETAIL: (state) => {
-    const { sortByList = {} } = state;
-    let { data } = state.checkbox;
-    const rangeData = data.filter((sideBar) => sideBar.slider === true);
-    data = data.filter((sideBar) => sideBar.slider !== true);
-    data.map((group) => {
-      const checkboxItems = sortByList[group.groupName] === 'count'
-        ? sortByCheckboxItemsByCount(group.checkboxItems)
-        : sortByCheckboxItemsByAlphabet(group.checkboxItems);
-      const updatedGroupData = group;
-      updatedGroupData.checkboxItems = checkboxItems;
-      return updatedGroupData;
-    });
-    data = data.concat(rangeData);
-    return { ...state, checkbox: { data } };
-  },
   CLEAR_SECTION_SORT: (state, item) => {
     const { sortByList = {} } = state;
     const { groupName } = item;
@@ -1181,30 +257,7 @@ const reducers = {
       dataSampleSelected: item,
     }
   ),
-  SET_FILE_SELECTION: (state, item) => (
-    {
-      ...state,
-      dataFileSelected: item,
-    }
-  ),
-  SET_CLINICAL_TRIAL_SELECTION: (state, item) => (
-    {
-      ...state,
-      dataClinicalTrialSelected: item,
-    }
-  ),
-  SET_PATENT_SELECTION: (state, item) => (
-    {
-      ...state,
-      dataPatentSelected: item,
-    }
-  ),
-  RESET_CHECKBOXES: (state) => (
-    {
-      ...state,
-      allActiveFilters: allFilters(),
-    }
-  ),
+
   CLEAR_TABLE_SELECTION: (state) => ({
     ...state,
     dataSampleSelected: {

From 1e5a00de6825f79d75b5c5c7dece380bd1826d2b Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Wed, 23 Nov 2022 11:53:11 -0500
Subject: [PATCH 20/29] Removing "link" column from CSV download

---
 src/bento/tableDownloadCSV.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/bento/tableDownloadCSV.js b/src/bento/tableDownloadCSV.js
index ea2ab12a..f5021a0c 100644
--- a/src/bento/tableDownloadCSV.js
+++ b/src/bento/tableDownloadCSV.js
@@ -245,7 +245,6 @@ query datasetOverView(
 export const customDatasetsTabDownloadCSV = {
   keysToInclude: [
     'accession',
-    'link',
     'queried_project_ids',
     'transformed_type',
     'title',
@@ -256,7 +255,6 @@ export const customDatasetsTabDownloadCSV = {
   ],
   header: [
     'Accession',
-    'Link',
     'Project IDs',
     'Type',
     'Title',
@@ -451,7 +449,6 @@ query datasetOverViewByProject(
 export const customCaseDetailDatasetsTabDownloadCSV = {
   keysToInclude: [
     'accession',
-    'link',
     'transformed_type',
     'title',
     'submission_date',
@@ -461,7 +458,6 @@ export const customCaseDetailDatasetsTabDownloadCSV = {
   ],
   header: [
     'Accession',
-    'Link',
     'Type',
     'Title',
     'Submission Date',

From 2cde74389152ab34d2ddaf6f2a35679e7738b787 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Mon, 5 Dec 2022 09:10:13 -0500
Subject: [PATCH 21/29] INS-485

---
 src/pages/caseDetail/caseDetailTabController.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index 392aa6de..25fa55b5 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -64,11 +64,6 @@ const caseDetailTabController = ({ projectID, classes }) => {
 
   function getTabLalbel(title, count) {
     const tabObj = tabIndex[currentTab];
-
-    if (!tabObj || !tabObj.title) {
-      window.location.reload();
-    }
-
     // NOTE: refactor white color to theme's white color.
     const primaryColor = (tabObj.title === title) ? tabIndex[currentTab].selectedColor : undefined;
     const secondaryColor = (tabObj.title === title) ? tabObj.secondaryColor : undefined;

From 6cffdd4cb55adfd3f03a06c26b9a8ad0bb4fbd03 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Wed, 7 Dec 2022 16:19:25 -0500
Subject: [PATCH 22/29] INS-485

---
 src/components/Layout/LayoutView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/LayoutView.js b/src/components/Layout/LayoutView.js
index 7bd66c5b..fae68d59 100644
--- a/src/components/Layout/LayoutView.js
+++ b/src/components/Layout/LayoutView.js
@@ -40,7 +40,7 @@ const Layout = ({ classes, isSidebarOpened }) => (
         >
           <Route component={ScrollToTop} />
           <Switch>
-            <Route exact path="/INS/" component={Home} />
+            <Route exact path="/INS" component={Home} />
             <Route exact path="/" component={Home} />
             <Route exact path="/home" component={Home} />
             <Route path="/explore" component={Dashboard} />

From b17f906357551fbe978363dd2605d7d3536040ab Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Wed, 7 Dec 2022 16:43:07 -0500
Subject: [PATCH 23/29] INS-485

---
 package-lock.json | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d5ff30d..6eb15cf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,7 +75,6 @@
         "react-swipeable-views": "^0.13.9",
         "react-syntax-highlighter": "^10.2.0",
         "react-toastify": "^4.5.2",
-        "react-use-googlelogin": "^0.12.5",
         "react-uuid": "^1.0.2",
         "react-vis": "^1.11.7",
         "react-zoom-pan-pinch": "^1.4.5",
@@ -28250,14 +28249,6 @@
         "typescript": "^3.5.2"
       }
     },
-    "node_modules/react-use-googlelogin": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/react-use-googlelogin/-/react-use-googlelogin-0.12.5.tgz",
-      "integrity": "sha512-30TF9rJyhDx7mO5T+BVChaKxd4xztLMMRCkG2/gdk8o9+JMfipSvBM26OJCDnG7Ug3KxBSNR+9uKgtQ4FCI0fg==",
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
     "node_modules/react-uuid": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-uuid/-/react-uuid-1.0.2.tgz",
@@ -56113,12 +56104,6 @@
       "integrity": "sha512-XL+Rup9Hosxx3Ap9xpyQMbVwuUa4BSqiOjfBb2zDuGs4uv2FesFV+m8Z/huRx2BNptMd9ARPqFuSNA62zhCozg==",
       "requires": {}
     },
-    "react-use-googlelogin": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/react-use-googlelogin/-/react-use-googlelogin-0.12.5.tgz",
-      "integrity": "sha512-30TF9rJyhDx7mO5T+BVChaKxd4xztLMMRCkG2/gdk8o9+JMfipSvBM26OJCDnG7Ug3KxBSNR+9uKgtQ4FCI0fg==",
-      "requires": {}
-    },
     "react-uuid": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-uuid/-/react-uuid-1.0.2.tgz",

From 2c64c8b0469cdc7ad299ff266c3a5d8c1de19b19 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Wed, 7 Dec 2022 17:14:26 -0500
Subject: [PATCH 24/29] INS-485

---
 src/pages/caseDetail/caseDetailState.js         | 8 --------
 src/pages/caseDetail/caseDetailTabController.js | 4 ----
 src/pages/caseDetail/caseDetailTabView.js       | 1 -
 src/pages/caseDetail/caseDetailView.js          | 1 -
 src/pages/caseDetail/store/caseDetailReducer.js | 6 ------
 5 files changed, 20 deletions(-)

diff --git a/src/pages/caseDetail/caseDetailState.js b/src/pages/caseDetail/caseDetailState.js
index 86788a45..7b1ecdc4 100644
--- a/src/pages/caseDetail/caseDetailState.js
+++ b/src/pages/caseDetail/caseDetailState.js
@@ -27,14 +27,6 @@ function readyCaseDetail() {
   };
 }
 
-export function fetchAllDataForCaseDetailDataTable() {
-  return (dispatch, getState) => Promise.resolve();
-}
-
-export function AsyncFetchAllDataForCaseDetailDataTable() {
-  return async (dispatch, getState) => Promise.resolve();
-}
-
 export function fetchDataForCaseDetailDataTable() {
   return (dispatch, getState) => dispatch(readyCaseDetail());
 }
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index 25fa55b5..2dd6de12 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -97,11 +97,7 @@ const caseDetailTabController = ({ projectID, classes }) => {
         options={getOptions(container, classes)}
         data={caseDetail[container.dataField] ? caseDetail[container.dataField] : 'undefined'}
         customColumn={container}
-        buttonText={container.buttonText}
         tableID={container.tableID}
-        saveButtonDefaultStyle={container.saveButtonDefaultStyle}
-        ActiveSaveButtonDefaultStyle={container.ActiveSaveButtonDefaultStyle}
-        DeactiveSaveButtonDefaultStyle={container.DeactiveSaveButtonDefaultStyle}
         // eslint-disable-next-line jsx-a11y/tabindex-no-positive
         tabIndex={container.tabIndex}
         externalLinkIcon={externalLinkIcon}
diff --git a/src/pages/caseDetail/caseDetailTabView.js b/src/pages/caseDetail/caseDetailTabView.js
index a0ddd7bd..438944b8 100644
--- a/src/pages/caseDetail/caseDetailTabView.js
+++ b/src/pages/caseDetail/caseDetailTabView.js
@@ -22,7 +22,6 @@ const TabView = ({
   classes,
   data,
   customColumn,
-  primaryKeyIndex = 0,
   tableID,
   externalLinkIcon,
   options,
diff --git a/src/pages/caseDetail/caseDetailView.js b/src/pages/caseDetail/caseDetailView.js
index fadbc264..667b3ee6 100644
--- a/src/pages/caseDetail/caseDetailView.js
+++ b/src/pages/caseDetail/caseDetailView.js
@@ -4,7 +4,6 @@ import {
   withStyles,
 } from '@material-ui/core';
 import _ from 'lodash';
-import { useDispatch } from 'react-redux';
 import StatsView from '../../components/Stats/StatsView';
 import { Typography } from '../../components/Wrappers/Wrappers';
 import icon from '../../assets/icons/Cases.Icon.svg';
diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 3de2d6d7..152674f8 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -2,10 +2,6 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable react/destructuring-assignment */
 import _ from 'lodash';
-import {
-  customSort,
-  transformAPIDataIntoCheckBoxData,
-} from 'bento-components';
 import store from '../../../store';
 import client from '../../../utils/graphqlClient';
 
@@ -17,7 +13,6 @@ import {
   GET_DATASETS_OVERVIEW_QUERY,
   GET_CLINICAL_TRIALS_OVERVIEW_QUERY,
   GET_PATENTS_OVERVIEW_QUERY,
-  // caseIDField,
 } from '../../../bento/caseDetailData';
 
 const storeKey = 'caseDetailTab';
@@ -226,7 +221,6 @@ const reducers = {
   RECEIVE_CASE_DETAIL_TAB: (state, rawItem) => {
     const item = rawItem;
     const filter = { project_id: item.data.projectDetail.project_id };
-    // fetchDataForCaseDetailTab(tabIndex[0].title, allFilters(), null, null, null, null, null);
     return item.data
       ? {
         ...state.caseDetail,

From a4195e5cfe8fd13406af344b184102ee1e171ef6 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Wed, 7 Dec 2022 17:19:06 -0500
Subject: [PATCH 25/29] INS-485

---
 src/pages/caseDetail/caseDetailTabController.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index 2dd6de12..03b11ddc 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -64,6 +64,11 @@ const caseDetailTabController = ({ projectID, classes }) => {
 
   function getTabLalbel(title, count) {
     const tabObj = tabIndex[currentTab];
+
+    if (!tabObj || !tabObj.title) {
+      window.location.reload();
+    }
+
     // NOTE: refactor white color to theme's white color.
     const primaryColor = (tabObj.title === title) ? tabIndex[currentTab].selectedColor : undefined;
     const secondaryColor = (tabObj.title === title) ? tabObj.secondaryColor : undefined;

From 58884ad1c2f33cd1b0248d686f6baf8dad6faea0 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Wed, 7 Dec 2022 17:19:52 -0500
Subject: [PATCH 26/29] INS-485

---
 src/components/Tab/Tab.js                          | 4 ++--
 src/pages/caseDetail/caseDetailTabController.js    | 4 ++--
 src/pages/dashboardTab/components/tabController.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js
index a9d157ea..25a896b5 100644
--- a/src/components/Tab/Tab.js
+++ b/src/components/Tab/Tab.js
@@ -11,7 +11,7 @@ const TabItems = ({
   currentTab,
   orientation,
 }) => {
-  function getTabLalbel(title, image, index) {
+  function getTabLabel(title, image, index) {
     return (
       <TabLabel
         title={title}
@@ -26,7 +26,7 @@ const TabItems = ({
     <Tab
       index={tab.index}
       label={
-        getTabLalbel(tab.label, tab.icon, tab.index)
+        getTabLabel(tab.label, tab.icon, tab.index)
       }
       key={index}
       disableRipple
diff --git a/src/pages/caseDetail/caseDetailTabController.js b/src/pages/caseDetail/caseDetailTabController.js
index 03b11ddc..19d11013 100644
--- a/src/pages/caseDetail/caseDetailTabController.js
+++ b/src/pages/caseDetail/caseDetailTabController.js
@@ -62,7 +62,7 @@ const caseDetailTabController = ({ projectID, classes }) => {
     return `${tabIndex[currentTab].primaryColor}`;
   }
 
-  function getTabLalbel(title, count) {
+  function getTabLabel(title, count) {
     const tabObj = tabIndex[currentTab];
 
     if (!tabObj || !tabObj.title) {
@@ -89,7 +89,7 @@ const caseDetailTabController = ({ projectID, classes }) => {
       key={index}
       id={tab.id}
       label={
-        getTabLalbel(tab.title, caseDetailStats[dataRoot][tab.count]
+        getTabLabel(tab.title, caseDetailStats[dataRoot][tab.count]
           ? caseDetailStats[dataRoot][tab.count] : 0)
       }
     />
diff --git a/src/pages/dashboardTab/components/tabController.js b/src/pages/dashboardTab/components/tabController.js
index 12d6b1f6..2fa6effe 100644
--- a/src/pages/dashboardTab/components/tabController.js
+++ b/src/pages/dashboardTab/components/tabController.js
@@ -98,7 +98,7 @@ const tabController = (classes) => {
     return `${tabIndex[currentTab].primaryColor}`;
   }
 
-  function getTabLalbel(title, count) {
+  function getTabLabel(title, count) {
     const tabObj = tabIndex[currentTab];
     // NOTE: refactor white color to theme's white color.
     const primaryColor = (tabObj.title === title) ? tabIndex[currentTab].selectedColor : undefined;
@@ -194,7 +194,7 @@ const tabController = (classes) => {
       key={index}
       id={tab.id}
       label={
-        getTabLalbel(tab.title, dashboardStats[tab.count] ? dashboardStats[tab.count] : 0)
+        getTabLabel(tab.title, dashboardStats[tab.count] ? dashboardStats[tab.count] : 0)
       }
     />
   ));

From 353e2031b22d17aec8a186a30ccca9b9f870d2cf Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Thu, 8 Dec 2022 09:08:46 -0500
Subject: [PATCH 27/29] INS-485

---
 .../caseDetail/store/caseDetailReducer.js     | 104 ------------------
 1 file changed, 104 deletions(-)

diff --git a/src/pages/caseDetail/store/caseDetailReducer.js b/src/pages/caseDetail/store/caseDetailReducer.js
index 152674f8..f74b0897 100644
--- a/src/pages/caseDetail/store/caseDetailReducer.js
+++ b/src/pages/caseDetail/store/caseDetailReducer.js
@@ -148,37 +148,8 @@ export function setCaseDetailTableLoading() {
   store.dispatch({ type: 'SET_CASE_DETAIL_TABLE_LOADING' });
 }
 
-/**
- * Reducer for sorting checkboxes.
- *
- * @return distpatcher
- */
-
-export function sortSection(groupName, sortBy) {
-  store.dispatch({
-    type: 'SORT_SINGLE_GROUP_CHECKBOX',
-    payload: {
-      groupName,
-      sortBy,
-    },
-  });
-}
-
-export function sortAll() {
-  store.dispatch({
-    type: 'SORT_ALL_GROUP_CHECKBOX_CASE_DETAIL',
-  });
-}
-
 export const getCaseDetail = () => getState();
 
-export function setSearchCriteria(payload) {
-  store.dispatch({
-    type: 'SET_SEARCH_CRITERIA',
-    payload,
-  });
-}
-
 // reducers
 const reducers = {
   CASE_DETAIL_TAB_QUERY_ERR: (state, item) => ({
@@ -211,12 +182,7 @@ const reducers = {
       },
     }
   ),
-  SET_SEARCH_CRITERIA: (state, item) => ({
-    ...state,
-    searchCriteria: item,
-  }),
   REQUEST_CASE_DETAIL_TAB: (state) => ({ ...state, isLoading: true }),
-  SET_SIDEBAR_LOADING: (state) => ({ ...state, setSideBarLoading: true }),
   SET_CASE_DETAIL_TABLE_LOADING: (state) => ({ ...state, isCaseDetailTableLoading: true }),
   RECEIVE_CASE_DETAIL_TAB: (state, rawItem) => {
     const item = rawItem;
@@ -237,76 +203,6 @@ const reducers = {
         data: item.data,
       } : { ...state };
   },
-  CLEAR_SECTION_SORT: (state, item) => {
-    const { sortByList = {} } = state;
-    const { groupName } = item;
-    // eslint-disable-next-line
-    sortByList[groupName] ? delete sortByList[groupName] : null;
-
-    return { ...state, sortByList };
-  },
-  SET_SAMPLE_SELECTION: (state, item) => (
-    {
-      ...state,
-      dataSampleSelected: item,
-    }
-  ),
-
-  CLEAR_TABLE_SELECTION: (state) => ({
-    ...state,
-    dataSampleSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-    dataFileSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-    dataClinicalTrialSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-    dataPatentSelected: {
-      selectedRowInfo: [],
-      selectedRowIndex: [],
-    },
-  }),
-  RESET_ALL: (state) => ({
-    ...state,
-    autoCompleteSelection: {
-      subject_ids: [],
-      sample_ids: [],
-      file_ids: [],
-    },
-    bulkUpload: {
-      subject_ids: [],
-      sample_ids: [],
-      file_ids: [],
-    },
-    allActiveFilters: {},
-  }),
-  RESET_ALL_EXCEPT_BULK_UPLOAD: (state) => ({
-    ...state,
-    autoCompleteSelection: {
-      subject_ids: [],
-      sample_ids: [],
-      file_ids: [],
-    },
-    allActiveFilters: {},
-  }),
-  ADD_AUTOCOMPLETE_DATA: (state, { type, value }) => ({
-    ...state,
-    autoCompleteSelection: {
-      ...state.autoCompleteSelection,
-      [`${type}_ids`]: value,
-    },
-  }),
-  ADD_BULKSEARCHDATA: (state, { type, value }) => ({
-    ...state,
-    bulkUpload: {
-      [`${type}_ids`]: value,
-    },
-  }),
 };
 
 // INJECT-REDUCERS INTO REDUX STORE

From 74f7882b36b9f617134c2da4d20edd4e809c21e6 Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Thu, 8 Dec 2022 09:31:58 -0500
Subject: [PATCH 28/29] INS-481/484

---
 src/bento/caseDetailData.js   |  5 ++---
 src/bento/dashboardTabData.js |  5 ++---
 src/bento/tableDownloadCSV.js | 10 ++++------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/bento/caseDetailData.js b/src/bento/caseDetailData.js
index 38bf3b40..1fb75745 100644
--- a/src/bento/caseDetailData.js
+++ b/src/bento/caseDetailData.js
@@ -242,8 +242,8 @@ export const tabContainers = [
         },
       },
       {
-        dataField: 'nih_percentile',
-        header: 'NIH Percentile',
+        dataField: 'publish_date',
+        header: 'Publish Date',
         sort: 'asc',
         display: true,
         headerStyles: {
@@ -573,7 +573,6 @@ query publicationOverViewByProject(
     publish_date,
     citation_count,
     relative_citation_ratio,
-    nih_percentile,
     doi,
   }
 }
diff --git a/src/bento/dashboardTabData.js b/src/bento/dashboardTabData.js
index 8bdb3aa2..3c42f30a 100644
--- a/src/bento/dashboardTabData.js
+++ b/src/bento/dashboardTabData.js
@@ -263,8 +263,8 @@ export const tabContainers = [
         },
       },
       {
-        dataField: 'nih_percentile',
-        header: 'NIH Percentile',
+        dataField: 'publish_date',
+        header: 'Publish Date',
         sort: 'asc',
         display: true,
         headerStyles: {
@@ -909,7 +909,6 @@ query publicationOverView(
     publish_date,
     citation_count,
     relative_citation_ratio,
-    nih_percentile,
     doi,
     queried_project_ids
   }
diff --git a/src/bento/tableDownloadCSV.js b/src/bento/tableDownloadCSV.js
index f5021a0c..d8eadb24 100644
--- a/src/bento/tableDownloadCSV.js
+++ b/src/bento/tableDownloadCSV.js
@@ -175,7 +175,6 @@ query publicationOverView(
     publish_date,
     citation_count,
     relative_citation_ratio,
-    nih_percentile,
     doi,
     queried_project_ids
   }
@@ -190,7 +189,7 @@ export const customPublicationsTabDownloadCSV = {
     'authors',
     'citation_count',
     'relative_citation_ratio',
-    'nih_percentile',
+    'publish_date',
   ],
   header: [
     'PubMed ID',
@@ -199,7 +198,7 @@ export const customPublicationsTabDownloadCSV = {
     'Authors',
     'Citation Count',
     'Relative Citation Ratio',
-    'NIH Percentile',
+    'Publish Date',
   ],
   query: GET_PUBLICATIONS_TAB,
   apiVariable: 'publicationOverView',
@@ -389,7 +388,6 @@ query publicationOverViewByProject(
     publish_date,
     citation_count,
     relative_citation_ratio,
-    nih_percentile,
     doi,
   }
 }
@@ -402,7 +400,7 @@ export const customCaseDetailPublicationsTabDownloadCSV = {
     'authors',
     'citation_count',
     'relative_citation_ratio',
-    'nih_percentile',
+    'publish_date',
   ],
   header: [
     'PubMed ID',
@@ -410,7 +408,7 @@ export const customCaseDetailPublicationsTabDownloadCSV = {
     'Authors',
     'Citation Count',
     'Relative Citation Ratio',
-    'NIH Percentile',
+    'Publish Date',
   ],
   query: GET_CASE_DETAIL_PUBLICATIONS_TAB,
   apiVariable: 'publicationOverViewByProject',

From fb973908d8161619ad362e7ad1c16a9d032e770f Mon Sep 17 00:00:00 2001
From: Subhash Vallala <sgvallala@gmail.com>
Date: Thu, 8 Dec 2022 09:48:53 -0500
Subject: [PATCH 29/29] INS-474

---
 src/components/Footer/FooterView.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Footer/FooterView.js b/src/components/Footer/FooterView.js
index b70e803b..c21bdf40 100644
--- a/src/components/Footer/FooterView.js
+++ b/src/components/Footer/FooterView.js
@@ -33,6 +33,9 @@ const INSFooter = () => {
       <Footer classes={styles} data={footerUpdatedData} />
       <div>
         <div className="beVersion">
+          Software Version: v1.1.0
+          <br />
+          <br />
           Site Data Update (Projects, Publications, Patents): 09/26/2022
           <br />
           <br />