From d581e8144c3050ce70ac85a0885601f2a0a467cb Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Tue, 7 Jan 2025 16:46:00 -0800 Subject: [PATCH] delete the old Synapse Homepage from the bundle. also, add a View More Datasets button to the Synapse v2 Homepage --- .../SynapseHomepage/SynapseFeatureItem.tsx | 24 - .../SynapseHomepage.stories.ts | 18 - .../SynapseHomepage/SynapseHomepage.tsx | 559 ------------------ .../SynapseHomepage/SynapsePlans.tsx | 472 --------------- .../SynapseHomepage/SynapsePoweredPortal.tsx | 35 -- .../src/components/SynapseHomepage/index.ts | 3 - .../SynapseHomepageV2/SynapseHomepageV2.tsx | 21 + .../src/style/components/_all.scss | 20 +- .../style/components/_synapse-homepage.scss | 360 ----------- .../synapse-react-client/src/umd.index.ts | 2 - 10 files changed, 31 insertions(+), 1483 deletions(-) delete mode 100644 packages/synapse-react-client/src/components/SynapseHomepage/SynapseFeatureItem.tsx delete mode 100644 packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.stories.ts delete mode 100644 packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.tsx delete mode 100644 packages/synapse-react-client/src/components/SynapseHomepage/SynapsePlans.tsx delete mode 100644 packages/synapse-react-client/src/components/SynapseHomepage/SynapsePoweredPortal.tsx delete mode 100644 packages/synapse-react-client/src/components/SynapseHomepage/index.ts delete mode 100644 packages/synapse-react-client/src/style/components/_synapse-homepage.scss diff --git a/packages/synapse-react-client/src/components/SynapseHomepage/SynapseFeatureItem.tsx b/packages/synapse-react-client/src/components/SynapseHomepage/SynapseFeatureItem.tsx deleted file mode 100644 index 369a1a7564a..00000000000 --- a/packages/synapse-react-client/src/components/SynapseHomepage/SynapseFeatureItem.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Box, Typography } from '@mui/material' -import { ReactElement } from 'react' - -export type SynapseFeatureItemProps = { - title: string - description: ReactElement - logo: ReactElement -} - -export function SynapseFeatureItem({ - title, - description, - logo, -}: SynapseFeatureItemProps) { - return ( -
- {logo} - - {title} - - {description} -
- ) -} diff --git a/packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.stories.ts b/packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.stories.ts deleted file mode 100644 index 58ba9d80cd7..00000000000 --- a/packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react' -import { SynapseHomepage } from './SynapseHomepage' - -const meta = { - title: 'Synapse/HomePage', - component: SynapseHomepage, - parameters: { - chromatic: { viewports: [600, 1200] }, - }, -} satisfies Meta -export default meta -type Story = StoryObj - -export const Demo: Story = { - args: { - projectViewId: 'syn23593547.3', - }, -} diff --git a/packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.tsx b/packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.tsx deleted file mode 100644 index 8f2db464f87..00000000000 --- a/packages/synapse-react-client/src/components/SynapseHomepage/SynapseHomepage.tsx +++ /dev/null @@ -1,559 +0,0 @@ -import { Button, Grid, Link, Typography } from '@mui/material' -import RLogo from '../../assets/icons/RLogo' -import Python from '../../assets/icons/Python' -import Terminal from '../../assets/icons/Terminal' -import Java from '../../assets/icons/Java' -import ProjectViewCarousel from '../ProjectViewCarousel/ProjectViewCarousel' -import { SynapsePoweredPortal } from './SynapsePoweredPortal' -import { useSynapseContext } from '../../utils' -import SynapseFullLogo from '../../assets/icons/SynapseFullLogo' -import IconSvg from '../IconSvg/IconSvg' -import { SynapseFeatureItem } from './SynapseFeatureItem' -import AccessDataAnywhere from '../../assets/icons/AccessDataAnywhere' -import QueryStructuredData from '../../assets/icons/QueryStructuredData' -import CommunicateFindings from '../../assets/icons/CommunicateFindings' -import RecordProvenance from '../../assets/icons/RecordProvenance' -import ShareYourResearch from '../../assets/icons/ShareYourResearch' -import MintDoi from '../../assets/icons/MintDoi' -import SynapsePlans from './SynapsePlans' -import { useOneSageURL } from '../../utils/hooks/useOneSageURL' - -export type SynapseHomepageProps = { - projectViewId: string -} - -const buttonSx = { - textAlign: 'center', -} - -export function SynapseHomepage({ projectViewId }: SynapseHomepageProps) { - const { accessToken } = useSynapseContext() - const LOGIN_LINK = '/LoginPlace:0' - const registrationLink = useOneSageURL('/register1') - - // 'v' will resolve to the user's profile ID - const DASHBOARD_LINK = '/Profile:v/projects' - - const contactUsHref = - 'https://sagebionetworks.jira.com/servicedesk/customer/portal/9/group/26/create/162' - - return ( -
-
-
-
-
- -
-
- Organize - - {' '} - your digital research assets. - -
-
- Get credit - for your research. -
-
- Collaborate - - {' '} - with your colleagues and the public. - -
-
- -
- {accessToken ? ( - <> - - - - ) : ( - <> - - - - )} -
-
-
-
-
- - - Search Synapse Projects - -
-
-
- - Synapse Features - - - - } - title="Access your data anywhere" - description={ - - Synapse provides APIs to store or access your data from the - web or programmatically via one of our supported analytical - clients ( - - R - - ,{' '} - - Python - - ,{' '} - - Command Line - - ). - - } - /> - - - } - title="Communicate your findings" - description={ - - Use the Synapse Wiki services to communicate your - Project's research findings by embedding rich content - such as images, Tables, Provenance, and even LaTeX equations. - - } - /> - - - } - title="Record Provenance" - description={ - - Synapse provides tools to record and display provenance of - your analysis - giving you credit for each step of the work - you do! - - } - /> - - - } - title="Query Structured Data" - description={ - - Use Synapse Tables to query structured data right from your - web browser, or from any analytical client. - - } - /> - - - } - title="Share Your Research" - description={ - - New Synapse Projects are private by default - share with your - colleagues, collaborators, and even make your work public! - Create Synapse Teams to manage your collaborations. - - } - /> - - - } - title="Mint a DOI" - description={ - - A digital object identifier (DOI) provides a persistent and - easy way to reference your digital assets in publications - - including data, code, or analysis results. - - } - /> - - -
-
-
- - Synapse In Action - - -
-
-
-
- - Powered By Synapse - -

- Our knowledge portals are community-specific interfaces that enable - researchers to explore and share data, analyses, and tools. -

-
- - - - - - -
-
-
-
-
- -
- Our Data Sharing Principles -
-

- Synapse operates under a complete governance process that - includes well-documented Terms and Conditions of Use, guidelines - and operating procedures, privacy enhancing technologies, as - well as the right of audit and external reviews. -

-
- -
-
-
-
-
- -
- - Synapse Easily Integrates Into Your Workflow - -
-

- Create Projects, upload & download Files, generate - Provenance, query Tables, create Wikis and more all from the - comfort of your own code using Synapse analytical clients. -

-
- -
-
-
-
-
- - Sage’s Data Platform Offerings - -

- Sage offers multiple service plans to help you with your data - sharing needs including NIH Data Management and Sharing plans. -
- - Learn more - {' '} - and{' '} - - contact us - {' '} - to get started. -

- - - View Frequently Asked Questions - - {/* SWC-6708: Pricing table release, change to be a simple image */} - -
-
-
-
- - Our Partners - -
-
- - National Heart, Lung, and Blood Institute; NIH - -
-
- - National Institute of Mental Health; NIH - -
-
- - Alfred P. Sloan Foundation - -
-
- - National Institute on Aging; NIH - -
-
- - Children's Tumor Foundation - -
-
- - Neurofibromatosis Therapeutic Acceleration Program - -
-
- - Gilbert Family Foundation - -
-
-
-
-
- ) -} - -export default SynapseHomepage diff --git a/packages/synapse-react-client/src/components/SynapseHomepage/SynapsePlans.tsx b/packages/synapse-react-client/src/components/SynapseHomepage/SynapsePlans.tsx deleted file mode 100644 index 6b1989699eb..00000000000 --- a/packages/synapse-react-client/src/components/SynapseHomepage/SynapsePlans.tsx +++ /dev/null @@ -1,472 +0,0 @@ -import { styled, useMediaQuery, useTheme, SxProps } from '@mui/material' -import { Box, Typography } from '@mui/material' -import IconSvg from '../IconSvg' -import { StandardCSSProperties } from '@mui/system' - -const centerProps: StandardCSSProperties = { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -} -const RowDescriptionCell = styled(Box)({ - ...centerProps, - backgroundColor: '#f2f2f2', -}) -const BasicPlanCell = styled(Box)({ - ...centerProps, - backgroundColor: '#def0fc', -}) -const SelfManagedPlanCell = styled(Box)({ - ...centerProps, - backgroundColor: '#ffefda', -}) -const DataCoordinationPlanCell = styled(Box)({ - backgroundColor: '#e6f7e7', - '& div': { - padding: '50px 20px', - }, - '& p': { textAlign: 'left' }, - paddingLeft: '30px', - paddingRight: '30px', - paddingBottom: '25px', -}) - -const SynapsePlans = () => { - const theme = useTheme() - const isMobileView = useMediaQuery(theme.breakpoints.down('md')) - - const dataCoordinationPlanHeader = ( - - Data Coordination Plan - - ) - const dataCoordinationPlanCellContent = ( - - - Contact Sage to Customize - - - Additional Features Include: - - -
    -
  • Unlimited data allowance and custom data storage locations.
    • -
  • Fully managed project set-up, access and documentation.
    • -
  • Tailor-made portal interface for data exploration.
    • -
  • - Seamless data integration with client's existing computational - tools and workflows. -
    • -
  • - Customized governance support and specific geographical and - institutional data policies.{' '} -
    • -
  • - Dedicated Sage point of contact for unlimited, end-to-end project - support. -
    • -
- - - ) - const gridTemplateColumns = isMobileView - ? '1fr 1fr 1fr 1fr' - : '1fr 1fr 1fr 1fr 1fr' - const tableGridProps: SxProps = { - display: 'grid', - columnGap: '2px', - rowGap: '2px', - gridTemplateRows: 'auto', - '& p': { fontSize: '14px', marginBottom: '5px' }, - '& div': { padding: '10px 10px 5px 10px' }, - } - return ( - - - {/* header */} - - - - Basic Hosting Plan - - - - - Self Managed Plan - - - {!isMobileView && ( - - {dataCoordinationPlanHeader} - - )} - {/* end header */} - - User Content Limit - - - - - <=100 GB - - - (Unlimited with
- custom storage) - - - - - - - <=100 GB - - - (Unlimited with
- custom storage) - - - - - - - <=500 GB - - - (Unlimited with
- custom storage) - - - - {/* Data Coordination Plan single cell */} - {!isMobileView && ( - - {dataCoordinationPlanCellContent} - - )} - - Storage Environment - - - - Sage Managed
- Individual Storage* - - - - - Sage Managed
- Individual Storage* - - - - - Sage Managed
- Individual Storage* - - - - - Secure Cloud Storage - - - N/A - - - Duration of Plan - - - Duration of Plan - - - - Egress Limit ** - - - 4 TB/Year** - - - 4 TB/Year** - - - 20 TB/Year** - - - - - Project Set Up +
- Governance Consulting - - - - N/A - - - 15 Hours - - - 15 Hours - - - - - NIH Data Management -
- Sharing Plan Support ** - - - - N/A - - - - - ** - - - - - - ** - - - - - Help Desk Support - - - N/A - - - 25 Hours - - - 25 Hours - - - - - DOIs for Publications & Grants - - - - - - - - - - - - - - - - - - - - - Access to Online -
- Documentation & Tutorials - - - - - - - - - - - - - - - - - - - - - Project Wikis, Discussion Forum - - - - - - - - - - - - - - - - - - - - - User Content Access Management - - - - Self-Service - - - Self-Service - - - Self-Service - - - - - Sharing Content Through -
- Controlled Access - - - - N/A - - - - - - - - - - - - - - - Country-Specific -
- Storage Localization - - - - - Only with -
- Custom Storage - - - - - Only with -
- Custom Storage - - - - - Only with -
- Custom Storage - - - - - Contract Length - - - N/A - - - 5 Years - - - 5 Years - - - - Plans Start At - - - - Free - - - - - $15,000 - - - - - $30,000 - - - - {isMobileView && ( - - - {dataCoordinationPlanHeader} - - - {dataCoordinationPlanCellContent} - - - )} - - - * Storage location is US-based by default. Location and cost may be - customized, and size limitations may be removed if using a user-funded - cloud storage environment (contact us for more information). - - - ** Refer to FAQ - - - ) -} - -export default SynapsePlans diff --git a/packages/synapse-react-client/src/components/SynapseHomepage/SynapsePoweredPortal.tsx b/packages/synapse-react-client/src/components/SynapseHomepage/SynapsePoweredPortal.tsx deleted file mode 100644 index a43c391d189..00000000000 --- a/packages/synapse-react-client/src/components/SynapseHomepage/SynapsePoweredPortal.tsx +++ /dev/null @@ -1,35 +0,0 @@ -export type SynapsePoweredPortalProps = { - name: string - description: string - url: string - logoUrl: string -} - -export function SynapsePoweredPortal({ - name, - description, - url, - logoUrl, -}: SynapsePoweredPortalProps) { - return ( -
-
- -
-

{name}

-

{description}

-

- - View Portal - -

-
-
-
- ) -} diff --git a/packages/synapse-react-client/src/components/SynapseHomepage/index.ts b/packages/synapse-react-client/src/components/SynapseHomepage/index.ts deleted file mode 100644 index cf9962fee75..00000000000 --- a/packages/synapse-react-client/src/components/SynapseHomepage/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import SynapseHomepage from './SynapseHomepage' -export { SynapseHomepage } -export default SynapseHomepage diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx index db48abcd900..cb658bbc63a 100644 --- a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx +++ b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx @@ -460,6 +460,27 @@ export function SynapseHomepageV2({ gotoPlace }: SynapseHomepageV2Props) { Featured datasets + + + .styled-svg-wrapper { - margin-right: 10px; - } - &:not(.MuiButton-root):link:hover { - border-bottom: none; - } - } - } - .SignUpButtonContainer { - display: flex; - flex-direction: column; - - .MuiButton-root { - width: 333px; - font-weight: bold; - margin-top: 13px; - min-width: fit-content; - } - } - .HeroContainer { - margin: auto; - max-width: 1400px; - } - - .SectionGraphic { - flex-shrink: 1; - } - - @media (max-width: map-get(SRC.$breakpoints, 'medium')) { - &__Section { - padding: 30px 40px; - } - - .MuiButton-root { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - } - - &__Section > .FlexContainer, - .FlexContainerReverse, - .SignUpButtonContainer { - flex-direction: column; - .MuiButton-root { - margin-top: 15px; - display: block; - width: unset; - } - } - h2 { - margin-top: 25px; - } - .HeroContainer { - .HeroImage { - max-height: 250px; - max-width: 100%; - } - .HeadlineSentence { - margin-top: 10px; - margin-bottom: 10px; - } - .Headline-Strong { - font-size: 21px; - line-height: 34px; - } - .Headline-Light { - font-size: 21px; - line-height: 21px; - } - } - .SectionGraphic { - display: block; - margin: auto; - max-height: 150px; - max-width: 100%; - margin-bottom: 11px; - } - - &__MarginAutoDesktop { - margin: unset; - } - } - - @media (min-width: map-get(SRC.$breakpoints, 'medium') + 1) { - &__Section { - padding: 50px 60px; - } - - &__Section > .FlexContainer, - .FlexContainerReverse { - .MuiButton-root { - min-width: fit-content; - width: fit-content; - padding-left: 20px; - padding-right: 20px; - margin-top: 35px; - } - - .SectionGraphic { - max-height: 270px; - max-width: 450px; - } - } - - &__Section > .FlexContainer { - display: flex; - flex-direction: row; - justify-content: space-between; - margin: auto; - max-width: 1400px; - - .SectionGraphic { - margin-right: 30px; - align-self: center; - } - } - - &__Section > .FlexContainerReverse { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - margin: auto; - max-width: 1400px; - .SectionGraphic { - margin-left: 30px; - align-self: center; - } - } - - &__MarginAutoDesktop { - margin: auto; - } - } - @media (min-width: 1101px) { - .HeroContainer { - display: grid; - grid-template-columns: auto auto; - grid-template-rows: 1fr; - align-items: center; - - .HeroImage { - width: 700px; - margin-left: 30px; - grid-column-start: 2; - grid-column-end: 3; - grid-row-start: 1; - grid-row-end: 3; - } - - .Headline { - grid-column-start: 1; - grid-column-end: 2; - grid-row-start: 1; - grid-row-end: 2; - - display: flex; - flex-direction: column; - margin-bottom: 30px; - } - - .SignUpButtonContainer { - grid-column-start: 1; - grid-column-end: 2; - grid-row-start: 2; - grid-row-end: 3; - } - } - } - - @media (max-width: 1100px) { - // No grid for the HeroContainer at <= 1100px - .HeroImage { - max-height: 250px; - max-width: 100%; - margin-top: 15px; - margin-bottom: 15px; - } - } - - .Headline-Strong { - font-family: 'DM Sans'; - font-weight: 700; - font-size: 24px; - line-height: 34px; - } - - .Headline-Light { - font-family: 'DM Sans'; - font-weight: 300; - font-size: 24px; - line-height: 34px; - } - - .SectionTextFlexContainer { - display: flex; - flex-direction: column; - max-width: 700px; - } - - h2 { - line-height: 28.8px; - font-weight: 700; - font-size: 24px; - margin-bottom: 15px; - } - - h3 { - line-height: 21px; - font-weight: 700; - font-size: 16px; - margin-bottom: 3px; - margin-top: 10px; - } - - .SectionBody { - line-height: 21px; - font-weight: 400; - font-size: 14px; - margin-bottom: 3px; - margin-top: 10px; - } - - .ClientFlexContainer { - display: flex; - justify-content: space-around; - align-items: center; - flex-grow: 1; - flex-shrink: 0; - max-width: 550px; - height: unset; - - .ClientFlexItem { - display: flex; - flex-direction: column; - align-items: center; - margin: 10px; - color: unset; - text-align: center; - - img, - svg { - height: 54px; - margin-bottom: 8px; - } - } - } - - &__FlexColumn { - display: flex; - flex-direction: column; - } - - .PartnerFlexContainer { - display: inline-flex; - flex-wrap: wrap; - align-content: center; - .PartnerFlexItem { - margin: 0 auto; - justify-content: space-around; - align-self: center; - a { - // respect height of content - display: inline-block; - } - img { - max-height: 100px; - max-width: 200px; - margin: 15px; - } - } - } - - .PoweredBySynapseFlexContainer { - display: inline-flex; - flex-wrap: wrap; - align-content: center; - max-width: 1300px; - .PoweredBySynapseItem { - margin: 0 auto; - justify-content: space-around; - align-self: center; - max-width: 350px; - .PoweredBySynapseItemGrid { - display: grid; - margin: 20px 10px; - grid-template-columns: 70px auto; - .logo { - grid-column: 1 / span 1; - justify-self: center; - } - .body { - grid-column: 2 / span 1; - margin: 0px 9px 0px 15px; - } - .title { - margin: 0px 0px 10px 0px; - } - .title, - .description { - text-align: left; - } - .link { - float: left; - } - } - } - } -} diff --git a/packages/synapse-react-client/src/umd.index.ts b/packages/synapse-react-client/src/umd.index.ts index 307e63c6344..14dca78ded8 100644 --- a/packages/synapse-react-client/src/umd.index.ts +++ b/packages/synapse-react-client/src/umd.index.ts @@ -30,7 +30,6 @@ import PlotlyWrapper from './components/PlotlyWrapper' import { ProgrammaticInstructionsModal } from './components/ProgrammaticInstructionsModal/ProgrammaticInstructionsModal' import QueryWrapperPlotNav from './components/QueryWrapperPlotNav/QueryWrapperPlotNav' import StatisticsPlot from './components/StatisticsPlot' -import { SynapseHomepage } from './components/SynapseHomepage' import { SynapseHomepageV2, SynapsePlansPage, @@ -125,7 +124,6 @@ const SynapseComponents = { TermsAndConditions, PageProgress, ProjectViewCarousel, - SynapseHomepage, SynapseHomepageV2, SynapsePlansPage, SynapseFooter,