@openneuro/app 4.2.0 → 4.2.1

package/src/scripts/front-page/front-page-tabs.jsx

@@ -1,166 +0,0 @@
-import React from 'react'
-
-import tab_get_data from './assets/tab-get_data.png'
-import get_data_browse from './assets/get_data_browse.png'
-import get_data_download from './assets/get_data_download.png'
-import tab_share_data from './assets/tab-share_data.png'
-import share_data_collaborate from './assets/share_data_collaborate.png'
-import share_data_publish from './assets/share_data_publish.png'
-import tab_use_data from './assets/tab-use_data.png'
-import use_data_analyze from './assets/use_data_analyze.png'
-import use_data_snapshot from './assets/use_data_snapshot.png'
-
-class FrontPageTabs extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      currentTab: null,
-    }
-  }
-
-  // life cycle events --------------------------------------------------
-  render() {
-    return (
-      <div id="data-tabs">
-        <ul className="nav nav-tabs">{this._tabs()}</ul>
-        {this._tabContent(this.state.currentTab)}
-      </div>
-    )
-  }
-
-  // template functions -------------------------------------------------------
-
-  _tabs() {
-    return this._tabData().map((tab, index) => {
-      return (
-        <li key={index}>
-          <div
-            className={
-              this.state.currentTab == index ? 'active thumbnail' : 'thumbnail'
-            }
-            onClick={this._showTabContent.bind(this, index)}>
-            <img src={tab.icon} alt={tab.header} />
-            <div className="caption">
-              <h3>{tab.header}</h3>
-              <p>{tab.abstract}</p>
-            </div>
-            <div className="more">
-              <span className="text">
-                {this.state.currentTab == index ? 'less' : 'more'}
-              </span>
-            </div>
-          </div>
-        </li>
-      )
-    })
-  }
-
-  // custom methods -------------------------------------------------------
-
-  _tabContent(currentTab) {
-    if (currentTab == null) {
-      return false
-    } else {
-      const tab = this._tabData()[currentTab]
-      return (
-        <div className="tab-content">
-          <div className="row">
-            <div className="col-md-6">
-              <div className="row">
-                <div className="img-wrap">
-                  <img className={tab.firstImageClass} src={tab.firstImage} />
-                </div>
-                <div className="caption">
-                  <h3>{tab.firstHeader}</h3>
-                  <p>{tab.firstDescription}</p>
-                </div>
-              </div>
-            </div>
-            <div className="col-md-6">
-              <div className="row">
-                <div className="img-wrap">
-                  <img className={tab.secondImageClass} src={tab.secondImage} />
-                </div>
-                <div className="caption">
-                  <h3>{tab.secondHeader}</h3>
-                  <p>{tab.secondDescription}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  }
-
-  _showTabContent(tab) {
-    if (tab == this.state.currentTab) {
-      this.setState({ currentTab: null })
-    } else {
-      this.setState({ currentTab: tab })
-    }
-  }
-
-  // data -----------------------------------------------------------------
-
-  _tabData() {
-    return [
-      {
-        header: 'Get Data',
-        abstract:
-          'Browse and download datasets from contributors all over the world.',
-        icon: tab_get_data,
-        firstHeader: 'Browse Data',
-        firstDescription: (
-          <span>
-            Browse and explore public datasets and analyses from a wide range of
-            global contributors. Our collection of{' '}
-            <strong>{this.state.datasetCount}</strong> public datasets continues
-            to grow as more and more become{' '}
-            <a href="http://bids.neuroimaging.io/">BIDS</a> compatible.
-          </span>
-        ),
-        firstImage: get_data_browse,
-        firstImageClass: 'browse',
-        secondHeader: 'Download Data',
-        secondDescription:
-          'Download and use public data to create new datasets and run your own analyses.',
-        secondImage: get_data_download,
-        secondImageClass: 'download',
-      },
-      {
-        header: 'Share Data',
-        abstract:
-          'Upload your data to an NIH Brain Initiative approved repository.',
-        icon: tab_share_data,
-        firstHeader: 'Collaborate',
-        firstDescription:
-          'Privately share your data so your colleagues can view and edit your work.',
-        firstImage: share_data_collaborate,
-        firstImageClass: 'collabotate',
-        secondHeader: 'Publish',
-        secondDescription:
-          'Publish your dataset where anyone can view, download, and run analyses on it.',
-        secondImage: share_data_publish,
-        secondImageClass: 'publish',
-      },
-      {
-        header: 'Use Data',
-        abstract: 'Use our affiliated website to process applicable data.',
-        icon: tab_use_data,
-        firstHeader: 'Snapshot',
-        firstDescription:
-          'Create snapshots of your datasets to ensure past analyses remain reproducible as your datasets grow and change. Publish any of your snapshots while you continue work on your original data behind the scenes.',
-        firstImage: use_data_snapshot,
-        firstImageClass: 'snapshot',
-        secondHeader: 'Analyze',
-        secondDescription:
-          "Explore your published OpenNeuro dataset using BrainLife's computing network. Utilize their community driven apps to run a variety of analysis and processing software in the browser.",
-        secondImage: use_data_analyze,
-        secondImageClass: 'analyze',
-      },
-    ]
-  }
-}
-
-export default FrontPageTabs

package/src/scripts/front-page/front-page-top-datasets.jsx

@@ -1,203 +0,0 @@
-import { apm } from '../apm'
-import React from 'react'
-import PropTypes from 'prop-types'
-import { gql, useQuery } from '@apollo/client'
-import Spinner from '../common/partials/spinner.jsx'
-import { Link } from 'react-router-dom'
-import parseISO from 'date-fns/parseISO'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-import styled from '@emotion/styled'
-import Uppercase from '../styles/uppercase.jsx'
-
-const FontWeight600 = styled.span`
-  font-weight: 600;
-`
-
-const WhiteText = styled.div`
-  color: #fff;
-  font-size: 16px;
-  a {
-    color: #fff;
-    bottom-border: 1px dashed var(--tertiary);
-  }
-  a:hover {
-    color: #eee;
-  }
-`
-
-const PaddedRow = styled.div`
-  padding-bottom: 1em;
-`
-
-const TOP_VIEWED = gql`
-  query top_viewed_datasets {
-    datasets(
-      first: 5
-      orderBy: { views: descending }
-      filterBy: { public: true }
-    ) {
-      edges {
-        node {
-          id
-          analytics {
-            views
-          }
-          latestSnapshot {
-            tag
-            description {
-              Name
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-const RECENTLY_PUBLISHED = gql`
-  query recently_published_datasets {
-    datasets(
-      first: 5
-      orderBy: { publishDate: descending }
-      filterBy: { public: true }
-    ) {
-      edges {
-        node {
-          id
-          publishDate
-          latestSnapshot {
-            tag
-            description {
-              Name
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-const DatasetLink = ({ node }) => {
-  return (
-    <Link to={`/datasets/${node.id}/versions/${node.latestSnapshot.tag}`}>
-      {node.latestSnapshot.description.Name}
-    </Link>
-  )
-}
-
-DatasetLink.propTypes = {
-  node: PropTypes.object,
-}
-
-const FrontPageTopActive = ({ datasets }) => {
-  return (
-    <>
-      {datasets.map(({ node }, index) => (
-        <PaddedRow className="row" key={index}>
-          <div className="col-sm-2">
-            <FontWeight600>
-              <i className="fa fa-eye" />{' '}
-              {node.analytics.views.toLocaleString()}
-            </FontWeight600>
-          </div>
-          <div className="col-sm-10">
-            <DatasetLink node={node} />
-          </div>
-        </PaddedRow>
-      ))}
-      <PaddedRow className="row">
-        <div className="col-sm-2"> </div>
-        <div className="col-sm-10">
-          <Link to="/public/datasets">View More...</Link>
-        </div>
-      </PaddedRow>
-    </>
-  )
-}
-
-FrontPageTopActive.propTypes = {
-  datasets: PropTypes.array,
-}
-
-const FrontPageTopRecent = ({ datasets }) => {
-  return (
-    <>
-      {datasets.map(({ node }, index) => (
-        <PaddedRow className="row" key={index}>
-          <div className="col-sm-8">
-            <DatasetLink node={node} />
-          </div>
-          <div className="col-sm-4">
-            <FontWeight600>
-              <Uppercase>
-                {formatDistanceToNow(parseISO(node.publishDate))} ago
-              </Uppercase>
-            </FontWeight600>
-          </div>
-        </PaddedRow>
-      ))}
-    </>
-  )
-}
-
-FrontPageTopRecent.propTypes = {
-  datasets: PropTypes.array,
-}
-
-/**
- * @param {import('graphql').DocumentNode} query
- * @returns {function (import('@apollo/client').QueryResult): React.ReactElement}
- */
-export const FrontPageTopResult =
-  query =>
-  ({ loading, error, data }) => {
-    if (loading) {
-      return <Spinner active />
-    } else if (error || data.datasets == null) {
-      apm.captureError(error)
-      return <div>Failed to load top datasets, please try again later.</div>
-    } else {
-      // Remove any edges which could not be loaded
-      const edges = data.datasets.edges.filter(dataset => dataset !== null)
-      if (query === TOP_VIEWED) {
-        return <FrontPageTopActive datasets={edges} />
-      } else if (query === RECENTLY_PUBLISHED) {
-        return <FrontPageTopRecent datasets={edges} />
-      }
-    }
-  }
-
-const FrontPageTopQuery = ({ query }) => {
-  const result = useQuery(query, {
-    errorPolicy: 'all',
-  })
-  return FrontPageTopResult(query)(result)
-}
-
-FrontPageTopQuery.propTypes = {
-  query: PropTypes.object,
-}
-
-const FrontPageTopDatasets = () => (
-  <>
-    <div className="browse-pipelines">
-      <h3 className="browse-pipeline-header">Recent Activity</h3>
-      <div className="container">
-        <div className="row">
-          <WhiteText>
-            <div className="col-sm-6 mate-slide fade-in">
-              <h4>Most Active</h4>
-              <FrontPageTopQuery query={TOP_VIEWED} />
-            </div>
-            <div className="col-sm-6 mate-slide fade-in browse">
-              <h4>Recently Published</h4>
-              <FrontPageTopQuery query={RECENTLY_PUBLISHED} />
-            </div>
-          </WhiteText>
-        </div>
-      </div>
-    </div>
-  </>
-)
-
-export default FrontPageTopDatasets

package/src/scripts/front-page/front-page.jsx

@@ -1,95 +0,0 @@
-// dependencies -------------------------------------------------------
-
-import React from 'react'
-import { Link } from 'react-router-dom'
-import SearchInput from '../search/search-input'
-import FrontPageStats from './front-page-stats.jsx'
-import FrontPageTabs from './front-page-tabs.jsx'
-import Footer from '../common/partials/footer.jsx'
-import AdditionalInfo from './front-page-additional-info.jsx'
-import LoggedOut from '../authentication/logged-out.jsx'
-import AuthenticationButtons from '../authentication/buttons.jsx'
-import SubscribeToNewsletter from '../datalad/mutations/subscribe-to-newsletter.jsx'
-import FrontPageTopDatasets from './front-page-top-datasets.jsx'
-import Helmet from 'react-helmet'
-//configurables
-import { frontPage } from '../front-page/front-page-content'
-
-const LogoText = () => (
-  <div className="logo-text">
-    Open
-    <span className="logo-end">Neuro</span>
-  </div>
-)
-
-const LogoLayers = () => {
-  if (
-    frontPage.titlePanel &&
-    frontPage.titlePanel.logos &&
-    frontPage.titlePanel.logos.length
-  ) {
-    if (frontPage.titlePanel.logos.length > 1) {
-      const logoLayers = frontPage.titlePanel.logos.map((item, index) => {
-        return (
-          <img
-            key={index}
-            className={item.class}
-            src={item.src}
-            alt={item.alt}
-          />
-        )
-      })
-      return <div className="logo-layers">{logoLayers}</div>
-    } else {
-      const logo = frontPage.titlePanel.logos[0]
-      return <img className={logo.class} src={logo.src} alt={logo.alt} />
-    }
-  } else {
-    return null
-  }
-}
-
-const FrontPage = () => (
-  <span className="front-page is-front">
-    <Helmet>
-      <title>
-        {frontPage.pageDescription} - {frontPage.pageTitle}
-      </title>
-    </Helmet>
-    <div className="intro">
-      <div className="container">
-        <div className="intro-inner fade-in clearfix">
-          <div className="clearfix welcome-block">
-            <LogoLayers />
-            {frontPage.titlePanel.logoText ? <LogoText /> : null}
-            <h1>{frontPage.pageDescription}</h1>
-            <LoggedOut>
-              <div className="sign-in-block fade-in">
-                <AuthenticationButtons />
-              </div>
-            </LoggedOut>
-            <span className="frontpage-search">
-              <SearchInput />
-            </span>
-            <div className="browse-publicly">
-              <Link to="/public/datasets">
-                <span>Browse All Public Datasets</span>
-              </Link>
-            </div>
-            <div className="privacy-detail">
-              <span>{frontPage.titlePanel.privacyDetail}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <FrontPageStats />
-    {frontPage.frontPageExtras ? <FrontPageTabs /> : null}
-    <SubscribeToNewsletter />
-    <FrontPageTopDatasets />
-    <AdditionalInfo />
-    <Footer />
-  </span>
-)
-
-export default FrontPage

package/src/scripts/front-page/participant-count.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Query } from '@apollo/client/react/components'
-import { gql } from '@apollo/client'
-
-const PARTICIPANT_COUNT = gql`
-  query participantCount {
-    participantCount
-  }
-`
-
-export const participantCount = ({ loading, data }) => {
-  try {
-    return loading ? null : data.participantCount
-  } catch (e) {
-    return null
-  }
-}
-
-const ParticipantCount = () => (
-  <Query query={PARTICIPANT_COUNT} errorPolicy="ignore">
-    {participantCount}
-  </Query>
-)
-
-export default ParticipantCount

package/src/scripts/hooks/use-measure.js

@@ -1,15 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import ResizeObserver from 'resize-observer-polyfill'
-
-export function useMeasure() {
-  const ref = useRef()
-  const [bounds, set] = useState({ left: 0, top: 0, width: 0, height: 0 })
-  const [ro] = useState(
-    () => new ResizeObserver(([entry]) => set(entry.contentRect)),
-  )
-  useEffect(() => {
-    if (ref.current) ro.observe(ref.current)
-    return () => ro.disconnect()
-  }, [ro])
-  return [{ ref }, bounds]
-}

package/src/scripts/hooks/use-previous.js

@@ -1,7 +0,0 @@
-import { useRef, useEffect } from 'react'
-
-export function usePrevious(value) {
-  const ref = useRef()
-  useEffect(() => void (ref.current = value), [value])
-  return ref.current
-}

package/src/scripts/nav/navbar.jsx

@@ -1,144 +0,0 @@
-// dependencies ------------------------------------------------------------------
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { withRouter, Link } from 'react-router-dom'
-import NavMenu from './navbar.navmenu.jsx'
-import { Navbar } from 'react-bootstrap'
-import LoginModal from '../common/partials/login.jsx'
-import { frontPage } from '../front-page/front-page-content'
-import styled from '@emotion/styled'
-import FreshdeskWidget from '../datalad/fragments/freshdesk-widget.jsx'
-import {
-  Overlay,
-  ModalContainer,
-  ExitButton,
-} from '../styles/support-modal.jsx'
-
-// component setup ---------------------------------------------------------------
-const NavbarSpacer = styled.div`
-  width: 100%;
-  height: 85px;
-  min-height: 85px;
-`
-
-const OpenNeuroBrand = () => (
-  <Link to="/" className="navbar-brand">
-    {frontPage.navBar.brand.src ? (
-      <img
-        src={frontPage.navBar.brand.src}
-        alt={frontPage.navBar.brand.alt}
-        title={frontPage.navBar.brand.title}
-      />
-    ) : null}
-    <div className="logo-text">
-      {frontPage.navBar.brand.text ? frontPage.navBar.brand.text.first : ''}
-      <span className="logo-end">
-        {frontPage.navBar.brand.text ? frontPage.navBar.brand.text.second : ''}
-      </span>
-    </div>
-  </Link>
-)
-
-class BSNavbar extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      supportModal: false,
-      loginModal: false,
-      infoPanel: false,
-      navExpanded: false,
-    }
-  }
-
-  loginModal = (open = true) => {
-    this.setState({ loginModal: open })
-  }
-
-  supportModal = (open = true) => {
-    this.setState({ supportModal: open })
-  }
-
-  infoModal = (open = true) => {
-    this.setState({ infoPanel: open })
-  }
-
-  setNavExpanded = (expanded = true) => {
-    this.setState({ navExpanded: expanded })
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.location !== prevProps.location) {
-      this.setNavExpanded(false)
-    }
-  }
-
-  // life cycle methods ------------------------------------------------------------
-  render() {
-    return (
-      <>
-        <Navbar
-          onToggle={this.setNavExpanded}
-          expanded={this.state.navExpanded}>
-          <Navbar.Header>
-            <Navbar.Brand>
-              <OpenNeuroBrand />
-            </Navbar.Brand>
-            <Navbar.Toggle />
-          </Navbar.Header>
-          <Navbar.Collapse>
-            <NavMenu
-              loginModal={this.loginModal}
-              supportModal={this.supportModal}
-            />
-          </Navbar.Collapse>
-        </Navbar>
-        <NavbarSpacer />
-        {this.state.supportModal && (
-          <Overlay>
-            <ModalContainer>
-              <ExitButton
-                onClick={() => this.setState({ supportModal: false })}>
-                &times;
-              </ExitButton>
-              <h3>Support</h3>
-              <hr />
-              <div>
-                <p>
-                  If you would like to report an issue with openneuro.org,
-                  please provide details in the text box below and an OpenNeuro
-                  representative will be in touch with you by the next business
-                  day.
-                </p>
-                <p>
-                  If you have concerns regarding a specific dataset (clarifying
-                  the design, asking for additional metadata, etc.), please post
-                  them in the comments beneath that dataset.
-                </p>
-                <p>
-                  If you would like to suggest a new site feature, please post
-                  it at https://openneuro.featureupvote.com/
-                </p>
-              </div>
-              <FreshdeskWidget />
-            </ModalContainer>
-          </Overlay>
-        )}
-        <LoginModal
-          show={this.state.loginModal}
-          modalToggle={this.loginModal.bind(this)}
-          min={true}
-        />
-      </>
-    )
-  }
-
-  // template methods --------------------------------------------------------------
-}
-
-BSNavbar.propTypes = {
-  routes: PropTypes.array,
-  location: PropTypes.object,
-}
-
-export default withRouter(BSNavbar)