From cfaec4a8b15a08669471a6ff4456dba0230c3a86 Mon Sep 17 00:00:00 2001
From: Florian Boulnois <fboulnoi@broadinstitute.org>
Date: Tue, 26 Sep 2023 15:54:00 -0400
Subject: [PATCH] feat: add duos data library

---
 src/Routes.js                                 |  1 +
 src/components/DuosHeader.js                  |  1 +
 .../data_search/DatasetSearchTable.js         |  5 ++-
 src/pages/DatasetSearch.js                    | 31 +++++++++++++++----
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/Routes.js b/src/Routes.js
index c1d1feb7cd..d5985839e4 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -97,6 +97,7 @@ const Routes = (props) => (
     <AuthenticatedRoute path="/admin_manage_dar_collections/" component={AdminManageDarCollections} props={props} rolesAllowed={[USER_ROLES.admin]} />
     {checkEnv(envGroups.NON_STAGING) && <AuthenticatedRoute path="/dataset_catalog/:variant" component={CustomDatasetCatalog} props={props} rolesAllowed={[USER_ROLES.researcher]}/>}
     <AuthenticatedRoute path="/dataset_catalog" component={DatasetCatalog} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
+    <AuthenticatedRoute path="/datalibrary" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
     <AuthenticatedRoute path="/datalibrary_broad" component={DatasetSearch} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.all]} />
     <AuthenticatedRoute path="/dataset_statistics/:datasetId" component={DatasetStatistics} props={props}
       rolesAllowed={[USER_ROLES.all]} />
diff --git a/src/components/DuosHeader.js b/src/components/DuosHeader.js
index cb3c73eb0d..d649c7a5b8 100644
--- a/src/components/DuosHeader.js
+++ b/src/components/DuosHeader.js
@@ -131,6 +131,7 @@ export const headerTabsConfig = [
     search: 'dataset_catalog',
     children: [
       { label: 'Data Catalog', link: '/dataset_catalog' },
+      { label: 'Data Library', link: '/datalibrary' },
       { label: 'DAR Requests', link: '/researcher_console' },
       { label: 'Submitted Datasets', link: '/dataset_submissions', isRenderedForUser: (user) => user?.isDataSubmitter }
     ],
diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js
index a5e7b74b32..db3ebfa69a 100644
--- a/src/components/data_search/DatasetSearchTable.js
+++ b/src/components/data_search/DatasetSearchTable.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button } from '@mui/material';
 import { useEffect, useState } from 'react';
-import datasetIcon from '../../logo.svg';
 import { groupBy, isEmpty } from 'lodash';
 import CollapsibleTable from '../CollapsibleTable';
 import TableHeaderSection from '../TableHeaderSection';
@@ -31,7 +30,7 @@ const datasetTableHeader = [
 ];
 
 export const DatasetSearchTable = (props) => {
-  const { datasets, history } = props;
+  const { datasets, history, icon, title } = props;
   const [filters, setFilters] = useState([]);
   const [filtered, setFiltered] = useState([]);
   const [tableData, setTableData] = useState({});
@@ -183,7 +182,7 @@ export const DatasetSearchTable = (props) => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-      <TableHeaderSection icon={datasetIcon} title='Broad Data Library' description="Search, filter, and select datasets, then click 'Apply for Access' to request access" />
+      <TableHeaderSection icon={icon} title={title} description="Search, filter, and select datasets, then click 'Apply for Access' to request access" />
       <Box sx={{ display: 'flex', flexDirection: 'row', paddingTop: '2em' }}>
         <Box sx={{ width: '14%', padding: '0 1em' }}>
           <DatasetFilterList datasets={datasets} filters={filters} filterHandler={filterHandler} />
diff --git a/src/pages/DatasetSearch.js b/src/pages/DatasetSearch.js
index cec2f8651d..8db5b8e9e9 100644
--- a/src/pages/DatasetSearch.js
+++ b/src/pages/DatasetSearch.js
@@ -3,10 +3,33 @@ import { useEffect, useState } from 'react';
 import { Notifications } from '../libs/utils';
 import { DataSet } from '../libs/ajax';
 import DatasetSearchTable from '../components/data_search/DatasetSearchTable';
+import broadIcon from '../logo.svg';
+import duosIcon from '../images/duos-network-logo.svg';
 
 export const DatasetSearch = (props) => {
+  const { location } = props;
   const [datasets, setDatasets] = useState([]);
 
+  // branded study table versions
+  const versions = {
+    '/datalibrary': {
+      query: null,
+      icon: duosIcon,
+      title: 'DUOS Data Library',
+    },
+    '/datalibrary_broad': {
+      query: {
+        'match': {
+          'submitter.institution.id': '150' // Broad Institute of MIT and Harvard
+        }
+      },
+      icon: broadIcon,
+      title: 'Broad Data Library',
+    },
+  }
+
+  const version = versions[location.pathname];
+
   useEffect(() => {
     const init = async () => {
       const query = {
@@ -20,11 +43,7 @@ export const DatasetSearch = (props) => {
                   '_type': 'dataset'
                 }
               },
-              {
-                'match': {
-                  'submitter.institution.id': '150' // Broad Institute of MIT and Harvard
-                }
-              },
+              version.query,
               {
                 'exists': {
                   'field': 'study'
@@ -46,7 +65,7 @@ export const DatasetSearch = (props) => {
   }, []);
 
   return (
-    <DatasetSearchTable {...props} datasets={datasets} />
+    <DatasetSearchTable {...props} datasets={datasets} icon={version.icon} title={version.title} />
   );
 };