synapse-react-client/dist/containers/SynapseHomepage.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SynapseHomepage = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var RLogo_1 = (0, tslib_1.__importDefault)(require("../assets/icons/RLogo"));
var Python_1 = (0, tslib_1.__importDefault)(require("../assets/icons/Python"));
var Terminal_1 = (0, tslib_1.__importDefault)(require("../assets/icons/Terminal"));
var Java_1 = (0, tslib_1.__importDefault)(require("../assets/icons/Java"));
var ProjectViewCarousel_1 = (0, tslib_1.__importDefault)(require("./home_page/project_view_carousel/ProjectViewCarousel"));
var getEndpoint_1 = require("../utils/functions/getEndpoint");
var SynapsePoweredPortal_1 = require("./SynapsePoweredPortal");
var SynapseContext_1 = require("../utils/SynapseContext");
var SynapseFullLogo_1 = (0, tslib_1.__importDefault)(require("../assets/icons/SynapseFullLogo"));
var IconSvg_1 = (0, tslib_1.__importDefault)(require("./IconSvg"));
var SynapseHomepage = function (_a) {
    var projectViewId = _a.projectViewId;
    var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
    var LOGIN_LINK = (0, getEndpoint_1.getEndpoint)(getEndpoint_1.BackendDestinationEnum.PORTAL_ENDPOINT) + "#!LoginPlace:0";
    var REGISTRATION_LINK = (0, getEndpoint_1.getEndpoint)(getEndpoint_1.BackendDestinationEnum.PORTAL_ENDPOINT) + "#!RegisterAccount:0";
    // 'v' will resolve to the user's profile ID
    var DASHBOARD_LINK = (0, getEndpoint_1.getEndpoint)(getEndpoint_1.BackendDestinationEnum.PORTAL_ENDPOINT) + "#!Profile:v/projects";
    return (react_1.default.createElement("div", { className: "bootstrap-4-backport SynapseHomepage" },
        react_1.default.createElement("div", { className: "SynapseHomepage__Section PrimaryBackground" },
            react_1.default.createElement("div", { className: "HeroContainer" },
                react_1.default.createElement("div", { className: "Headline WhiteText" },
                    react_1.default.createElement("div", { className: "SynapseLogoContainer" },
                        react_1.default.createElement(SynapseFullLogo_1.default, null)),
                    react_1.default.createElement("div", { className: "HeadlineSentence" },
                        react_1.default.createElement("span", { className: "Headline-Strong" }, "Organize"),
                        react_1.default.createElement("span", { className: "Headline-Light" },
                            ' ',
                            "your digital research assets.")),
                    react_1.default.createElement("div", { className: "HeadlineSentence" },
                        react_1.default.createElement("span", { className: "Headline-Strong" }, "Get credit"),
                        react_1.default.createElement("span", { className: "Headline-Light" }, " for your research.")),
                    react_1.default.createElement("div", { className: "HeadlineSentence" },
                        react_1.default.createElement("span", { className: "Headline-Strong" }, "Collaborate"),
                        react_1.default.createElement("span", { className: "Headline-Light" },
                            ' ',
                            "with your colleagues and the public."))),
                react_1.default.createElement("img", { src: "https://s3.amazonaws.com/static.synapse.org/images/homepage-composite.svg", className: "HeroImage", alt: "" }),
                react_1.default.createElement("div", { className: "SignUpButtonContainer" }, accessToken ? (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(react_bootstrap_1.Button, { href: DASHBOARD_LINK, variant: "light" }, "View Your Dashboard"),
                    react_1.default.createElement(react_bootstrap_1.Button, { onClick: function () {
                            return window.open('https://help.synapse.org/docs/Getting-Started.2055471150.html', '_blank', 'noopener');
                        }, variant: "primary-900" }, "Get Help With Synapse"))) : (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(react_bootstrap_1.Button, { href: LOGIN_LINK, variant: "light" }, "Log in to Synapse"),
                    react_1.default.createElement(react_bootstrap_1.Button, { href: REGISTRATION_LINK, variant: "primary-900" }, "Register Now")))))),
        react_1.default.createElement("div", { className: "SearchLinkBar SynapseHomepage__Section" },
            react_1.default.createElement("div", { className: "FlexContainer" },
                react_1.default.createElement("a", { href: "#!Search:", rel: "noopener noreferrer", className: "SRC-whiteText ignoreLink" },
                    react_1.default.createElement(IconSvg_1.default, { options: { icon: 'searchOutlined' } }),
                    "Search Synapse Projects"))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section WhiteBackground" },
            react_1.default.createElement("div", { className: "FlexContainerReverse" },
                react_1.default.createElement("img", { src: "https://s3.amazonaws.com/static.synapse.org/images/explore-research.svg", className: "SectionGraphic", alt: "" }),
                react_1.default.createElement("div", { className: "SectionTextFlexContainer" },
                    react_1.default.createElement("h2", null, "Organize Your Digital Research Assets"),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("h3", null, "Access Your Data Anywhere"),
                        react_1.default.createElement("p", { className: "SectionBody" },
                            "Synapse provides APIs to store or access your data from the web or programmatically via one of our supported analytical clients (",
                            react_1.default.createElement("a", { href: "https://r-docs.synapse.org/", target: "_blank", rel: "noopener noreferrer" }, "R"),
                            ",",
                            ' ',
                            react_1.default.createElement("a", { href: "https://python-docs.synapse.org/", target: "_blank", rel: "noopener noreferrer" }, "Python"),
                            ",",
                            ' ',
                            react_1.default.createElement("a", { href: "https://python-docs.synapse.org/build/html/CommandLineClient.html", target: "_blank", rel: "noopener noreferrer" }, "Command Line"),
                            ").")),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("h3", null, "Query Structured Data"),
                        react_1.default.createElement("p", { className: "SectionBody" }, "Use Synapse Tables to query structured data right from your web browser or from any analytical client.")),
                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", href: accessToken ? DASHBOARD_LINK : REGISTRATION_LINK }, accessToken ? 'View Your Dashboard' : 'Get Started Now')))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section OffWhiteBackground" },
            react_1.default.createElement("div", { className: "FlexContainer" },
                react_1.default.createElement("img", { src: "https://s3.amazonaws.com/static.synapse.org/images/certified-microscope.svg", className: "SectionGraphic", alt: "" }),
                react_1.default.createElement("div", { className: "SectionTextFlexContainer" },
                    react_1.default.createElement("h2", null, "Get Credit For Your Research"),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("h3", null, "Record Provenance"),
                        react_1.default.createElement("p", { className: "SectionBody" }, "Synapse provides tools to record and display Provenance for each step of your analysis.")),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("h3", null, "Mint a DOI"),
                        react_1.default.createElement("p", { className: "SectionBody" }, "A digital object identifier (DOI) provides a persistent and easy way to reference your digital assets in publications \u2014 including data, code, or analysis results.")),
                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", href: accessToken ? DASHBOARD_LINK : REGISTRATION_LINK }, accessToken ? 'View Your Dashboard' : 'Get Started Now')))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section WhiteBackground" },
            react_1.default.createElement("div", { className: "FlexContainerReverse" },
                react_1.default.createElement("img", { src: "https://s3.amazonaws.com/static.synapse.org/images/collaborate.svg", className: "SectionGraphic", alt: "" }),
                react_1.default.createElement("div", { className: "SectionTextFlexContainer" },
                    react_1.default.createElement("h2", null, "Collaborate"),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("h3", null, "Communicate Your Findings"),
                        react_1.default.createElement("p", { className: "SectionBody" }, "Use the Synapse Wiki services to communicate your findings by embedding rich content such as images, Tables, Provenance, and LaTeX equations.")),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("h3", null, "Share Your Research"),
                        react_1.default.createElement("p", { className: "SectionBody" }, "New Synapse Projects are private by default \u2014 share with your colleagues, collaborators, or make your work public! Create Synapse Teams to manage your collaborations.")),
                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", href: accessToken ? DASHBOARD_LINK : REGISTRATION_LINK }, accessToken ? 'View Your Dashboard' : 'Get Started Now')))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section OffWhiteBackground" },
            react_1.default.createElement("div", { className: "FlexContainer" },
                react_1.default.createElement("img", { src: "https://s3.amazonaws.com/static.synapse.org/images/data-justice.svg", className: "SectionGraphic", alt: "" }),
                react_1.default.createElement("div", { className: "SectionTextFlexContainer" },
                    react_1.default.createElement("h2", null, "Our Data Sharing Principles"),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("p", { className: "SectionBody" }, "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.")),
                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", onClick: function () {
                            return window.open('https://help.synapse.org/docs/Governance-Overview.2009597114.html', '_blank', 'noopener');
                        } }, "Learn More About Data Sharing")))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section WhiteBackground" },
            react_1.default.createElement("div", { className: "FlexContainerReverse" },
                react_1.default.createElement("div", { className: "ClientFlexContainer SectionGraphic" },
                    react_1.default.createElement("a", { className: "ClientFlexItem", href: "https://r-docs.synapse.org/", target: "_blank", rel: "noopener noreferrer" },
                        react_1.default.createElement(RLogo_1.default, null),
                        react_1.default.createElement("span", null, "R Client")),
                    react_1.default.createElement("a", { className: "ClientFlexItem", href: "https://python-docs.synapse.org/", target: "_blank", rel: "noopener noreferrer" },
                        react_1.default.createElement(Python_1.default, null),
                        react_1.default.createElement("span", null, "Python Client")),
                    react_1.default.createElement("a", { className: "ClientFlexItem", href: "https://python-docs.synapse.org/build/html/CommandLineClient.html", target: "_blank", rel: "noopener noreferrer" },
                        react_1.default.createElement(Terminal_1.default, null),
                        react_1.default.createElement("span", null, "Command Line Client")),
                    react_1.default.createElement("a", { className: "ClientFlexItem", href: "https://github.com/Sage-Bionetworks/Synapse-Repository-Services/blob/develop/client/synapseJavaClient/src/main/java/org/sagebionetworks/client/SynapseClient.java", target: "_blank", rel: "noopener noreferrer" },
                        react_1.default.createElement(Java_1.default, null),
                        react_1.default.createElement("span", null, "Java Client"))),
                react_1.default.createElement("div", { className: "SectionTextFlexContainer" },
                    react_1.default.createElement("h2", null, "Synapse Easily Integrates Into Your Workflow"),
                    react_1.default.createElement("div", null,
                        react_1.default.createElement("p", { className: "SectionBody" }, "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.")),
                    react_1.default.createElement(react_bootstrap_1.Button, { onClick: function () {
                            return window.open('https://help.synapse.org/docs/API-Documentation.1985184035.html', '_blank', 'noopener');
                        }, variant: "primary" }, "Learn More About Synapse APIs")))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section OffWhiteBackground" },
            react_1.default.createElement("div", { className: "SynapseHomepage__Section__Centered" },
                react_1.default.createElement("h2", null, "Synapse In Action"),
                react_1.default.createElement(ProjectViewCarousel_1.default, { entityId: projectViewId }))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section WhiteBackground" },
            react_1.default.createElement("div", { className: "SynapseHomepage__Section__Centered" },
                react_1.default.createElement("h2", null, "Powered By Synapse"),
                react_1.default.createElement("p", null, "Our knowledge portals are community-specific interfaces that enable researchers to explore and share data, analyses, and tools."),
                react_1.default.createElement("div", { className: "PoweredBySynapseFlexContainer" },
                    react_1.default.createElement(SynapsePoweredPortal_1.SynapsePoweredPortal, { logoUrl: "https://s3.amazonaws.com/static.synapse.org/images/ADKnowledgePortal.svg", name: "AD Knowledge Portal", description: "Data and tools for the study of Alzheimer's disease, related dementias, and healthy aging.", url: "https://adknowledgeportal.synapse.org/" }),
                    react_1.default.createElement(SynapsePoweredPortal_1.SynapsePoweredPortal, { logoUrl: "https://s3.amazonaws.com/static.synapse.org/images/BSMN.svg", name: "BSMN Portal", description: "Data and tools to study the role of brain somatic mosaicism in neuropsychiatric disease.", url: "https://bsmn.synapse.org/" }),
                    react_1.default.createElement(SynapsePoweredPortal_1.SynapsePoweredPortal, { logoUrl: "https://s3.amazonaws.com/static.synapse.org/images/CSBC.svg", name: "Cancer Complexity Knowledge Portal", description: "Approaches, data, and tools to address important questions in basic and translational cancer research.", url: "https://cancercomplexity.synapse.org/" }),
                    react_1.default.createElement(SynapsePoweredPortal_1.SynapsePoweredPortal, { logoUrl: "https://s3.amazonaws.com/static.synapse.org/images/dHealth.svg", name: "dHealth Digital Health Knowledge Portal", description: "Discover and download digital and mobile health data, tools, benchmarked outcomes and digital biomarkers.", url: "https://dhealth.synapse.org/" }),
                    react_1.default.createElement(SynapsePoweredPortal_1.SynapsePoweredPortal, { logoUrl: "https://s3.amazonaws.com/static.synapse.org/images/NFPortal.svg", name: "NF Data Portal", description: "Datasets, analysis tools, resources, and publications related to neurofibromatosis and schwannomatosis.", url: "https://nf.synapse.org/" }),
                    react_1.default.createElement(SynapsePoweredPortal_1.SynapsePoweredPortal, { logoUrl: "https://s3.amazonaws.com/static.synapse.org/images/Psychencode.svg", name: "Psychencode Knowledge Portal", description: "Investigation and large-scale data sets of genomic influences on neuropsychiatric disease.", url: "https://psychencode.synapse.org/" })))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section OffWhiteBackground" },
            react_1.default.createElement("div", { className: "SynapseHomepage__Section__Centered" },
                react_1.default.createElement("h2", null, "Our Partners"),
                react_1.default.createElement("div", { className: "PartnerFlexContainer" },
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.nhlbi.nih.gov/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "National Heart, Lung, and Blood Institute; NIH", src: "https://s3.amazonaws.com/static.synapse.org/images/nih-heart.svg", width: '186px' }))),
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.nimh.nih.gov/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "National Institute of Mental Health; NIH", src: "https://s3.amazonaws.com/static.synapse.org/images/nih-mental.png", width: "141px" }))),
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.sloan.org/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "Alfred P. Sloan Foundation", src: "https://s3.amazonaws.com/static.synapse.org/images/sloan.svg", width: '186px' }))),
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.nia.nih.gov/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "National Institute on Aging; NIH", src: "https://s3.amazonaws.com/static.synapse.org/images/nih-aging.svg", width: '186px' }))),
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.lsdfa.org/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "Life Sciences Discovery Fund", src: "https://s3.amazonaws.com/static.synapse.org/images/life-sciences.svg", width: '186px' }))),
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.ctf.org/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "Children's Tumor Foundation", src: "https://s3.amazonaws.com/static.synapse.org/images/ctf.svg", width: '186px' }))),
                    react_1.default.createElement("div", { className: "PartnerFlexItem" },
                        react_1.default.createElement("a", { href: "http://www.n-tap.org/", target: "_blank", rel: "noopener noreferrer" },
                            react_1.default.createElement("img", { alt: "Neurofibromatosis Therapeutic Acceleration Program", src: "https://s3.amazonaws.com/static.synapse.org/images/ntap.png", width: "113px" })))))),
        react_1.default.createElement("div", { className: "SynapseHomepage__Section PrimaryBackground" },
            react_1.default.createElement("div", { className: "SynapseHomepage__Section__Centered SynapseHomepage__FlexColumn" },
                react_1.default.createElement("h2", { className: "WhiteText" }, "Sign up for Synapse today"),
                react_1.default.createElement("div", { className: "SignUpButtonContainer SynapseHomepage__MarginAutoDesktop" }, accessToken ? (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(react_bootstrap_1.Button, { href: DASHBOARD_LINK, variant: "light" }, "View Your Dashboard"),
                    react_1.default.createElement(react_bootstrap_1.Button, { onClick: function () {
                            return window.open('https://help.synapse.org/docs/Getting-Started.2055471150.html', '_blank', 'noopener');
                        }, variant: "primary-900" }, "Get Help With Synapse"))) : (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(react_bootstrap_1.Button, { href: LOGIN_LINK, variant: "light" }, "Log in to Synapse"),
                    react_1.default.createElement(react_bootstrap_1.Button, { href: REGISTRATION_LINK, variant: "primary-900" }, "Register Now"))))))));
};
exports.SynapseHomepage = SynapseHomepage;
//# sourceMappingURL=SynapseHomepage.js.map