From b82ccf98c4f7e7d8f444917dcc7dd30dc26e8476 Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Mon, 23 Sep 2024 15:58:13 -0700 Subject: [PATCH 1/5] SWC-7087: add Synapse Plans Page --- .../SynapseHomepageV2/SynapseHomepageV2.tsx | 2 +- .../SynapseHomepageV2/SynapsePlans.tsx | 9 +- .../SynapsePlansPage.stories.ts | 29 +++++ .../SynapseHomepageV2/SynapsePlansPage.tsx | 113 ++++++++++++++++++ .../src/components/SynapseHomepageV2/index.ts | 3 +- .../synapse-react-client/src/umd.index.ts | 6 +- 6 files changed, 158 insertions(+), 4 deletions(-) create mode 100644 packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.stories.ts create mode 100644 packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx index b95b2957a6..a575019c23 100644 --- a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx @@ -39,7 +39,7 @@ export const homepageBodyText: SxProps = { color: darkTextColor, } -const h2Sx: SxProps = { +export const h2Sx: SxProps = { fontSize: { xs: '36px', md: '52px', diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlans.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlans.tsx index d47ed09b33..7677c7ba54 100644 --- a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlans.tsx +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlans.tsx @@ -7,7 +7,14 @@ import { useOneSageURL } from '../../utils/hooks' export const SynapsePlans: React.FunctionComponent = () => { const registrationUrl = useOneSageURL('/register1') return ( - + + +export const DemoPlansPage: Story = { + args: { + gotoPlace: (_href: string) => fn(), + }, + parameters: { + stack: 'production', + design: { + type: 'figma', + url: 'https://www.figma.com/design/7VDfcWetBp5UOENeH50Lzv/Managed-Plan-Scenarios?node-id=1-5840&node-type=frame&m=dev', + }, + msw: { + handlers: [], + }, + }, +} diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx new file mode 100644 index 0000000000..8ea6672e64 --- /dev/null +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx @@ -0,0 +1,113 @@ +import React from 'react' +import { Box, Button, Typography } from '@mui/material' +import { SynapsePlans } from './SynapsePlans' +import { SynapseHomepageNavBar } from './SynapseHomepageNavBar' +import { h2Sx, homepageBodyText } from './SynapseHomepageV2' + +export type SynapsePlansPageProps = { + gotoPlace: (href: string) => void +} + +export const SynapsePlansPage: React.FunctionComponent< + SynapsePlansPageProps +> = ({ gotoPlace }) => { + return ( + + + + + + + + + Explore Synapse plans + + + Sage offers multiple service plans to help you with your data + sharing needs including NIH Data Management and Sharing plans. + + + + + + + + + + Synapse gives you the tools to make your data discoverable + + + + + Working on a grant proposal? Curious about what Synapse can do for + you? Learn more about our plans and see which one is right for you. + + + + + + ) +} + +export default SynapsePlansPage diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/index.ts b/packages/synapse-react-client/src/components/SynapseHomepageV2/index.ts index 5f8885eb8a..9a7be39cb6 100644 --- a/packages/synapse-react-client/src/components/SynapseHomepageV2/index.ts +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/index.ts @@ -1,3 +1,4 @@ import SynapseHomepageV2 from './SynapseHomepageV2' -export { SynapseHomepageV2 } +import SynapsePlansPage from './SynapsePlansPage' +export { SynapseHomepageV2, SynapsePlansPage } export default SynapseHomepageV2 diff --git a/packages/synapse-react-client/src/umd.index.ts b/packages/synapse-react-client/src/umd.index.ts index 1927d53e19..2dd30cc347 100644 --- a/packages/synapse-react-client/src/umd.index.ts +++ b/packages/synapse-react-client/src/umd.index.ts @@ -31,7 +31,10 @@ import { ProgrammaticInstructionsModal } from './components/ProgrammaticInstruct import QueryWrapperPlotNav from './components/QueryWrapperPlotNav/QueryWrapperPlotNav' import StatisticsPlot from './components/StatisticsPlot' import { SynapseHomepage } from './components/SynapseHomepage' -import { SynapseHomepageV2 } from './components/SynapseHomepageV2' +import { + SynapseHomepageV2, + SynapsePlansPage, +} from './components/SynapseHomepageV2' import { SynapseNavDrawer } from './components/SynapseNavDrawer/SynapseNavDrawer' import { DatasetItemsEditor } from './components/SynapseTable/datasets/DatasetItemsEditor' import StandaloneQueryWrapper from './components/StandaloneQueryWrapper/StandaloneQueryWrapper' @@ -120,6 +123,7 @@ const SynapseComponents = { ProjectViewCarousel, SynapseHomepage, SynapseHomepageV2, + SynapsePlansPage, SynapseFooter, EntityFinder, ErrorPage, From 800ea7efd979f20c46c94ea02d2b769d78cb7084 Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Mon, 23 Sep 2024 16:18:48 -0700 Subject: [PATCH 2/5] other plan links --- .../SynapseFooter/SynapseFooter.tsx | 5 +++-- .../SynapseHomepageNavBar.tsx | 21 ++++++++++++++++--- .../SynapseHomepageV2/SynapsePlansPage.tsx | 4 ++-- .../SynapseNavDrawer/SynapseNavDrawer.tsx | 9 ++++++++ 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx index b6cf216fd5..375541361d 100644 --- a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx +++ b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx @@ -12,6 +12,7 @@ import { ReactComponent as Facebook } from '../../assets/homepage/facebook.svg' import { ReactComponent as Instagram } from '../../assets/homepage/instagram.svg' import { ReactComponent as Youtube } from '../../assets/homepage/youtube.svg' import ExperimentalMode from '../ExperimentalMode' +import { PLANS_LINK } from '../SynapseHomepageV2/SynapseHomepageNavBar' export type SynapseFooterProps = { portalVersion: string @@ -112,9 +113,9 @@ export const SynapseFooter: React.FunctionComponent = ({ }, }, { - text: 'Pricing', + text: 'Plans', props: { - href: 'https://help.synapse.org/docs/Sage-Offerings.2965078125.html', + href: PLANS_LINK, }, }, { diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageNavBar.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageNavBar.tsx index cf14ba5581..a1245500d0 100644 --- a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageNavBar.tsx +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageNavBar.tsx @@ -19,6 +19,8 @@ import { useSynapseContext } from '../../utils' import SageResourcesPopover from '../SageResourcesPopover' const LOGIN_LINK = '/LoginPlace:0' +const HOMEPAGE_LINK = '/Home:x' +export const PLANS_LINK = '/Plans:0' const DASHBOARD_LINK = '/Profile:v/projects/all' const navTextButtonSx: SxProps = { @@ -99,9 +101,11 @@ export const SynapseHomepageNavBar: React.FunctionComponent< }} > {/* Logo */} - + gotoPlace(HOMEPAGE_LINK)}> + + {/* Menu Items */} {/* Desktop nav bar, and a mobile hamburger dropdown menu nav bar that contain the same options */} {!isSmallView && ( @@ -113,6 +117,9 @@ export const SynapseHomepageNavBar: React.FunctionComponent< gap: '20px', }} > + - - Sage Bionetworks - - - - -
-
- -
-
-
-

- Explore the data -

-

- behind  - -

-
-
-
-
-
-
- - ​ - - - - -
- - -
-
-
-
-
-
- -

- Alzheimer's Disease -

- -
-
- -

- Neurofibromatosis mouse models -

- -
-
- -

- Cancer -

- -
-
- -

- UK Biobank -

- -
-
- -

- Single-cell analysis of breast cancer -

- -
-
- -

- ROSMAP Religious Orders Study and Memory and Aging Project -

- -
-
- -

- Retinal regeneration studies -

- -
-
- -

- Machine Learning datasets -

- -
-
-
-
-
- - - - - - - - - - - - - -

- Created by - - Sage Bionetworks - - , Synapse empowers biomedical researchers with tools for open science and collaboration, forging a path to optimal human health. -

- - About Sage Bionetworks - -
-
-
-
-
-

- We partner with scientific leaders -

-
-

- Synapse is your ecosystem for responsible data sharing, innovative data reuse, and collaboration. -

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-

- Synapse by the numbers -

-

- - Live -

-

- Projects trending this month -

-
-
-
-
-
-
-
-

- Made for biomedical data reuse and discovery -

-
-
-
-

- Access or query data -

-

- Seamless Integrations -

-

- Synapse provides you with APIs to access or query data from your web browser, or programmatically via R, Python, and the command line. -

-
-
- -
-
- -
-
- - About - integrations - -
-
- -
-
-
-
-

- Display your provenance -

-

- Research Credit -

-

- Synapse records and displays the provenance of your analysis at every step. Analyses, data and code can all be referenced through DOIs (Digital Object Identifiers). -

-
- - About - provenance - -
-
- -
-
-
-
-

- Safeguard data -

-

- Precision Governance -

-

- Ethical openness is our top priority. Sensitive data is protected through a comprehensive system of access controls, regular audits, and privacy-enhancing technologies. Protect the data, protect the patient. -

-
-
- -
-
- -
-
- - About - governance - -
-
- -
-
-
-
-

- Accelerate biomedical progress -

-

- Powered by Synapse -

-

- Synapse portals are the front door to innovation. Vibrant research communities exchange data, tools and ideas to accelerate biomedical progress. -

-
- - About - our portals - -
-
- -
-
-
-
-
-
-

- Featured datasets -

-
-
-
-

- Synapse in action -

-
-

- Explore real-world case studies and success stories showcasing how researchers use Synapse to drive innovative biomedical discoveries and improve health outcomes. -

-
-
-
-
-

- Plans -

-

- Synapse is free and open source for all. We offer different plans to help you if you need extra storage or help with your data management. -

- - Learn more about our plans - -
-
-
-
-

- Free -

-

- Our basic plan -

-

- Explore Data -

-
- -

- <100 GB of content -

-
-
- -

- Sage Managed Individual Storage -

-
-

- Free Synapse Features -

-
- -

- DOIs for publications & grants* -

-
-
- -

- Online documentation & tutorials* -

-
-
- -

- Project wikis* -

-
-
- -

- Discussion forums* -

-
-

- *Items are included in all plans -

-
- - Register Now - -
-
-
-
-
-

- Managed -

-

- Our upgraded plan -

-

- Explore More Data -

-
- -

- <500 GB of content -

-
-
- -

- Secure cloud storage -

-
-

- More Synapse Features -

-
- -

- Project assistance -

-
-
- -

- Governance consulting -

-
-
- -

- NIH Data Management Sharing Plan Support -

-
-
- -

- Help Desk Support -

-
-
- -

- Sharing Content Through Controlled Access -

-
-
- - Find out more - -
-
-
-
-
-

- Data Coordination -

-

- Our customized plan -

-

- Explore the Most Data -

-
- -

- Unlimited data allowance -

-
-
- -

- Custom data storage locations -

-
-
- -

- Fully managed project set up, access and documentation -

-
-
- -

- Tailor-made portal interface -

-
-
- -

- Data integration with existing tools and workflows -

-
-
- -

- Customized governance support -

-
-
- -

- Dedicated Sage Bionetworks point of contact -

-
-
- -

- Unlimited end-to-end support -

-
-
- - Contact Us - -
-
-
-
-
-
-
-
-
-`; From dfcd4f30a0a51f3f31b56bf5402978808aec2494 Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Mon, 23 Sep 2024 17:09:35 -0700 Subject: [PATCH 4/5] update snapshot --- .../SynapseHomepageV2.test.tsx.snap | 1155 +++++++++++++++++ 1 file changed, 1155 insertions(+) create mode 100644 packages/synapse-react-client/src/components/SynapseHomepageV2/__snapshots__/SynapseHomepageV2.test.tsx.snap diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/__snapshots__/SynapseHomepageV2.test.tsx.snap b/packages/synapse-react-client/src/components/SynapseHomepageV2/__snapshots__/SynapseHomepageV2.test.tsx.snap new file mode 100644 index 0000000000..dd7e1e7cc0 --- /dev/null +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/__snapshots__/SynapseHomepageV2.test.tsx.snap @@ -0,0 +1,1155 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SynapseHomepageV2 Snapshot test Basic home page 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + +
+ + + + Sage Bionetworks + + +
+
+
+
+ +
+
+
+

+ Explore the data +

+

+ behind  + +

+
+
+
+
+
+
+ + ​ + + + + +
+ + +
+
+
+
+
+
+ +

+ Alzheimer's Disease +

+ +
+
+ +

+ Neurofibromatosis mouse models +

+ +
+
+ +

+ Cancer +

+ +
+
+ +

+ UK Biobank +

+ +
+
+ +

+ Single-cell analysis of breast cancer +

+ +
+
+ +

+ ROSMAP Religious Orders Study and Memory and Aging Project +

+ +
+
+ +

+ Retinal regeneration studies +

+ +
+
+ +

+ Machine Learning datasets +

+ +
+
+
+
+
+ + + + + + + + + + + + + +

+ Created by + + Sage Bionetworks + + , Synapse empowers biomedical researchers with tools for open science and collaboration, forging a path to optimal human health. +

+ + About Sage Bionetworks + +
+
+
+
+
+

+ We partner with scientific leaders +

+
+

+ Synapse is your ecosystem for responsible data sharing, innovative data reuse, and collaboration. +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

+ Synapse by the numbers +

+

+ + Live +

+

+ Projects trending this month +

+
+
+
+
+
+
+
+

+ Made for biomedical data reuse and discovery +

+
+
+
+

+ Access or query data +

+

+ Seamless Integrations +

+

+ Synapse provides you with APIs to access or query data from your web browser, or programmatically via R, Python, and the command line. +

+
+
+ +
+
+ +
+
+ + About + integrations + +
+
+ +
+
+
+
+

+ Display your provenance +

+

+ Research Credit +

+

+ Synapse records and displays the provenance of your analysis at every step. Analyses, data and code can all be referenced through DOIs (Digital Object Identifiers). +

+
+ + About + provenance + +
+
+ +
+
+
+
+

+ Safeguard data +

+

+ Precision Governance +

+

+ Ethical openness is our top priority. Sensitive data is protected through a comprehensive system of access controls, regular audits, and privacy-enhancing technologies. Protect the data, protect the patient. +

+
+
+ +
+
+ +
+
+ + About + governance + +
+
+ +
+
+
+
+

+ Accelerate biomedical progress +

+

+ Powered by Synapse +

+

+ Synapse portals are the front door to innovation. Vibrant research communities exchange data, tools and ideas to accelerate biomedical progress. +

+
+ + About + our portals + +
+
+ +
+
+
+
+
+
+

+ Featured datasets +

+
+
+
+

+ Synapse in action +

+
+

+ Explore real-world case studies and success stories showcasing how researchers use Synapse to drive innovative biomedical discoveries and improve health outcomes. +

+
+
+
+
+

+ Plans +

+

+ Synapse is free and open source for all. We offer different plans to help you if you need extra storage or help with your data management. +

+ + Learn more about our plans + +
+
+
+
+

+ Free +

+

+ Our basic plan +

+

+ Explore Data +

+
+ +

+ <100 GB of content +

+
+
+ +

+ Sage Managed Individual Storage +

+
+

+ Free Synapse Features +

+
+ +

+ DOIs for publications & grants* +

+
+
+ +

+ Online documentation & tutorials* +

+
+
+ +

+ Project wikis* +

+
+
+ +

+ Discussion forums* +

+
+

+ *Items are included in all plans +

+
+ + Register Now + +
+
+
+
+
+

+ Managed +

+

+ Our upgraded plan +

+

+ Explore More Data +

+
+ +

+ <500 GB of content +

+
+
+ +

+ Secure cloud storage +

+
+

+ More Synapse Features +

+
+ +

+ Project assistance +

+
+
+ +

+ Governance consulting +

+
+
+ +

+ NIH Data Management Sharing Plan Support +

+
+
+ +

+ Help Desk Support +

+
+
+ +

+ Sharing Content Through Controlled Access +

+
+
+ + Find out more + +
+
+
+
+
+

+ Data Coordination +

+

+ Our customized plan +

+

+ Explore the Most Data +

+
+ +

+ Unlimited data allowance +

+
+
+ +

+ Custom data storage locations +

+
+
+ +

+ Fully managed project set up, access and documentation +

+
+
+ +

+ Tailor-made portal interface +

+
+
+ +

+ Data integration with existing tools and workflows +

+
+
+ +

+ Customized governance support +

+
+
+ +

+ Dedicated Sage Bionetworks point of contact +

+
+
+ +

+ Unlimited end-to-end support +

+
+
+ + Contact Us + +
+
+
+
+
+
+
+
+
+`; From 7bb42f74aaadd01994f89fd0402fe9202504c58e Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Mon, 23 Sep 2024 17:31:55 -0700 Subject: [PATCH 5/5] open plans page in current tab --- .../src/components/SynapseFooter/SynapseFooter.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx index 375541361d..dbc7ae4b1b 100644 --- a/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx +++ b/packages/synapse-react-client/src/components/SynapseFooter/SynapseFooter.tsx @@ -116,6 +116,7 @@ export const SynapseFooter: React.FunctionComponent = ({ text: 'Plans', props: { href: PLANS_LINK, + target: '_self', }, }, {