From be47f0c58465c2dd840f9a4f185a720985fe988c Mon Sep 17 00:00:00 2001 From: Nick Grosenbacher Date: Wed, 16 Oct 2024 16:55:22 -0400 Subject: [PATCH 1/2] PORTALS-3195 - Migrate AD Knowledge Portal to react-router v6 --- apps/portals/adknowledgeportal/src/App.scss | 2 +- .../src/config/navbarConfig.ts | 51 ++ .../src/config/routeControlWrapperProps.ts | 46 -- .../src/config/routesConfig.ts | 570 ------------------ .../src/config/routesConfig.tsx | 293 +++++++++ .../src/config/style/_style_overrides.scss | 6 +- .../src/config/style/_variable_overrides.scss | 2 +- .../synapseConfigs/computational_tools.ts | 26 +- .../src/config/synapseConfigs/data.ts | 126 ++-- .../synapseConfigs/experimental_tools.ts | 13 +- .../src/config/synapseConfigs/index.ts | 17 - .../src/config/synapseConfigs/people.ts | 47 +- .../src/config/synapseConfigs/programs.ts | 5 + .../src/config/synapseConfigs/projects.ts | 159 +---- .../src/config/synapseConfigs/publications.ts | 33 +- .../src/config/synapseConfigs/results.ts | 8 +- .../src/config/synapseConfigs/studies.ts | 264 -------- .../src/config/synapseConfigs/studies.tsx | 88 +++ .../target_enabling_resources.ts | 15 +- apps/portals/adknowledgeportal/src/index.tsx | 2 + .../adknowledgeportal/src/pages/HomePage.tsx | 205 +++++++ .../src/pages/ProgramDetailsPage.tsx | 77 +++ .../src/pages/ProjectDetailsPage.tsx | 176 ++++++ .../src/pages/StudyDetailsPage.tsx | 311 ++++++++++ apps/portals/adknowledgeportal/vite.config.ts | 5 +- .../src/components/index.ts | 4 + 26 files changed, 1382 insertions(+), 1169 deletions(-) create mode 100644 apps/portals/adknowledgeportal/src/config/navbarConfig.ts delete mode 100644 apps/portals/adknowledgeportal/src/config/routeControlWrapperProps.ts delete mode 100644 apps/portals/adknowledgeportal/src/config/routesConfig.ts create mode 100644 apps/portals/adknowledgeportal/src/config/routesConfig.tsx delete mode 100644 apps/portals/adknowledgeportal/src/config/synapseConfigs/index.ts delete mode 100644 apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.ts create mode 100644 apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.tsx create mode 100644 apps/portals/adknowledgeportal/src/pages/HomePage.tsx create mode 100644 apps/portals/adknowledgeportal/src/pages/ProgramDetailsPage.tsx create mode 100644 apps/portals/adknowledgeportal/src/pages/ProjectDetailsPage.tsx create mode 100644 apps/portals/adknowledgeportal/src/pages/StudyDetailsPage.tsx diff --git a/apps/portals/adknowledgeportal/src/App.scss b/apps/portals/adknowledgeportal/src/App.scss index ae9961c79f..b40cd82765 100644 --- a/apps/portals/adknowledgeportal/src/App.scss +++ b/apps/portals/adknowledgeportal/src/App.scss @@ -1,7 +1,7 @@ // Load variable_overrides first, so correct values for variables will be applied to the rest of the styles @use './config/style/variable_overrides'; -@use '@sage-bionetworks/synapse-portal-framework/src/style/App'; +@use '@sage-bionetworks/synapse-portal-framework/style/App'; // style_overrides should be last to ensure its styles have highest priority @use './config/style/style_overrides'; diff --git a/apps/portals/adknowledgeportal/src/config/navbarConfig.ts b/apps/portals/adknowledgeportal/src/config/navbarConfig.ts new file mode 100644 index 0000000000..040435b862 --- /dev/null +++ b/apps/portals/adknowledgeportal/src/config/navbarConfig.ts @@ -0,0 +1,51 @@ +import { NavbarConfig } from '@sage-bionetworks/synapse-portal-framework/components/navbar/Navbar' + +export const navbarConfig: NavbarConfig = { + routes: [ + { + name: 'Explore', + path: '/Explore', + children: [ + { name: 'Programs', path: '/Explore/Programs' }, + { name: 'Projects', path: '/Explore/Projects' }, + { name: 'Studies', path: '/Explore/Studies' }, + { name: 'Data', path: '/Explore/Data' }, + { name: 'Publications', path: '/Explore/Publications' }, + { name: 'People', path: '/Explore/People' }, + { + name: 'Experimental Models', + path: '/Explore/Experimental Models', + }, + { + name: 'Computational Tools', + path: '/Explore/Computational Tools', + }, + { + name: 'Target Enabling Resources', + path: '/Explore/Target Enabling Resources', + }, + { name: 'Results', path: '/Explore/Results' }, + ], + }, + { + name: 'Analysis Platforms', + path: '/Analysis Platforms', + }, + { + name: 'Data Access', + path: '/Data Access', + }, + { + name: 'Contribute', + path: '/Contribute', + }, + { + name: 'News', + path: 'https://news.adknowledgeportal.org/', + }, + { + name: 'Help', + path: 'https://help.adknowledgeportal.org/apd/', + }, + ], +} diff --git a/apps/portals/adknowledgeportal/src/config/routeControlWrapperProps.ts b/apps/portals/adknowledgeportal/src/config/routeControlWrapperProps.ts deleted file mode 100644 index c5350ffce3..0000000000 --- a/apps/portals/adknowledgeportal/src/config/routeControlWrapperProps.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { RouteControlWrapperProps } from '@sage-bionetworks/synapse-portal-framework/components/RouteControlWrapper' -import { - data, - people, - programs, - projects, - publications, - studies, -} from './synapseConfigs' -import { programsSql } from './resources' -import experimentalTools from './synapseConfigs/experimental_tools' -import computationalTools from './synapseConfigs/computational_tools' -import targetEnablingResources from './synapseConfigs/target_enabling_resources' -import { results } from './synapseConfigs/results' - -const routeControlWrapper: RouteControlWrapperProps = { - customRoutes: [ - { - path: 'Programs', - synapseConfigArray: [ - { - className: 'ProgramCardList', - name: 'CardContainerLogic', - props: { - ...programs, - sql: programsSql, - }, - }, - ], - }, - { path: 'Projects', synapseConfigArray: [projects] }, - { path: 'Studies', synapseConfigArray: [studies] }, - { path: 'Data', synapseConfigArray: [data] }, - { path: 'Publications', synapseConfigArray: [publications] }, - { path: 'People', synapseConfigArray: [people] }, - { path: 'Experimental Models', synapseConfigArray: [experimentalTools] }, - { path: 'Computational Tools', synapseConfigArray: [computationalTools] }, - { - path: 'Target Enabling Resources', - synapseConfigArray: [targetEnablingResources], - }, - { path: 'Results', synapseConfigArray: [results] }, - ], -} - -export default routeControlWrapper diff --git a/apps/portals/adknowledgeportal/src/config/routesConfig.ts b/apps/portals/adknowledgeportal/src/config/routesConfig.ts deleted file mode 100644 index a34e98ff53..0000000000 --- a/apps/portals/adknowledgeportal/src/config/routesConfig.ts +++ /dev/null @@ -1,570 +0,0 @@ -import { GenericRoute } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' -import { SynapseConstants } from 'synapse-react-client' -import RouteControlWrapperProps from './routeControlWrapperProps' -import { - studiesProgrammaticRouteConfig, - studyCardConfiguration, -} from './synapseConfigs/studies' -import { - projectCardConfiguration, - projectsDetailsPageConfiguration, -} from './synapseConfigs/projects' -import { programCardConfiguration } from './synapseConfigs/programs' -import { programsHomePageConfig } from './synapseConfigs/programsHomePage' -import { - dataSql, - experimentalModelsSql, - modelADStrainsSelectedFacet, - peopleSql, - programsSql, - projectsSql, - studiesSql, -} from './resources' -import { ColumnSingleValueFilterOperator } from '@sage-bionetworks/synapse-types' - -const routes: GenericRoute[] = [ - { - path: '', - exact: false, - synapseConfigArray: [ - { - name: 'SurveyToast', - props: { - localStorageKey: - 'org.sagebionetworks.security.cookies.portal.adkpsurvey.dismissed', - title: - 'What Metrics Matter to You? Help Us Improve the AD Knowledge Portal!', - description: - 'Take our quick survey and share your feedback to make the portal even better. Your input will directly impact the data and insights we provide.', - surveyURL: - 'https://docs.google.com/forms/d/e/1FAIpQLScpWL2N3LGQlNcqKRXQ-qST-UPKngutNkvbhPVkozD7cQR8-g/viewform', - }, - }, - ], - }, - { - path: '', - hideRouteFromNavbar: true, - exact: true, - synapseConfigArray: [ - { - name: 'Programs', - title: 'Programs', - className: 'ProgramsHomePage', - centerTitle: true, - props: { - ...programsHomePageConfig, - }, - }, - { - name: 'FeaturedDataTabs', - title: 'Featured Data', - centerTitle: true, - outsideContainerClassName: 'home-spacer home-bg-dark', - props: { - sql: dataSql, - rgbIndex: 3, - configs: [ - { - title: 'Human Studies', - icon: 'PERSON', - explorePagePath: '/Explore/Studies', - exploreObjectType: 'Studies', - plotsConfig: { - configs: [ - { - title: 'The Whole Genome Sequencing Harmonization Study', - description: - 'This study provides a set of harmonized WGS data generated from the three primary AMP-AD cohort studies: ROSMAP, MSBB, and MayoRNAseq.', - facetsToPlot: ['dataType', 'assay'], - selectFacetColumnName: 'study', - selectFacetColumnValue: 'WGS_Harmonization', - detailsPagePath: - '/Explore/Studies/DetailsPage?Study=syn22264775', - unitDescription: 'Files', - }, - { - title: 'The RNAseq Harmonization Study', - description: - 'This study provides harmonized RNA sequencing data from the ROSMAP, MSBB, and MayoRNAseq studies that have been aligned to the GRCh38 human genome build.', - facetsToPlot: ['dataType', 'assay'], - selectFacetColumnName: 'study', - selectFacetColumnValue: 'RNAseq_Harmonization', - detailsPagePath: - '/Explore/Studies/DetailsPage?Study=syn21241740', - unitDescription: 'Files', - }, - { - title: - 'The Religious Orders and Memory and Aging Project Study', - description: - 'This study generated genomic variants, gene expression, epigenetic, proteomics, and metabolomics data on two human cohorts: the Religious Orders Study (ROS) and the Memory and Aging Project (MAP).', - facetsToPlot: ['dataType', 'assay'], - selectFacetColumnName: 'study', - selectFacetColumnValue: 'ROSMAP', - detailsPagePath: - '/Explore/Studies/DetailsPage?Study=syn3219045', - unitDescription: 'Files', - }, - ], - }, - }, - { - title: 'Animal Model Studies', - icon: 'MOUSE', - explorePagePath: '/Explore/Studies', - exploreObjectType: 'Studies', - plotsConfig: { - configs: [ - { - title: 'The UCI MODEL-AD 5XFAD Study', - description: - "This study provides deep phenotyping data on the early onset Alzheimer's disease 5XFAD mouse model.", - facetsToPlot: ['dataType', 'assay'], - selectFacetColumnName: 'study', - selectFacetColumnValue: 'UCI_5XFAD', - detailsPagePath: - '/Explore/Studies/DetailsPage?Study=syn16798076', - unitDescription: 'Files', - }, - { - title: 'The IU/Jax/Pitt MODEL-AD Levetiracetam 5XFAD Study', - description: - 'This study provides pharmacokinetic, imaging, and behavior data on the 5XFAD mouse model dosed with levetiracetam.', - facetsToPlot: ['dataType', 'assay'], - selectFacetColumnName: 'study', - selectFacetColumnValue: 'Jax.IU.Pitt_Levetiracetam_5XFAD', - detailsPagePath: - '/Explore/Studies/DetailsPage?Study=syn21784897', - unitDescription: 'Files', - }, - { - title: 'The IU/Jax/Pitt MODEL-AD Verubecestat 5XFAD Study', - description: - 'This study provides pharmacokinetic, imaging, immunoassay, and behavior data on the 5XFAD mouse model dosed with verubecestat.', - facetsToPlot: ['dataType', 'assay'], - selectFacetColumnName: 'study', - selectFacetColumnValue: 'Jax.IU.Pitt_Verubecestat_5XFAD', - detailsPagePath: - '/Explore/Studies/DetailsPage?Study=syn21863375', - unitDescription: 'Files', - }, - ], - }, - }, - ], - }, - }, - { - name: 'Ecosystem', - title: 'Related Resources', - centerTitle: true, - subtitle: - 'The AD Knowledge Portal ecosystem contains a growing list of tools and resources. Explore some of them below.', - outsideContainerClassName: 'home-spacer', - props: { - config: [ - { - title: 'Results Explorers', - ownerId: 'syn12666371', - wikiId: '607139', - }, - { - title: 'Data Portals', - ownerId: 'syn12666371', - wikiId: '607138', - }, - { - title: 'Program Websites', - ownerId: 'syn12666371', - wikiId: '607140', - }, - ], - }, - }, - { - name: 'UserCardListRotate', - title: 'Our People and Institutions', - outsideContainerClassName: 'home-spacer home-bg-dark', - centerTitle: true, - props: { - sql: `${peopleSql} where isFeatured=true`, - count: 3, - size: SynapseConstants.MEDIUM_USER_CARD, - useQueryResultUserData: true, - summaryLink: 'Explore/People', - summaryLinkText: 'Explore All People', - }, - }, - { - name: 'RssFeedCards', - title: "What's New", - centerTitle: true, - outsideContainerClassName: 'home-spacer', - props: { - url: 'https://news.adknowledgeportal.org', - itemsToShow: 3, - allowCategories: [], - mailChimpListName: 'AMP-AD quarterly newsletter', - mailChimpUrl: - 'https://sagebase.us7.list-manage.com/subscribe/post?u=b146de537186191a9d2110f3a&id=96b614587a', - filter: { - value: "what's-new", - }, - }, - }, - ], - }, - { - // PORTALS-2028: redirect /ExperimentalModels to /Explore/Experimental%20Models - exact: true, - path: 'ExperimentalModels', - hideRouteFromNavbar: true, - synapseConfigArray: [ - { - name: 'RedirectWithQuery', - props: { - exact: false, - strict: false, - from: 'ExperimentalModels', - to: '/Explore/Experimental Models', - }, - }, - ], - }, - { - // PORTALS-2028 (part 2): redirect /MODEL-ADstrains to /Explore/Experimental%20Models with query request - exact: true, - path: 'MODEL-ADstrains', - hideRouteFromNavbar: true, - synapseConfigArray: [ - { - name: 'Redirect', - props: { - from: 'MODEL-ADstrains', - to: { - pathname: '/Explore/Experimental Models', - search: `QueryWrapper0={"sql":"${encodeURI( - experimentalModelsSql, - )}","limit":25,"offset":0,"selectedFacets":[{"concreteType":"org.sagebionetworks.repo.model.table.FacetColumnValuesRequest","columnName":"${ - modelADStrainsSelectedFacet.columnName - }","facetValues":["${modelADStrainsSelectedFacet.facetValue}"]}]}`, - }, - }, - }, - ], - }, - { - // PORTALS-2836: redirect /Explore/Programs/DetailsPage?Program=ELITE to the ELITE portal - exact: true, - path: 'Explore/Programs/DetailsPage', - hideRouteFromNavbar: true, - synapseConfigArray: [ - { - name: 'RedirectToURL', - props: { - toURL: 'https://eliteportal.synapse.org/', - search: 'Program=ELITE', - }, - }, - ], - }, - // PORTALS-2919: Redirect DataAccess/Instructions to /Data Access - { - path: 'DataAccess', - hideRouteFromNavbar: true, - routes: [ - { - path: 'Instructions', - synapseConfigArray: [ - { - name: 'Redirect', - props: { - to: { - pathname: '/Data Access', - }, - }, - }, - ], - }, - ], - }, - { - path: 'Explore', - routes: [ - { - path: ':slug/', - hideRouteFromNavbar: true, - exact: true, - synapseConfigArray: [ - { - name: 'RouteControlWrapper', - isOutsideContainer: true, - props: RouteControlWrapperProps, - }, - ], - }, - - { - path: 'Programs', - hideRouteFromNavbar: false, - routes: [ - { - exact: true, - path: 'DetailsPage', - synapseConfigArray: [ - { - name: 'CardContainerLogic', - isOutsideContainer: true, - props: { - sql: programsSql, - isHeader: true, - sqlOperator: ColumnSingleValueFilterOperator.EQUAL, - ...programCardConfiguration, - genericCardSchema: { - ...programCardConfiguration.genericCardSchema!, - description: 'Long Description', - }, - }, - }, - { - name: 'DetailsPage', - props: { - showMenu: true, - sql: programsSql, - synapseConfigArray: [ - { - name: 'CardContainerLogic', - title: 'Projects', - columnName: 'Program', - showTitleSeperator: false, - tableSqlKeys: ['Program'], - props: { - ...projectCardConfiguration, - sql: projectsSql, - }, - }, - { - name: 'CardContainerLogic', - title: 'Studies', - columnName: 'Program', - showTitleSeperator: false, - tableSqlKeys: ['Program'], - props: { - ...studyCardConfiguration, - sql: studiesSql, - }, - }, - ], - }, - }, - ], - }, - ], - }, - { - path: 'Projects', - hideRouteFromNavbar: false, - routes: [ - { - path: 'DetailsPage', - exact: true, - synapseConfigArray: [ - { - name: 'CardContainerLogic', - isOutsideContainer: true, - props: { - sql: projectsSql, - isHeader: true, - ...projectCardConfiguration, - }, - }, - { - name: 'DetailsPage', - props: projectsDetailsPageConfiguration, - }, - ], - }, - ], - }, - { - path: 'Studies', - hideRouteFromNavbar: false, - routes: [ - { - path: 'DetailsPage', - routes: [ - { path: '', synapseConfigArray: studiesProgrammaticRouteConfig }, - ], - }, - ], - }, - { - exact: true, - path: 'Data', - hideRouteFromNavbar: false, - }, - { - exact: true, - path: 'Publications', - hideRouteFromNavbar: false, - }, - { - exact: true, - path: 'People', - hideRouteFromNavbar: false, - }, - { - exact: true, - path: 'Experimental Tools', - hideRouteFromNavbar: true, - synapseConfigArray: [ - // PORTALS-2001 - we renamed "Experimental Tools" to "Experimental Models" - { - name: 'RedirectWithQuery', - props: { - exact: false, - strict: false, - from: 'Experimental Tools', - to: 'Experimental Models', - }, - }, - ], - }, - { - exact: true, - path: 'Experimental Models', - hideRouteFromNavbar: false, - }, - { - exact: true, - path: 'Computational Tools', - hideRouteFromNavbar: false, - }, - { - exact: true, - path: 'Target Enabling Resources', - hideRouteFromNavbar: false, - }, - { - exact: true, - path: 'Results', - hideRouteFromNavbar: false, - }, - ], - }, - { - exact: true, - path: 'Analysis Platforms', - synapseConfigArray: [ - { - name: 'Markdown', - title: 'Analysis Platforms', - props: { - ownerId: 'syn12666371', - wikiId: '625598', - loadingSkeletonRowCount: 10, - }, - }, - ], - }, - { - path: 'Data Access', - exact: true, - synapseConfigArray: [ - { - name: 'Markdown', - title: 'Data Access', - props: { - ownerId: 'syn12666371', - wikiId: '581937', - loadingSkeletonRowCount: 20, - }, - }, - ], - }, - - // Uncomment to expose Contribute route (once research team is monitoring submissions) - { - path: 'Contribute', - routes: [ - { - exact: true, - path: '', - hideRouteFromNavbar: true, - synapseConfigArray: [ - { - name: 'Markdown', - title: 'Contribute', - className: 'amp-project-component', - props: { - ownerId: 'syn12666371', - wikiId: '600033', - loadingSkeletonRowCount: 20, - }, - }, - ], - }, - { - exact: true, - path: 'FormSubmission', - hideRouteFromNavbar: true, - synapseConfigArray: [ - { - name: 'Markdown', - props: { - ownerId: 'syn12666371', - wikiId: '600034', - }, - }, - { - name: 'SynapseFormWrapper', - props: { - formSchemaEntityId: 'syn20692910', - fileNamePath: 'study.submission_name', - formUiSchemaEntityId: 'syn20692911', - formNavSchemaEntityId: 'syn20968007', - isWizardMode: true, - formTitle: 'Your Contribution Request', - formClass: 'contribution-request', - }, - }, - ], - }, - ], - }, - { - exact: true, - path: 'About', - hideRouteFromNavbar: true, - synapseConfigArray: [ - { - name: 'Markdown', - title: 'About', - props: { - wikiId: '581939', - ownerId: 'syn12666371', - loadingSkeletonRowCount: 20, - }, - }, - ], - }, - { - exact: true, - displayName: 'News', - path: undefined, - target: '_blank', - link: 'https://news.adknowledgeportal.org/', - synapseConfigArray: [], - }, - { - exact: true, - displayName: 'Help', - path: undefined, - target: '_blank', - link: 'https://help.adknowledgeportal.org/apd/', - synapseConfigArray: [], - }, -] - -export default routes diff --git a/apps/portals/adknowledgeportal/src/config/routesConfig.tsx b/apps/portals/adknowledgeportal/src/config/routesConfig.tsx new file mode 100644 index 0000000000..b10d3d4e44 --- /dev/null +++ b/apps/portals/adknowledgeportal/src/config/routesConfig.tsx @@ -0,0 +1,293 @@ +import App from '@sage-bionetworks/synapse-portal-framework/App' +import ExploreWrapper from '@sage-bionetworks/synapse-portal-framework/components/Explore/ExploreWrapper' +import RedirectToURL from '@sage-bionetworks/synapse-portal-framework/components/RedirectToURL' +import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' +import { SectionLayout } from '@sage-bionetworks/synapse-portal-framework/components/SectionLayout' +import SurveyToast from '@sage-bionetworks/synapse-portal-framework/components/SurveyToast' +import sharedRoutes from '@sage-bionetworks/synapse-portal-framework/shared-config/sharedRoutes' +import React from 'react' +import { Navigate, RouteObject } from 'react-router-dom' +import HomePage from 'src/pages/HomePage' +import ProgramDetailsPage from 'src/pages/ProgramDetailsPage' +import ProjectDetailsPage from 'src/pages/ProjectDetailsPage' +import { + StudyDetailsPage, + studyDetailsPageChildRoutes, +} from 'src/pages/StudyDetailsPage' +import { + CardContainerLogic, + MarkdownSynapse, + QueryWrapperPlotNav, + SynapseFormWrapper, +} from 'synapse-react-client' +import { + experimentalModelsSql, + modelADStrainsSelectedFacet, + programsSql, +} from './resources' +import { computationalToolsQueryWrapperPlotNavProps } from './synapseConfigs/computational_tools' +import { dataQueryWrapperPlotNavProps } from './synapseConfigs/data' +import { experimentalToolsQueryWrapperPlotNavProps } from './synapseConfigs/experimental_tools' +import { peopleQueryWrapperPlotNavProps } from './synapseConfigs/people' +import programs from './synapseConfigs/programs' +import { projectsQueryWrapperPlotNavProps } from './synapseConfigs/projects' +import { publicationsQueryWrapperPlotNavProps } from './synapseConfigs/publications' +import { results } from './synapseConfigs/results' +import { studiesQueryWrapperPlotNavProps } from './synapseConfigs/studies' +import { targetEnablingResourcesQueryWrapperPlotNavProps } from './synapseConfigs/target_enabling_resources' + +const routes: RouteObject[] = [ + { + path: '/', + element: ( + + + + ), + children: [ + ...sharedRoutes, + { + index: true, + element: , + }, + { + // PORTALS-2028: redirect /ExperimentalModels to /Explore/Experimental%20Models + path: 'ExperimentalModels', + element: , + }, + { + // PORTALS-2028 (part 2): redirect /MODEL-ADstrains to /Explore/Experimental%20Models with query request + path: 'MODEL-ADstrains', + element: ( + + ), + }, + { + path: 'DataAccess', + element: ( + + ), + }, + { + // PORTALS-2919: Redirect DataAccess/Instructions to /Data Access + path: 'DataAccess/Instructions', + element: , + }, + { + path: 'Explore', + element: ( + + ), + children: [ + { + path: 'Programs', + element: , + }, + { + path: 'Projects', + element: ( + + ), + }, + { + path: 'Studies', + element: ( + + ), + }, + { + path: 'Data', + element: , + }, + { + path: 'Publications', + element: ( + + ), + }, + { + path: 'People', + element: ( + + ), + }, + { + // PORTALS-2001 - we renamed "Experimental Tools" to "Experimental Models" + path: 'Experimental Tools', + element: , + }, + { + path: 'Experimental Models', + element: ( + + ), + }, + { + path: 'Computational Tools', + element: ( + + ), + }, + { + path: 'Target Enabling Resources', + element: ( + + ), + }, + { + path: 'Results', + element: ( +
+ +
+ ), + }, + ], + }, + { + path: 'Explore/Programs/DetailsPage', + element: ( + <> + {/* PORTALS-2836: redirect /Explore/Programs/DetailsPage?Program=ELITE to the ELITE portal */} + + + + ), + }, + { + path: 'Explore/Projects/DetailsPage', + element: , + }, + { + path: 'Explore/Studies/DetailsPage', + element: , + children: studyDetailsPageChildRoutes, + }, + { + path: 'Analysis Platforms', + element: ( + + + + ), + }, + { + path: 'Data Access', + element: ( + + + + ), + }, + { + path: 'Contribute', + element: ( + + + + ), + }, + { + path: 'Contribute/FormSubmission', + element: ( + + + + + ), + }, + { + path: 'About', + element: ( + + + + ), + }, + ], + }, +] + +export default routes diff --git a/apps/portals/adknowledgeportal/src/config/style/_style_overrides.scss b/apps/portals/adknowledgeportal/src/config/style/_style_overrides.scss index b896a36b3f..f2708c47ef 100644 --- a/apps/portals/adknowledgeportal/src/config/style/_style_overrides.scss +++ b/apps/portals/adknowledgeportal/src/config/style/_style_overrides.scss @@ -1,4 +1,4 @@ -@use '@sage-bionetworks/synapse-portal-framework/src/style/variables' as Portal; +@use '@sage-bionetworks/synapse-portal-framework/style/variables' as Portal; #header, #footer { @@ -20,10 +20,6 @@ footer { } } -.amp-project-component { - margin-top: 30px; -} - .ProgramCardList { .SRC-imageThumbnail img { max-width: 100px; diff --git a/apps/portals/adknowledgeportal/src/config/style/_variable_overrides.scss b/apps/portals/adknowledgeportal/src/config/style/_variable_overrides.scss index f1456f1cbf..3928b9612f 100644 --- a/apps/portals/adknowledgeportal/src/config/style/_variable_overrides.scss +++ b/apps/portals/adknowledgeportal/src/config/style/_variable_overrides.scss @@ -1,4 +1,4 @@ -@use '@sage-bionetworks/synapse-portal-framework/src/style/variables' with ( +@use '@sage-bionetworks/synapse-portal-framework/style/variables' with ( $primary-action-color: #4d5491, $secondary-action-color: #2f8e94, $header-url: 'config/style/header.svg', diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/computational_tools.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/computational_tools.ts index b10741ca05..f561089cf5 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/computational_tools.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/computational_tools.ts @@ -1,7 +1,15 @@ -import type { CardConfiguration, GenericCardSchema } from 'synapse-react-client' +import type { + CardConfiguration, + GenericCardSchema, + QueryWrapperPlotNavProps, +} from 'synapse-react-client' import { SynapseConstants } from 'synapse-react-client' -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' import { computationalSql } from '../resources' +import { PROGRAM_TABLE_COLUMN_NAMES } from './programs' + +export const COMPUTATIONAL_TOOLS_COLUMN_NAMES = { + GRANT: 'grant', +} const computationalSchema: GenericCardSchema = { type: SynapseConstants.COMPUTATIONAL, @@ -18,8 +26,8 @@ export const computationalCardConfiguration: CardConfiguration = { labelLinkConfig: [ { isMarkdown: false, - matchColumnName: 'grant', - URLColumnName: 'Grant Number', + matchColumnName: COMPUTATIONAL_TOOLS_COLUMN_NAMES.GRANT, + URLColumnName: PROGRAM_TABLE_COLUMN_NAMES.GRANT_NUMBER, baseURL: 'Explore/Projects/DetailsPage', }, ], @@ -27,9 +35,8 @@ export const computationalCardConfiguration: CardConfiguration = { const rgbIndex = 7 -const computationalTools: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { +export const computationalToolsQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = + { rgbIndex, sql: computationalSql, cardConfiguration: computationalCardConfiguration, @@ -46,7 +53,4 @@ const computationalTools: SynapseConfig = { 'summary', ], }, - }, -} - -export default computationalTools + } diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/data.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/data.ts index 31e8cd2ee8..0486302452 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/data.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/data.ts @@ -1,69 +1,69 @@ -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' +import { QueryWrapperPlotNavProps } from 'synapse-react-client' import { cavaticaConnectAccountURL, dataSql } from '../resources' +import { STUDY_TABLE_COLUMN_NAMES } from './studies' const rgbIndex = 1 -const data: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { - rgbIndex, - name: 'Data', - visibleColumnCount: 10, - showExportToCavatica: true, - cavaticaConnectAccountURL: cavaticaConnectAccountURL, - isRowSelectionVisible: true, - tableConfiguration: { - showAccessColumn: true, - showDownloadColumn: true, - columnLinks: [ - { - matchColumnName: 'study', - isMarkdown: false, - baseURL: 'Explore/Studies/DetailsPage', - URLColumnName: 'Study_Name', - wrapValueWithParens: true, - }, - ], - }, - sql: dataSql, - searchConfiguration: { - searchable: [ - 'id', - 'study', - 'dataType', - 'assay', - 'organ', - 'tissue', - 'species', - 'diagnosis', - 'sex', - 'consortium', - 'grant', - 'modelSystemName', - 'treatmentType', - 'specimenID', - 'individualID', - 'individualIdSource', - 'specimenIdSource', - 'resourceType', - 'dataSubtype', - 'metadataType', - 'assayTarget', - 'analysisType', - 'cellType', - 'nucleicAcidSource', - 'fileFormat', - 'group', - 'name', - 'isModelSystem', - 'isConsortiumAnalysis', - 'isMultiSpecimen', - 'metaboliteType', - 'chromosome', - ], - }, - shouldDeepLink: true, - }, +export const DATA_TABLE_COLUMN_NAMES = { + STUDY: 'study', } -export default data +export const dataQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { + rgbIndex, + name: 'Data', + visibleColumnCount: 10, + showExportToCavatica: true, + cavaticaConnectAccountURL: cavaticaConnectAccountURL, + isRowSelectionVisible: true, + tableConfiguration: { + showAccessColumn: true, + showDownloadColumn: true, + columnLinks: [ + { + matchColumnName: DATA_TABLE_COLUMN_NAMES.STUDY, + isMarkdown: false, + baseURL: 'Explore/Studies/DetailsPage', + URLColumnName: STUDY_TABLE_COLUMN_NAMES.STUDY_NAME, + wrapValueWithParens: true, + }, + ], + }, + sql: dataSql, + searchConfiguration: { + searchable: [ + 'id', + 'study', + 'dataType', + 'assay', + 'organ', + 'tissue', + 'species', + 'diagnosis', + 'sex', + 'consortium', + 'grant', + 'modelSystemName', + 'treatmentType', + 'specimenID', + 'individualID', + 'individualIdSource', + 'specimenIdSource', + 'resourceType', + 'dataSubtype', + 'metadataType', + 'assayTarget', + 'analysisType', + 'cellType', + 'nucleicAcidSource', + 'fileFormat', + 'group', + 'name', + 'isModelSystem', + 'isConsortiumAnalysis', + 'isMultiSpecimen', + 'metaboliteType', + 'chromosome', + ], + }, + shouldDeepLink: true, +} diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/experimental_tools.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/experimental_tools.ts index 9f2d1b1001..0039261398 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/experimental_tools.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/experimental_tools.ts @@ -4,7 +4,6 @@ import type { QueryWrapperPlotNavProps, } from 'synapse-react-client' import { GenericCardSchema, SynapseConstants } from 'synapse-react-client' -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' import { experimentalModelsSql } from '../resources' // https://sagebionetworks.jira.com/wiki/spaces/PS/pages/1254293523/AMP-AD+Experimental+Models+Schema @@ -111,9 +110,8 @@ export const experimentalDetailsTableConfiguration: QueryWrapperPlotNavProps['ta const rgbIndex = 6 -const experimentalTools: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { +export const experimentalToolsQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = + { rgbIndex, visibleColumnCount: 10, sql: experimentalModelsSql, @@ -155,7 +153,8 @@ const experimentalTools: SynapseConfig = { 'targetedGenes', ], }, - }, -} + } -export default experimentalTools +export const EXPERIMENTAL_MODELS_COLUMN_NAMES = { + GRANT: 'grant', +} diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/index.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/index.ts deleted file mode 100644 index 8c185436ee..0000000000 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import projects from './projects' -import studies from './studies' -import data from './data' -import people from './people' -import programs from './programs' -import publications from './publications' - -export { projects, studies, data, people, programs, publications } - -export default { - projects, - studies, - data, - people, - programs, - publications, -} diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/people.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/people.ts index 35514a6fc7..2361b652a2 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/people.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/people.ts @@ -1,29 +1,30 @@ -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' -import { SynapseConstants } from 'synapse-react-client' +import { + QueryWrapperPlotNavProps, + SynapseConstants, +} from 'synapse-react-client' import { peopleSql } from '../resources' const rgbIndex = 2 -const people: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { - rgbIndex, - sql: peopleSql, - name: 'People', - shouldDeepLink: true, - cardConfiguration: { - type: SynapseConstants.MEDIUM_USER_CARD, - }, - searchConfiguration: { - searchable: [ - 'firstName', - 'lastName', - 'institution', - 'Program', - 'Grant Number', - ], - }, - }, +export const PEOPLE_COLUMN_NAMES = { + GRANT_NUMBER: 'Grant Number', } -export default people +export const peopleQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { + rgbIndex, + sql: peopleSql, + name: 'People', + shouldDeepLink: true, + cardConfiguration: { + type: SynapseConstants.MEDIUM_USER_CARD, + }, + searchConfiguration: { + searchable: [ + 'firstName', + 'lastName', + 'institution', + 'Program', + 'Grant Number', + ], + }, +} diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/programs.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/programs.ts index 463080623d..13d56e3d9a 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/programs.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/programs.ts @@ -1,6 +1,11 @@ import type { CardConfiguration } from 'synapse-react-client' import { SynapseConstants } from 'synapse-react-client' +export const PROGRAM_TABLE_COLUMN_NAMES = { + PROGRAM: 'Program', + GRANT_NUMBER: 'Grant Number', +} + export const programCardConfiguration: CardConfiguration = { type: SynapseConstants.GENERIC_CARD, genericCardSchema: { diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/projects.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/projects.ts index 4892dcae50..faa19654c1 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/projects.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/projects.ts @@ -1,27 +1,17 @@ -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' -import type { CardConfiguration } from 'synapse-react-client' +import type { + CardConfiguration, + QueryWrapperPlotNavProps, +} from 'synapse-react-client' import { SynapseConstants } from 'synapse-react-client' -import { - computationalSql, - experimentalModelsSql, - peopleSql, - projectsSql, - publicationsSql, - studiesSql, - targetEnablingResourcesDetailsPageSql, -} from '../resources' -import { DetailsPageProps } from '@sage-bionetworks/synapse-portal-framework/types/portal-util-types' -import { studyCardConfiguration } from './studies' -import { publicationCardProps } from './publications' -import { - experimentalDetailsTableConfigurationColumnLinks, - experimentalToolsCardConfiguration, -} from './experimental_tools' -import { computationalCardConfiguration } from './computational_tools' -import { targetEnablingResourcesCardConfiguration } from './target_enabling_resources' -import { ColumnSingleValueFilterOperator } from '@sage-bionetworks/synapse-types' +import { projectsSql } from '../resources' const rgbIndex = 4 + +export const PROJECT_TABLE_COLUMN_NAMES = { + PROGRAM: 'Program', + GRANT_NUMBER: 'Grant Number', +} + export const projectCardConfiguration: CardConfiguration = { type: SynapseConstants.GENERIC_CARD, genericCardSchema: { @@ -52,118 +42,21 @@ export const projectCardConfiguration: CardConfiguration = { ], } -export const projectsDetailsPageConfiguration: DetailsPageProps = { - showMenu: true, +export const projectsQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { + rgbIndex, sql: projectsSql, - synapseConfigArray: [ - { - name: 'CardContainerLogic', - columnName: 'Grant Number', - title: 'Studies', - tableSqlKeys: ['Grant Number'], - props: { - ...studyCardConfiguration, - sql: studiesSql, - }, - }, - { - name: 'CardContainerLogic', - columnName: 'Grant Number', - title: 'Publications', - showTitleSeperator: false, - tableSqlKeys: ['grant'], - props: { - sql: publicationsSql, - ...publicationCardProps, - }, - }, - { - name: 'ToggleSynapseObjects', - title: 'Experimental Models', - showTitleSeperator: false, - standalone: true, - toggleConfigs: { - icon1: 'table', - config1: { - name: 'StandaloneQueryWrapper', - props: { - sql: experimentalModelsSql, - rgbIndex, - sqlOperator: ColumnSingleValueFilterOperator.EQUAL, - columnLinks: experimentalDetailsTableConfigurationColumnLinks, - }, - columnName: 'Grant Number', - tableSqlKeys: ['grant'], - }, - icon2: 'cards', - config2: { - name: 'CardContainerLogic', - columnName: 'Grant Number', - tableSqlKeys: ['grant'], - props: { - sql: experimentalModelsSql, - ...experimentalToolsCardConfiguration, - }, - }, - }, - props: {}, - }, - { - name: 'CardContainerLogic', - columnName: 'Grant Number', - title: 'Computational Tools', - showTitleSeperator: false, - tableSqlKeys: ['grant'], - props: { - sql: computationalSql, - ...computationalCardConfiguration, - }, - }, - { - name: 'CardContainerLogic', - columnName: 'Grant Number', - title: 'Target Enabling Resources', - showTitleSeperator: false, - tableSqlKeys: ['grant'], - props: { - sql: targetEnablingResourcesDetailsPageSql, - ...targetEnablingResourcesCardConfiguration, - }, - }, - { - name: 'CardContainerLogic', - title: 'People', - columnName: 'Grant Number', - tableSqlKeys: ['Grant Number'], - props: { - sql: peopleSql, - limit: 6, - type: SynapseConstants.MEDIUM_USER_CARD, - }, - }, - ], -} - -const projects: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { - rgbIndex, - sql: projectsSql, - shouldDeepLink: true, - name: 'Projects', - cardConfiguration: projectCardConfiguration, - // unitDescription: 'Projects', - searchConfiguration: { - searchable: [ - 'Name', - 'Grant Number', - 'Program', - 'Principal Investigators', - 'Institutions', - 'Abstract', - ], - }, + shouldDeepLink: true, + name: 'Projects', + cardConfiguration: projectCardConfiguration, + // unitDescription: 'Projects', + searchConfiguration: { + searchable: [ + 'Name', + 'Grant Number', + 'Program', + 'Principal Investigators', + 'Institutions', + 'Abstract', + ], }, } - -export default projects diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/publications.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/publications.ts index c52eafd358..6cc80dae0a 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/publications.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/publications.ts @@ -1,7 +1,9 @@ -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' -import { SynapseConstants } from 'synapse-react-client' -import { publicationsSql } from '../resources' import { Direction } from '@sage-bionetworks/synapse-types' +import { + QueryWrapperPlotNavProps, + SynapseConstants, +} from 'synapse-react-client' +import { publicationsSql } from '../resources' const rgbIndex = 5 @@ -27,18 +29,17 @@ const columnAliases = { pubmed_id: 'Pubmed ID', } -const publications: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { - rgbIndex, - sql: publicationsSql, - name: 'Publications', - shouldDeepLink: true, - facetValueSortConfigs: [{ columnName: 'year', direction: Direction.DESC }], - facetsToPlot: ['Program', 'year', 'grant', 'journal'], - cardConfiguration: publicationCardProps, - columnAliases, - }, +export const publicationsQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { + rgbIndex, + sql: publicationsSql, + name: 'Publications', + shouldDeepLink: true, + facetValueSortConfigs: [{ columnName: 'year', direction: Direction.DESC }], + facetsToPlot: ['Program', 'year', 'grant', 'journal'], + cardConfiguration: publicationCardProps, + columnAliases, } -export default publications +export const PUBLICATIONS_TABLE_COLUMN_NAMES = { + GRANT: 'grant', +} diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/results.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/results.ts index ff615323c2..39bfe43581 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/results.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/results.ts @@ -1,7 +1,9 @@ -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' +import { MarkdownSynapseProps } from 'synapse-react-client' -export const results: SynapseConfig = { - name: 'Markdown', +export const results: { + props: MarkdownSynapseProps + style: React.CSSProperties +} = { // https://www.synapse.org/Synapse:syn12666371/wiki/595383 props: { ownerId: 'syn12666371', diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.ts deleted file mode 100644 index de107ac6a6..0000000000 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.ts +++ /dev/null @@ -1,264 +0,0 @@ -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' -import { DetailsPageProps } from '@sage-bionetworks/synapse-portal-framework/types/portal-util-types' -import type { CardConfiguration } from 'synapse-react-client' -import { SynapseConstants } from 'synapse-react-client' -import studyHeaderSvg from '../style/study-header.svg?url' -import { dataOnStudiesPageSql, dataSql, studiesSql } from '../resources' -import { - ColumnMultiValueFunction, - ColumnSingleValueFilterOperator, -} from '@sage-bionetworks/synapse-types' - -const rgbIndex = 0 -export const studyCardConfiguration: CardConfiguration = { - type: SynapseConstants.GENERIC_CARD, - secondaryLabelLimit: 4, - titleLinkConfig: { - isMarkdown: false, - baseURL: 'Explore/Studies/DetailsPage', - URLColumnName: 'Study', - matchColumnName: 'Study', - }, - labelLinkConfig: [ - { - isMarkdown: false, - matchColumnName: 'Program', - URLColumnName: 'Program', - baseURL: 'Explore/Programs/DetailsPage', - }, - ], - genericCardSchema: { - type: SynapseConstants.STUDY, - title: 'Study_Name', - subTitle: 'Data_Contributor', - icon: 'Access_Type', - description: 'Study_Description', - secondaryLabels: [ - 'DataType_All', - 'studyFocus', - 'Number_Of_Individuals', - 'specimenType', - 'Species', - 'Cohort_Type', - 'Study_Status', - 'Program', - 'Grant Number', - ], - }, -} -const columnAliases = { - DataType_All: 'Data Types', - Data_Contributor: 'Data Contributor', - Study_Description: 'Study Description', - Study_Name: 'Study Name', - Number_of_Individuals: 'Individuals', - 'Grant Number': 'Grant', -} -const studies: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { - rgbIndex, - columnAliases, - sql: studiesSql, - name: 'Studies', - shouldDeepLink: true, - cardConfiguration: studyCardConfiguration, - searchConfiguration: { - searchable: [ - 'Study_Name', - 'Study_Description', - 'DataType_All', - 'studyFocus', - 'Data_Contributor', - 'specimenType', - 'Species', - 'Grant Number', - 'Program', - ], - }, - }, -} - -export const studiesDetailsPageProps: DetailsPageProps = { - sql: studiesSql, - sqlOperator: ColumnSingleValueFilterOperator.LIKE, - tabLayout: [ - { - title: 'Study Details', - uriValue: 'StudyDetails', - iconName: 'study', - toolTip: 'Description, methods, acknowledgements and related studies', - synapseConfigArray: [ - { - name: 'Markdown', - columnName: 'Study', - title: 'Study Description', - props: {}, - }, - { - name: 'Markdown', - columnName: 'ackContext', - title: 'Acknowledgement', - props: {}, - }, - { - name: 'MarkdownCollapse', - columnName: 'Acknowledgement', - props: { - title: 'Acknowledgement Statement', - textDescription: 'full statement', - showCopyPlainText: true, - }, - }, - { - name: 'MarkdownCollapse', - columnName: 'Citations', - props: { - title: 'Citations', - textDescription: 'all citations', - showCopyPlainText: true, - }, - }, - { - name: 'Markdown', - columnName: 'Methods', - title: 'Methods', - props: {}, - resolveSynId: { - title: true, - }, - }, - { - name: 'CardContainerLogic', - columnName: 'Related_Studies', - title: 'Related Studies', - tableSqlKeys: ['Study'], - props: { - sqlOperator: ColumnSingleValueFilterOperator.EQUAL, - sql: studiesSql, - ...studyCardConfiguration, - }, - }, - ], - }, - { - title: 'Study Data', - uriValue: 'StudyData', - iconName: 'database', - toolTip: 'All of the Data generated within this study', - cssClass: 'tab-database', - synapseConfigArray: [ - { - name: 'RssFeedCards', - title: 'Recent Data Updates', - columnName: 'Study', - resolveSynId: { - value: true, - }, - props: { - url: 'https://news.adknowledgeportal.org', - itemsToShow: 3, - allowCategories: [], - // mailChimpListName: 'study specific list name????', - // mailChimpUrl:'https://study specific url????' - viewAllNewsButtonText: 'View All Data Updates', - }, - }, - { - name: 'Markdown', - title: 'Access Requirements', - columnName: 'accessReqs', - props: {}, - }, - { - name: 'Markdown', - title: 'Study Metadata', - columnName: 'studyMetadata', - props: {}, - }, - { - name: 'QueryWrapperPlotNav', - props: { - sqlOperator: ColumnMultiValueFunction.HAS, - showColumnSelection: true, - rgbIndex, - name: 'Metadata Files', - visibleColumnCount: 10, - showExportToCavatica: true, - isRowSelectionVisible: true, - tableConfiguration: { - showAccessColumn: true, - showDownloadColumn: true, - }, - availableFacets: ['metadataType', 'dataType', 'assay'], - sql: dataOnStudiesPageSql, - shouldDeepLink: false, - defaultShowPlots: false, - }, - resolveSynId: { - value: true, - }, - tableSqlKeys: ['study'], - columnName: 'Study', - }, - { - name: 'QueryWrapperPlotNav', - title: 'Study Data', - props: { - sqlOperator: ColumnMultiValueFunction.HAS, - rgbIndex, - visibleColumnCount: 10, - isRowSelectionVisible: true, - showExportToCavatica: true, - tableConfiguration: { - showAccessColumn: true, - showDownloadColumn: true, - columnLinks: [ - { - matchColumnName: 'study', - isMarkdown: false, - baseURL: 'Explore/Studies/DetailsPage', - URLColumnName: 'Study_Name', - wrapValueWithParens: true, - }, - ], - }, - sql: dataSql, - shouldDeepLink: false, - }, - resolveSynId: { - value: true, - }, - tableSqlKeys: ['study'], - columnName: 'Study', - }, - ], - }, - ], -} - -export const studiesProgrammaticRouteConfig: SynapseConfig[] = [ - { - name: 'CardContainerLogic', - isOutsideContainer: true, - props: { - isHeader: true, - ...studyCardConfiguration, - sql: studiesSql, - columnAliases, - isAlignToLeftNav: true, - secondaryLabelLimit: Infinity, - - iconOptions: { - study: studyHeaderSvg, - }, - }, - }, - { - name: 'DetailsPage', - isOutsideContainer: false, - props: studiesDetailsPageProps, - containerClassName: 'container-full-width', - }, -] -export default studies diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.tsx b/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.tsx new file mode 100644 index 0000000000..eba6d0a377 --- /dev/null +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.tsx @@ -0,0 +1,88 @@ +import type { + CardConfiguration, + QueryWrapperPlotNavProps, +} from 'synapse-react-client' +import { SynapseConstants } from 'synapse-react-client' +import { studiesSql } from '../resources' + +export const STUDY_TABLE_COLUMN_NAMES = { + STUDY: 'Study', + STUDY_NAME: 'Study_Name', + GRANT_NUMBER: 'Grant Number', + PROGRAM: 'Program', + ACK_CONTEXT: 'ackContext', + ACKNOWLEDGEMENT: 'Acknowledgement', + CITATIONS: 'Citations', + METHODS: 'Methods', + RELATED_STUDIES: 'Related_Studies', + ACCESS_REQS: 'accessReqs', + STUDY_METADATA: 'studyMetadata', +} + +export const studyRgbIndex = 0 +export const studyCardConfiguration: CardConfiguration = { + type: SynapseConstants.GENERIC_CARD, + secondaryLabelLimit: 4, + titleLinkConfig: { + isMarkdown: false, + baseURL: 'Explore/Studies/DetailsPage', + URLColumnName: 'Study', + matchColumnName: 'Study', + }, + labelLinkConfig: [ + { + isMarkdown: false, + matchColumnName: 'Program', + URLColumnName: 'Program', + baseURL: 'Explore/Programs/DetailsPage', + }, + ], + genericCardSchema: { + type: SynapseConstants.STUDY, + title: 'Study_Name', + subTitle: 'Data_Contributor', + icon: 'Access_Type', + description: 'Study_Description', + secondaryLabels: [ + 'DataType_All', + 'studyFocus', + 'Number_Of_Individuals', + 'specimenType', + 'Species', + 'Cohort_Type', + 'Study_Status', + 'Program', + 'Grant Number', + ], + }, +} +export const studyColumnAliases = { + DataType_All: 'Data Types', + Data_Contributor: 'Data Contributor', + Study_Description: 'Study Description', + Study_Name: 'Study Name', + Number_of_Individuals: 'Individuals', + 'Grant Number': 'Grant', +} + +export const studiesQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { + rgbIndex: studyRgbIndex, + columnAliases: studyColumnAliases, + sql: studiesSql, + name: 'Studies', + shouldDeepLink: true, + cardConfiguration: studyCardConfiguration, + searchConfiguration: { + searchable: [ + 'Study_Name', + 'Study_Description', + 'DataType_All', + 'studyFocus', + 'Data_Contributor', + 'specimenType', + 'Species', + 'Grant Number', + 'Program', + ], + }, +} diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/target_enabling_resources.ts b/apps/portals/adknowledgeportal/src/config/synapseConfigs/target_enabling_resources.ts index 2bbdf65384..e555d6262c 100644 --- a/apps/portals/adknowledgeportal/src/config/synapseConfigs/target_enabling_resources.ts +++ b/apps/portals/adknowledgeportal/src/config/synapseConfigs/target_enabling_resources.ts @@ -4,11 +4,14 @@ import { QueryWrapperPlotNavProps, SynapseConstants, } from 'synapse-react-client' -import { SynapseConfig } from '@sage-bionetworks/synapse-portal-framework/types/portal-config' import { targetEnablingResourcesExploreSql } from '../resources' // https://sagebionetworks.jira.com/wiki/spaces/PS/pages/2501607563/AMP-AD+Target+Enabling+Resources+Schema +export const TARGET_ENABLING_RESOURCES_COLUMN_NAMES = { + GRANT: 'grant', +} + const targetSchema: GenericCardSchema = { type: SynapseConstants.EXPERIMENTAL, title: 'title', @@ -65,9 +68,8 @@ export const targetEnablingResourcesTableConfiguration: QueryWrapperPlotNavProps const rgbIndex = 6 -const targetEnablingResources: SynapseConfig = { - name: 'QueryWrapperPlotNav', - props: { +export const targetEnablingResourcesQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = + { rgbIndex, sql: targetEnablingResourcesExploreSql, visibleColumnCount: 7, @@ -101,7 +103,4 @@ const targetEnablingResources: SynapseConfig = { 'summary', ], }, - }, -} - -export default targetEnablingResources + } diff --git a/apps/portals/adknowledgeportal/src/index.tsx b/apps/portals/adknowledgeportal/src/index.tsx index 33c1a1b992..100e40f60c 100644 --- a/apps/portals/adknowledgeportal/src/index.tsx +++ b/apps/portals/adknowledgeportal/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import { createRoot } from 'react-dom/client' import Portal from '@sage-bionetworks/synapse-portal-framework' +import { navbarConfig } from './config/navbarConfig' import palette from './config/paletteConfig' import routes from './config/routesConfig' import footerConfig from './config/footerConfig' @@ -27,6 +28,7 @@ root.render( footerConfig={footerConfig} logoHeaderConfig={logoHeaderConfig} logoFooterConfig={logoFooterConfig} + navbarConfig={navbarConfig} /> , ) diff --git a/apps/portals/adknowledgeportal/src/pages/HomePage.tsx b/apps/portals/adknowledgeportal/src/pages/HomePage.tsx new file mode 100644 index 0000000000..bf19e5bbab --- /dev/null +++ b/apps/portals/adknowledgeportal/src/pages/HomePage.tsx @@ -0,0 +1,205 @@ +import Ecosystem from '@sage-bionetworks/synapse-portal-framework/components/csbc-home-page/Ecosystem' +import Header from '@sage-bionetworks/synapse-portal-framework/components/Header' +import { SectionLayout } from '@sage-bionetworks/synapse-portal-framework/components/SectionLayout' +import React from 'react' +import { dataSql, peopleSql } from 'src/config/resources' +import programsHomePageConfig from 'src/config/synapseConfigs/programsHomePage' +import { + Programs, + FeaturedDataTabs, + UserCardListRotate, + SynapseConstants, + RssFeedCards, +} from 'synapse-react-client' + +export default function HomePage() { + return ( + <> +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + + ) +} diff --git a/apps/portals/adknowledgeportal/src/pages/ProgramDetailsPage.tsx b/apps/portals/adknowledgeportal/src/pages/ProgramDetailsPage.tsx new file mode 100644 index 0000000000..19d519bdec --- /dev/null +++ b/apps/portals/adknowledgeportal/src/pages/ProgramDetailsPage.tsx @@ -0,0 +1,77 @@ +import DetailsPage from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage' +import { DetailsPageContent } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageContentLayout' +import { DetailsPageContextConsumer } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageContext' +import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams' +import { ColumnSingleValueFilterOperator } from '@sage-bionetworks/synapse-types' +import React from 'react' +import { programsSql, projectsSql, studiesSql } from 'src/config/resources' +import programCardConfiguration, { + PROGRAM_TABLE_COLUMN_NAMES, +} from 'src/config/synapseConfigs/programs' +import { + PROJECT_TABLE_COLUMN_NAMES, + projectCardConfiguration, +} from 'src/config/synapseConfigs/projects' +import { + STUDY_TABLE_COLUMN_NAMES, + studyCardConfiguration, +} from 'src/config/synapseConfigs/studies' +import { CardContainerLogic } from 'synapse-react-client' + +export default function ProgramDetailsPage() { + const searchParams = useGetPortalComponentSearchParams() + + return ( + <> + + + + {({ value: program }) => ( + + ), + }, + { + title: 'Studies', + id: 'Studies', + element: ( + + ), + }, + ]} + /> + )} + + + + ) +} diff --git a/apps/portals/adknowledgeportal/src/pages/ProjectDetailsPage.tsx b/apps/portals/adknowledgeportal/src/pages/ProjectDetailsPage.tsx new file mode 100644 index 0000000000..c87b35cedd --- /dev/null +++ b/apps/portals/adknowledgeportal/src/pages/ProjectDetailsPage.tsx @@ -0,0 +1,176 @@ +import DetailsPage from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage' +import { DetailsPageContent } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageContentLayout' +import { DetailsPageContextConsumer } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageContext' +import ToggleSynapseObjects from '@sage-bionetworks/synapse-portal-framework/components/ToggleSynapseObjects' +import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams' +import { ColumnSingleValueFilterOperator } from '@sage-bionetworks/synapse-types' +import React from 'react' +import { + computationalSql, + experimentalModelsSql, + peopleSql, + projectsSql, + publicationsSql, + studiesSql, + targetEnablingResourcesDetailsPageSql, +} from 'src/config/resources' +import { + COMPUTATIONAL_TOOLS_COLUMN_NAMES, + computationalCardConfiguration, +} from 'src/config/synapseConfigs/computational_tools' +import { + EXPERIMENTAL_MODELS_COLUMN_NAMES, + experimentalDetailsTableConfigurationColumnLinks, + experimentalToolsCardConfiguration, +} from 'src/config/synapseConfigs/experimental_tools' +import { PEOPLE_COLUMN_NAMES } from 'src/config/synapseConfigs/people' +import { + PROJECT_TABLE_COLUMN_NAMES, + projectCardConfiguration, +} from 'src/config/synapseConfigs/projects' +import { + publicationCardProps, + PUBLICATIONS_TABLE_COLUMN_NAMES, +} from 'src/config/synapseConfigs/publications' +import { + STUDY_TABLE_COLUMN_NAMES, + studyCardConfiguration, +} from 'src/config/synapseConfigs/studies' +import { + TARGET_ENABLING_RESOURCES_COLUMN_NAMES, + targetEnablingResourcesCardConfiguration, +} from 'src/config/synapseConfigs/target_enabling_resources' +import { + CardContainerLogic, + StandaloneQueryWrapper, + SynapseConstants, +} from 'synapse-react-client' + +export default function ProjectDetailsPage() { + const searchParams = useGetPortalComponentSearchParams() + + return ( + <> + + + + {({ value: grantNumber }) => ( + + ), + }, + { + title: 'Publications', + id: 'Publications', + element: ( + + ), + }, + { + title: 'Experimental Models', + id: 'Experimental Models', + element: ( + + } + icon2={'cards'} + synapseObject2={ + + } + /> + ), + }, + { + title: 'Computational Tools', + id: 'Computational Tools', + element: ( + + ), + }, + { + title: 'Target Enabling Resources', + id: 'Target Enabling Resources', + element: ( + + ), + }, + { + title: 'People', + id: 'People', + element: ( + + ), + }, + ]} + /> + )} + + + + ) +} diff --git a/apps/portals/adknowledgeportal/src/pages/StudyDetailsPage.tsx b/apps/portals/adknowledgeportal/src/pages/StudyDetailsPage.tsx new file mode 100644 index 0000000000..6bf226250a --- /dev/null +++ b/apps/portals/adknowledgeportal/src/pages/StudyDetailsPage.tsx @@ -0,0 +1,311 @@ +import DetailsPage from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage' +import { DetailsPageContent } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageContentLayout' +import { DetailsPageContextConsumer } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageContext' +import { DetailsPageSectionLayoutType } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageSectionLayout' +import { + DetailsPageTabConfig, + DetailsPageTabs, +} from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/DetailsPageTabs' +import { EntityResolver } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/EntityResolver' +import { MarkdownSynapseFromColumnData } from '@sage-bionetworks/synapse-portal-framework/components/DetailsPage/markdown/MarkdownSynapseFromColumnData' +import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' +import { transformStringIntoMarkdownProps } from '@sage-bionetworks/synapse-portal-framework/components/transformStringIntoMarkdownProps' +import { DetailsPageProps } from '@sage-bionetworks/synapse-portal-framework/types/portal-util-types' +import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams' +import { + ColumnMultiValueFunction, + ColumnSingleValueFilterOperator, +} from '@sage-bionetworks/synapse-types' +import React from 'react' +import { Outlet, RouteObject } from 'react-router-dom' +import { dataOnStudiesPageSql, dataSql, studiesSql } from 'src/config/resources' +import { DATA_TABLE_COLUMN_NAMES } from 'src/config/synapseConfigs/data' +import { + STUDY_TABLE_COLUMN_NAMES, + studyCardConfiguration, + studyColumnAliases, + studyRgbIndex, +} from 'src/config/synapseConfigs/studies' +import { + CardContainerLogic, + ErrorPage, + MarkdownCollapse, + QueryWrapperPlotNav, + RssFeedCards, + SynapseErrorType, +} from 'synapse-react-client' +import studyHeaderSvg from '../config/style/study-header.svg?url' + +const studyDetailsTabContent: DetailsPageSectionLayoutType[] = [ + { + title: 'Study Description', + id: 'StudyDescription', + element: ( + + ), + }, + { + title: 'Acknowledgement', + id: 'Acknowledgement', + element: ( + <> + + + + {({ value }) => { + if (!value) { + return null + } + const props = transformStringIntoMarkdownProps(value) + return ( + + ) + }} + + + ), + }, + { + id: 'Methods', + title: 'Methods', + hideTitle: true, + element: ( + + ), + }, + { + title: 'Related Studies', + id: 'RelatedStudies', + element: ( + + {({ value }) => { + if (!value) { + return null + } + return ( + + ) + }} + + ), + }, +] + +const studyDataTabContent: DetailsPageSectionLayoutType[] = [ + { + title: 'Recent Data Updates', + id: 'RecentDataUpdates', + // TODO: Removed usage of these props in PORTALS-3195 refactor + // Were these used to create props to inject into RssFeedCards? Does not seem like it + // columnName: 'Study', + // resolveSynId: { + // value: true, + // }, + element: ( + + ), + }, + { + id: 'AccessRequirements', + title: 'Access Requirements', + element: ( + + ), + }, + { + id: 'StudyMetadata', + title: 'Study Metadata', + element: ( + + ), + }, + { + id: 'MetadataFiles', + element: ( + + {({ value: entityId }) => ( + + {entityHeader => ( + + )} + + )} + + ), + }, + { + id: 'StudyData', + title: 'Study Data', + element: ( + + {({ value: entityId }) => ( + + {entityHeader => ( + + )} + + )} + + ), + }, +] + +export const studyDetailsPageTabs: DetailsPageTabConfig[] = [ + { + title: 'Study Details', + path: 'StudyDetails', + iconName: 'study', + tooltip: 'Description, methods, acknowledgements and related studies', + }, + { + title: 'Study Data', + path: 'StudyData', + iconName: 'database', + iconClassName: 'tab-database', + tooltip: 'All of the Data generated within this study', + }, +] + +export const studyDetailsPageChildRoutes: RouteObject[] = [ + { + index: true, + element: , + }, + { + path: studyDetailsPageTabs[0].path, + element: , + }, + { + path: studyDetailsPageTabs[1].path, + element: , + }, +] + +export const studiesDetailsPageProps: DetailsPageProps = { + sql: studiesSql, + sqlOperator: ColumnSingleValueFilterOperator.LIKE, +} + +export function StudyDetailsPage() { + const searchParams = useGetPortalComponentSearchParams() + + const study = searchParams[STUDY_TABLE_COLUMN_NAMES.STUDY] + const studyName = searchParams[STUDY_TABLE_COLUMN_NAMES.STUDY_NAME] + + if (study == null && studyName == null) { + return {}} /> + } + + return ( + <> + + + + + + + ) +} diff --git a/apps/portals/adknowledgeportal/vite.config.ts b/apps/portals/adknowledgeportal/vite.config.ts index bd2599888e..618249813e 100644 --- a/apps/portals/adknowledgeportal/vite.config.ts +++ b/apps/portals/adknowledgeportal/vite.config.ts @@ -20,7 +20,10 @@ export default mergeConfig(portalsViteConfig, { }, { find: /@sage-bionetworks\/synapse-portal-framework/, - replacement: resolve(projectRootDir, '../../synapse-portal-framework'), + replacement: resolve( + projectRootDir, + '../../synapse-portal-framework/src', + ), }, ], }, diff --git a/packages/synapse-react-client/src/components/index.ts b/packages/synapse-react-client/src/components/index.ts index 5720db8de6..c66941f621 100644 --- a/packages/synapse-react-client/src/components/index.ts +++ b/packages/synapse-react-client/src/components/index.ts @@ -1,3 +1,5 @@ +import ErrorPage, { SynapseErrorType } from './error/ErrorPage' +import NoContentAvailable from './SynapseTable/NoContentAvailable' export * from './AccessTokenPage' export * from './AccountLevelBadges' export * from './Authentication' @@ -81,3 +83,5 @@ export * from './SageResourcesPopover' // TODO: Find a better way to expose Icon components export { Project as ProjectIcon } from '../assets/themed_icons/Project' +export { ErrorPage, SynapseErrorType } +export { NoContentAvailable } From ea32bf6ac96257e69fac8dc1828339c0744e1c72 Mon Sep 17 00:00:00 2001 From: Nick Grosenbacher Date: Wed, 16 Oct 2024 17:46:02 -0400 Subject: [PATCH 2/2] PORTALS-3195 - cleanup to make consistent with other portals --- .../src/config/explorePageRoutes.tsx | 73 ++++++++++ .../src/config/routesConfig.tsx | 126 +----------------- .../{studies.tsx => studies.ts} | 0 3 files changed, 78 insertions(+), 121 deletions(-) create mode 100644 apps/portals/adknowledgeportal/src/config/explorePageRoutes.tsx rename apps/portals/adknowledgeportal/src/config/synapseConfigs/{studies.tsx => studies.ts} (100%) diff --git a/apps/portals/adknowledgeportal/src/config/explorePageRoutes.tsx b/apps/portals/adknowledgeportal/src/config/explorePageRoutes.tsx new file mode 100644 index 0000000000..8928bf7ede --- /dev/null +++ b/apps/portals/adknowledgeportal/src/config/explorePageRoutes.tsx @@ -0,0 +1,73 @@ +import React from 'react' +import { RouteObject } from 'react-router-dom' +import { programsSql } from './resources' +import { computationalToolsQueryWrapperPlotNavProps } from './synapseConfigs/computational_tools' +import { dataQueryWrapperPlotNavProps } from './synapseConfigs/data' +import { experimentalToolsQueryWrapperPlotNavProps } from './synapseConfigs/experimental_tools' +import { peopleQueryWrapperPlotNavProps } from './synapseConfigs/people' +import programs from './synapseConfigs/programs' +import { projectsQueryWrapperPlotNavProps } from './synapseConfigs/projects' +import { publicationsQueryWrapperPlotNavProps } from './synapseConfigs/publications' +import { results } from './synapseConfigs/results' +import { studiesQueryWrapperPlotNavProps } from './synapseConfigs/studies' +import { targetEnablingResourcesQueryWrapperPlotNavProps } from './synapseConfigs/target_enabling_resources' +import { + CardContainerLogic, + MarkdownSynapse, + QueryWrapperPlotNav, +} from 'synapse-react-client' + +export const explorePageRoutes: RouteObject[] = [ + { + path: 'Programs', + element: , + }, + { + path: 'Projects', + element: , + }, + { + path: 'Studies', + element: , + }, + { + path: 'Data', + element: , + }, + { + path: 'Publications', + element: , + }, + { + path: 'People', + element: , + }, + { + path: 'Experimental Models', + element: ( + + ), + }, + { + path: 'Computational Tools', + element: ( + + ), + }, + { + path: 'Target Enabling Resources', + element: ( + + ), + }, + { + path: 'Results', + element: ( +
+ +
+ ), + }, +] diff --git a/apps/portals/adknowledgeportal/src/config/routesConfig.tsx b/apps/portals/adknowledgeportal/src/config/routesConfig.tsx index b10d3d4e44..a67c03414f 100644 --- a/apps/portals/adknowledgeportal/src/config/routesConfig.tsx +++ b/apps/portals/adknowledgeportal/src/config/routesConfig.tsx @@ -14,27 +14,9 @@ import { StudyDetailsPage, studyDetailsPageChildRoutes, } from 'src/pages/StudyDetailsPage' -import { - CardContainerLogic, - MarkdownSynapse, - QueryWrapperPlotNav, - SynapseFormWrapper, -} from 'synapse-react-client' -import { - experimentalModelsSql, - modelADStrainsSelectedFacet, - programsSql, -} from './resources' -import { computationalToolsQueryWrapperPlotNavProps } from './synapseConfigs/computational_tools' -import { dataQueryWrapperPlotNavProps } from './synapseConfigs/data' -import { experimentalToolsQueryWrapperPlotNavProps } from './synapseConfigs/experimental_tools' -import { peopleQueryWrapperPlotNavProps } from './synapseConfigs/people' -import programs from './synapseConfigs/programs' -import { projectsQueryWrapperPlotNavProps } from './synapseConfigs/projects' -import { publicationsQueryWrapperPlotNavProps } from './synapseConfigs/publications' -import { results } from './synapseConfigs/results' -import { studiesQueryWrapperPlotNavProps } from './synapseConfigs/studies' -import { targetEnablingResourcesQueryWrapperPlotNavProps } from './synapseConfigs/target_enabling_resources' +import { MarkdownSynapse, SynapseFormWrapper } from 'synapse-react-client' +import { explorePageRoutes } from './explorePageRoutes' +import { experimentalModelsSql, modelADStrainsSelectedFacet } from './resources' const routes: RouteObject[] = [ { @@ -91,112 +73,14 @@ const routes: RouteObject[] = [ }, { path: 'Explore', - element: ( - - ), + element: , children: [ - { - path: 'Programs', - element: , - }, - { - path: 'Projects', - element: ( - - ), - }, - { - path: 'Studies', - element: ( - - ), - }, - { - path: 'Data', - element: , - }, - { - path: 'Publications', - element: ( - - ), - }, - { - path: 'People', - element: ( - - ), - }, + ...explorePageRoutes, { // PORTALS-2001 - we renamed "Experimental Tools" to "Experimental Models" path: 'Experimental Tools', element: , }, - { - path: 'Experimental Models', - element: ( - - ), - }, - { - path: 'Computational Tools', - element: ( - - ), - }, - { - path: 'Target Enabling Resources', - element: ( - - ), - }, - { - path: 'Results', - element: ( -
- -
- ), - }, ], }, { diff --git a/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.tsx b/apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.ts similarity index 100% rename from apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.tsx rename to apps/portals/adknowledgeportal/src/config/synapseConfigs/studies.ts