@openneuro/app 4.1.2 → 4.2.3

package/src/scripts/refactor_2021/dataset/snapshot-container.tsx

@@ -149,6 +149,8 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
           <CloneDropdown
             gitAccess={
               <DatasetGitAccess
+                hasEdit={hasEdit}
+                configGithub={config.github}
                 configUrl={config.url}
                 worker={dataset.worker}
                 datasetId={datasetId}
@@ -171,7 +173,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             fileTree={true}
             id="collapse-tree"
             expandLabel="Read More"
-            collapseabel="Collapse">
+            collapseLabel="Collapse">
             <Files
               datasetId={datasetId}
               snapshotTag={snapshot.tag}
@@ -189,7 +191,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
               <ReadMore
                 id="readme"
                 expandLabel="Read More"
-                collapseabel="Collapse">
+                collapseLabel="Collapse">
                 <Markdown>
                   {snapshot.readme == null ? 'N/A' : snapshot.readme}
                 </Markdown>

package/src/scripts/refactor_2021/routes.tsx

@@ -15,7 +15,7 @@ import { PETRedirect } from '../pet/redirect'
 import Citation from '../pages/citation-page'
 import FourOFourPage from '../errors/404page'
 
-const Routes = () => (
+const Routes: React.VoidFunctionComponent = () => (
   <Switch>
     <Route name="faq" exact path="/faq" component={FAQS} />
     <Route name="front-page" exact path="/" component={FrontPageContainer} />

package/src/scripts/refactor_2021/search/__tests__/search-params-ctx.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { SearchParamsCtx } from '../search-params-ctx'
+import '@testing-library/jest-dom'
+
+/**
+ * Render with SearchParamsCtx state
+ */
+export const searchRender = (ui, { providerProps, ...renderOptions }) => {
+  return render(
+    <SearchParamsCtx.Provider {...providerProps}>
+      {ui}
+    </SearchParamsCtx.Provider>,
+    renderOptions,
+  )
+}
+
+describe('SearchParamsCtx', () => {
+  it('initializes with expected defaults', () => {})
+})

package/src/scripts/refactor_2021/search/initial-search-params.tsx

@@ -108,7 +108,7 @@ export const flattenedModalities = modality_available.reduce(
   [] as ModalityOption[],
 )
 
-export const gender_list = [
+export const sex_list = [
   { label: 'All', value: 'All' },
   { label: 'Male', value: 'Male' },
   { label: 'Female', value: 'Female' },
@@ -139,8 +139,8 @@ export interface SearchParams {
   tasks: string[]
   authors: string[]
   // more
-  gender_available: string[]
-  gender_selected: string | null
+  sex_available: string[]
+  sex_selected: string | null
   date_available: string[]
   date_selected: string | null
   species_available: string[]
@@ -175,8 +175,8 @@ const initialSearchParams: SearchParams = {
   tasks: [],
   authors: [],
   // more
-  gender_available: [],
-  gender_selected: null,
+  sex_available: [],
+  sex_selected: null,
   date_available: [],
   date_selected: null,
   species_available: [],
@@ -216,8 +216,8 @@ const TEMPORARY_initialSearchParams: SearchParams = {
   tasks: [],
   authors: [],
   // more
-  gender_available: ['All', 'Male', 'Female'],
-  gender_selected: 'All',
+  sex_available: ['All', 'Male', 'Female'],
+  sex_selected: 'All',
   date_available: [
     'All Time',
     'Last 30 days',

package/src/scripts/refactor_2021/search/inputs/__tests__/sort-by-select.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+import { searchRender } from '../../__tests__/search-params-ctx.spec'
+import SortBySelect from '../sort-by-select'
+import initialSearchParams from '../../initial-search-params'
+
+const providerProps = {
+  value: { searchParams: { ...initialSearchParams } },
+}
+
+describe('SortBySelect component', () => {
+  it('displays Newest when parameters are set to default', () => {
+    searchRender(<SortBySelect variables={{ query: { bool: {} } }} />, {
+      providerProps,
+    })
+    expect(screen.getByText('SORT BY:').closest('div')).toHaveTextContent(
+      'SORT BY: Newest',
+    )
+  })
+  it('displays Newest when parameters are set to default and modality has changed', () => {
+    searchRender(
+      <SortBySelect
+        variables={{
+          query: {
+            bool: {
+              filter: [
+                {
+                  match: {
+                    'latestSnapshot.summary.modalities': {
+                      query: 'MRI',
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        }}
+      />,
+      {
+        providerProps,
+      },
+    )
+    expect(screen.getByText('SORT BY:').closest('div')).toHaveTextContent(
+      'SORT BY: Newest',
+    )
+  })
+  it('displays Relevance when any non-modality parameters are set away from default', () => {
+    searchRender(
+      <SortBySelect variables={{ query: { bool: { species: 'Human' } } }} />,
+      { providerProps },
+    )
+    expect(screen.getByText('SORT BY:').closest('div')).toHaveTextContent(
+      'SORT BY: Relevance',
+    )
+  })
+  it('displays Relevance with age of participants set', () => {
+    searchRender(
+      <SortBySelect
+        variables={{
+          query: {
+            bool: {
+              filter: [
+                {
+                  range: {
+                    'latestSnapshot.summary.subjectMetadata.age': {
+                      gte: 10,
+                      lte: 100,
+                      relation: 'INTERSECTS',
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        }}
+      />,
+      { providerProps },
+    )
+    expect(screen.getByText('SORT BY:').closest('div')).toHaveTextContent(
+      'SORT BY: Relevance',
+    )
+  })
+})

package/src/scripts/refactor_2021/search/inputs/index.ts

@@ -7,7 +7,7 @@ import SubjectCountRangeInput from './subject-count-range-input'
 import DiagnosisSelect from './diagnosis-select'
 import TaskInput from './task-input'
 import AuthorInput from './author-input'
-import GenderRadios from './gender-radios'
+import SexRadios from './sex-radios'
 import DateRadios from './date-radios'
 import SpeciesSelect from './species-select'
 import SectionSelect from './section-select'
@@ -29,7 +29,7 @@ export {
   DiagnosisSelect,
   TaskInput,
   AuthorInput,
-  GenderRadios,
+  SexRadios,
   DateRadios,
   SpeciesSelect,
   SectionSelect,

package/src/scripts/refactor_2021/search/inputs/{gender-radios.tsx → sex-radios.tsx}

@@ -3,29 +3,29 @@ import { SearchParamsCtx } from '../search-params-ctx'
 import { FacetRadio } from '@openneuro/components/facets'
 import { AccordionTab, AccordionWrap } from '@openneuro/components/accordion'
 
-const GenderRadios: FC = () => {
+const SexRadios: FC = () => {
   const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
 
-  const { gender_available, gender_selected } = searchParams
-  const setGender = gender_selected =>
+  const { sex_available, sex_selected } = searchParams
+  const setSex = sex_selected =>
     setSearchParams(prevState => ({
       ...prevState,
-      gender_selected,
+      sex_selected,
     }))
 
   return (
     <AccordionWrap className="facet-accordion">
-      <AccordionTab startOpen={false} label="Gender" accordionStyle="plain">
+      <AccordionTab startOpen={false} label="Sex" accordionStyle="plain">
         <FacetRadio
-          selected={gender_selected}
-          setSelected={setGender}
-          radioArr={gender_available}
+          selected={sex_selected}
+          setSelected={setSex}
+          radioArr={sex_available}
           layout="row"
-          name="Gender"
+          name="Sex"
         />
       </AccordionTab>
     </AccordionWrap>
   )
 }
 
-export default GenderRadios
+export default SexRadios

package/src/scripts/refactor_2021/search/inputs/sort-by-select.tsx

@@ -2,7 +2,13 @@ import React, { FC, useContext } from 'react'
 import { SearchParamsCtx } from '../search-params-ctx'
 import { SearchSort } from '@openneuro/components/search-page'
 
-const SortBySelect: FC = () => {
+interface SortBySelectProps {
+  variables: any
+}
+
+const SortBySelect: FC<SortBySelectProps> = ({
+  variables,
+}: SortBySelectProps) => {
   const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
 
   const { sortBy_available, sortBy_selected } = searchParams
@@ -12,13 +18,37 @@ const SortBySelect: FC = () => {
       sortBy_selected,
     }))
 
-  return (
-    <SearchSort
-      items={sortBy_available}
-      selected={sortBy_selected}
-      setSelected={setSortBy}
-    />
-  )
+  // If no query or only modality is set, ignore "relevance" option
+  if (
+    Object.keys(variables.query.bool).length === 0 ||
+    (Object.keys(variables.query.bool).length === 1 &&
+      variables.query.bool?.filter?.every(
+        f => f?.match?.['latestSnapshot.summary.modalities'],
+      ))
+  ) {
+    const available = sortBy_available.filter(
+      item => item.value !== 'relevance',
+    )
+    const selected =
+      sortBy_selected.value === 'relevance'
+        ? { label: 'Newest', value: 'newest' }
+        : sortBy_selected
+    return (
+      <SearchSort
+        items={available}
+        selected={selected}
+        setSelected={setSortBy}
+      />
+    )
+  } else {
+    return (
+      <SearchSort
+        items={sortBy_available}
+        selected={sortBy_selected}
+        setSelected={setSortBy}
+      />
+    )
+  }
 }
 
 export default SortBySelect

package/src/scripts/refactor_2021/search/search-container.tsx

@@ -20,7 +20,7 @@ import {
   DiagnosisSelect,
   TaskInput,
   AuthorInput,
-  GenderRadios,
+  SexRadios,
   DateRadios,
   SpeciesSelect,
   SectionSelect,
@@ -148,7 +148,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
             numTotalResults={numTotalResults}
           />
         )}
-        renderSortBy={() => <SortBySelect />}
+        renderSortBy={() => <SortBySelect variables={variables} />}
         renderSearchHeader={() => (
           <>
             {portalContent
@@ -173,7 +173,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
             <DiagnosisSelect />
             <TaskInput />
             <AuthorInput />
-            <GenderRadios />
+            <SexRadios />
             <DateRadios />
             <SpeciesSelect />
             <SectionSelect />

package/src/scripts/refactor_2021/search/search-params-ctx.tsx

@@ -36,7 +36,7 @@ export const removeFilterItem = setSearchParams => (param, value) => {
     case 'datasetStatus_selected':
     case 'ageRange':
     case 'subjectCountRange':
-    case 'gender_selected':
+    case 'sex_selected':
     case 'date_selected':
     case 'diagnosis_selected':
     case 'section_selected':
@@ -85,7 +85,7 @@ export const getSelectParams = ({
   ageRange,
   subjectCountRange,
   authors,
-  gender_selected,
+  sex_selected,
   date_selected,
   tasks,
   diagnosis_selected,
@@ -106,7 +106,7 @@ export const getSelectParams = ({
   ageRange,
   subjectCountRange,
   authors,
-  gender_selected,
+  sex_selected,
   date_selected,
   tasks,
   diagnosis_selected,

package/src/scripts/refactor_2021/search/use-search-results.tsx

@@ -136,7 +136,7 @@ export const useSearchResults = () => {
     diagnosis_selected,
     tasks,
     authors,
-    gender_selected,
+    sex_selected,
     date_selected,
     species_selected,
     section_selected,
@@ -154,6 +154,7 @@ export const useSearchResults = () => {
     boolQuery.addClause(
       'must',
       simpleQueryString(sqsJoinWithAND(keywords), [
+        'id^6',
         'latestSnapshot.readme',
         'latestSnapshot.description.Name^6',
         'latestSnapshot.description.Authors^3',
@@ -236,10 +237,10 @@ export const useSearchResults = () => {
         '3',
       ),
     )
-  if (gender_selected !== 'All')
+  if (sex_selected !== 'All')
     boolQuery.addClause(
       'filter',
-      matchQuery('latestSnapshot.summary.subjectMetadata.sex', gender_selected),
+      matchQuery('latestSnapshot.summary.subjectMetadata.sex', sex_selected),
     )
   if (date_selected !== 'All Time') {
     let d: number

package/src/scripts/refactor_2021/user/api.jsx

@@ -1,19 +1,24 @@
 import React from 'react'
-import Spinner from '../../common/partials/spinner'
+import { Loading } from '@openneuro/components/loading'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import crn from '../../utils/crn.js'
 import Helmet from 'react-helmet'
 import { pageTitle } from '../../resources/strings.js'
-import { AccordionTab, AccordionWrap } from '@openneuro/components/accordion'
 import { Button } from '@openneuro/components/button'
+import { config } from '../../config'
+
 /**
  * Create API Key
  *
  * Given the current user, creates an api key
  * for use with the standalone CLI
  */
-const createAPIKey = () => {
-  return crn.createAPIKey().then(res => (res && res.body ? res.body.key : null))
+export const createAPIKey = async () => {
+  const req = await fetch(`${config.api}keygen`, {
+    method: 'POST',
+    credentials: 'same-origin',
+  })
+  const res = await req.json()
+  return res?.key
 }
 
 class APIKeyGen extends React.Component {
@@ -51,7 +56,7 @@ class APIKeyGen extends React.Component {
 
   _loadingSpinner() {
     if (this.state.loading) {
-      return <Spinner active={true} />
+      return <Loading />
     } else {
       return null
     }

package/src/server.jsx

@@ -14,7 +14,6 @@ import { config } from './scripts/config'
 import { mediaStyle } from './scripts/styles/media'
 import { version } from './lerna.json'
 import redesignStyles from '@openneuro/components/page/page.scss'
-import classicStyles from './sass/main.scss'
 import { apm } from './scripts/apm.js'
 
 const RootComponent = ({ cookies, mediaStyle, client, url }) => (
@@ -38,9 +37,6 @@ export async function render(url, cookies) {
     getAuthorization: () => cookies.get('accessToken'),
   })
 
-  const css =
-    cookies.get('redesign-classic') == 'true' ? classicStyles : redesignStyles
-
   let react = ''
   try {
     react = await getDataFromTree(
@@ -65,5 +61,5 @@ export async function render(url, cookies) {
     'base64',
   )
 
-  return { react, apolloState, head, css }
+  return { react, apolloState, head, css: redesignStyles }
 }

package/src/ssr.ts

@@ -2,7 +2,6 @@ import fs from 'fs'
 import path from 'path'
 import express from 'express'
 import { createServer as createViteServer } from 'vite'
-import Cookies from 'universal-cookie'
 import cookiesMiddleware from 'universal-cookie-express'
 
 const development = process.env.NODE_ENV === 'development'

package/src/sass/_bootstrap-compass.scss

@@ -1,9 +0,0 @@
-@function twbs-font-path($path) {
-  @return font-url($path, true);
-}
-
-@function twbs-image-path($path) {
-  @return image-url($path, true);
-}
-
-$bootstrap-sass-asset-helper: true;

package/src/sass/_bootstrap-mincer.scss

@@ -1,19 +0,0 @@
-// Mincer asset helper functions
-//
-// This must be imported into a .css.ejs.scss file.
-// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation.
-
-
-@function twbs-font-path($path) {
-  // do something like following
-  // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>"
-  // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>"
-  // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>"
-  @return "<%- asset_path('#{$path}'.replace(/[#?].*$/, '')) + '#{$path}'.replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>";
-}
-
-@function twbs-image-path($file) {
-  @return "<%- asset_path('#{$file}') %>";
-}
-
-$bootstrap-sass-asset-helper: true;

package/src/sass/_bootstrap-sprockets.scss

@@ -1,9 +0,0 @@
-@function twbs-font-path($path) {
-  @return font-path($path);
-}
-
-@function twbs-image-path($path) {
-  @return image-path($path);
-}
-
-$bootstrap-sass-asset-helper: true;

package/src/sass/_bootstrap.scss

@@ -1,50 +0,0 @@
-// Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-
-// Reset and dependencies
-@import "bootstrap/normalize";
-@import "bootstrap/print";
-
-// Core CSS
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
-
-// Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-@import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap/panels";
-@import "bootstrap/responsive-embed";
-@import "bootstrap/wells";
-@import "bootstrap/close";
-
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/carousel";
-
-// Utility classes
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
-@import "bootstrap/float-label.scss";

package/src/sass/animate/_attention-seekers/_bounce.scss

@@ -1,15 +0,0 @@
-@include keyframes(bounce) {
-	0%, 20%, 50%, 80%, 100% {@include transform(translateY(0));}
-	40% {@include transform(translateY(-30px));}
-	60% {@include transform(translateY(-15px));}
-}
-
-@mixin bounce($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
-	@include animation-name(bounce);
-	@include count($count);
-	@include duration($duration);
-	@include delay($delay);
-	@include function($function);
-	@include fill-mode($fill);
-	@include visibility($visibility);
-}

package/src/sass/animate/_attention-seekers/_flash.scss

@@ -1,14 +0,0 @@
-@include keyframes(flash) {
-	0%, 50%, 100% {opacity: 1;}
-	25%, 75% {opacity: 0;}
-}
-
-@mixin flash($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
-	@include animation-name(flash);
-	@include count($count);
-	@include duration($duration);
-	@include delay($delay);
-	@include function($function);
-	@include fill-mode($fill);
-	@include visibility($visibility);
-}

package/src/sass/animate/_attention-seekers/_pulse.scss

@@ -1,17 +0,0 @@
-// originally authored by Nick Pettit - https://github.com/nickpettit/glide
-
-@include keyframes(pulse) {
-	  0% {@include transform(scale(1));}
-   50% {@include transform(scale(1.1));}
-  100% {@include transform(scale(1));}
-}
-
-@mixin pulse($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
-  @include animation-name(pulse);
-  @include count($count);
-  @include duration($duration);
-  @include delay($delay);
-  @include function($function);
-  @include fill-mode($fill);
-  @include visibility($visibility);
-}

package/src/sass/animate/_attention-seekers/_rubberBand.scss

@@ -1,19 +0,0 @@
-@include keyframes(rubberBand) {
-	  0% {@include transform(scale3d(1, 1, 1));}
-   30% {@include transform(scale3d(1.25, 0.75, 1));}
-	 40% {@include transform(scale3d(0.75, 1.25, 1));}
-	 50% {@include transform(scale3d(1.15, 0.85, 1));}
-	 65% {@include transform(scale3d(.95, 1.05, 1));}
-	 75% {@include transform(scale3d(1.05, .95, 1));}
-	100% {@include transform(scale3d(1, 1, 1));}
-}
-
-@mixin rubberBand($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
-	@include animation-name(rubberBand);
-  @include count($count);
-  @include duration($duration);
-	@include delay($delay);
-	@include function($function);
-	@include fill-mode($fill);
-	@include visibility($visibility);
-}

package/src/sass/animate/_attention-seekers/_shake.scss

@@ -1,15 +0,0 @@
-@include keyframes(shake) {
-  0%, 100% {@include transform(translateX(0));}
-	10%, 30%, 50%, 70%, 90% {@include transform(translateX(-10px));}
-	20%, 40%, 60%, 80% {@include transform(translateX(10px));}
-}
-
-@mixin shake($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
-	@include animation-name(shake);
-	@include count($count);
-	@include duration($duration);
-	@include delay($delay);
-	@include function($function);
-	@include fill-mode($fill);
-	@include visibility($visibility);
-}

package/src/sass/animate/_attention-seekers/_swing.scss

@@ -1,19 +0,0 @@
-@include keyframes(swing) {
-	20%, 40%, 60%, 80%, 100% {@include transform-origin(top center);}
-	20% {@include transform(rotate(15deg));}
-	40% {@include transform(rotate(-10deg));}
-	60% {@include transform(rotate(5deg));}
-	80% {@include transform(rotate(-5deg));}
-	100% {@include transform(rotate(0deg));}
-}
-
-@mixin swing($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
-  @include transform-origin(top center);
-  @include animation-name(swing);
-  @include count($count);
-  @include duration($duration);
-  @include delay($delay);
-  @include function($function);
-  @include fill-mode($fill);
-  @include visibility($visibility);
-}