@openneuro/app 4.6.1 → 4.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.scss-lint.yml CHANGED
@@ -10,7 +10,6 @@ exclude:
10
10
  - 'src/sass/_bootstrap-sprockets.scss'
11
11
  - 'src/sass/_bootstrap.scss'
12
12
  - 'src/sass/react-select.scss'
13
- - 'src/sass/crn_app/_common.papaya.scss'
14
13
 
15
14
  linters:
16
15
  BorderZero:
package/Dockerfile CHANGED
@@ -1,6 +1,6 @@
1
1
  FROM openneuro/node AS web
2
2
 
3
3
  WORKDIR /srv/packages/openneuro-app
4
- RUN yarn tsc -b && yarn build && cp maintenance.html src/dist/client
4
+ RUN yarn tsc -b && NODE_OPTIONS=--max_old_space_size=4096 yarn build && cp maintenance.html src/dist/client
5
5
 
6
6
  CMD NODE_ENV=production yarn node dist/ssr.js
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openneuro/app",
3
- "version": "4.6.1",
3
+ "version": "4.6.2",
4
4
  "description": "React JS web frontend for the OpenNeuro platform.",
5
5
  "license": "MIT",
6
6
  "main": "public/client.js",
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "scripts": {
12
12
  "start": "node --enable-source-maps ./dist/ssr.js",
13
- "build": "yarn vite build --outDir dist/client && yarn vite build --outDir dist/server --ssr server.jsx && cp src/assets/papaya.js src/dist/client/assets"
13
+ "build": "yarn vite build --outDir dist/client && yarn vite build --outDir dist/server --ssr server.jsx"
14
14
  },
15
15
  "author": "Squishymedia",
16
16
  "dependencies": {
@@ -19,8 +19,9 @@
19
19
  "@elastic/apm-rum": "5.9.1",
20
20
  "@emotion/react": "11.6.0",
21
21
  "@emotion/styled": "11.6.0",
22
- "@openneuro/client": "^4.6.1",
23
- "@openneuro/components": "^4.6.1",
22
+ "@niivue/niivue": "^0.23.0",
23
+ "@openneuro/client": "^4.6.2",
24
+ "@openneuro/components": "^4.6.2",
24
25
  "babel-runtime": "^6.26.0",
25
26
  "bids-validator": "1.9.3",
26
27
  "bytes": "^3.0.0",
@@ -107,7 +108,7 @@
107
108
  "@openneuro/(.+)": "<rootDir>../openneuro-$1/src"
108
109
  },
109
110
  "transformIgnorePatterns": [
110
- "/node_modules/(?!bids-validator).+\\.js$"
111
+ "/node_modules/(?!bids-validator|@niivue/niivue).+\\.js$"
111
112
  ],
112
113
  "testPathIgnorePatterns": [
113
114
  "dist"
@@ -116,5 +117,5 @@
116
117
  "publishConfig": {
117
118
  "access": "public"
118
119
  },
119
- "gitHead": "ae00df047e53f3a819d7221a491d845ffbb32832"
120
+ "gitHead": "7049c5927d87f4bdc0d081a6c34d643cdd623b65"
120
121
  }
package/src/index.html CHANGED
@@ -412,7 +412,6 @@
412
412
 
413
413
  <body>
414
414
  <div id="main">${react}</div>
415
- <script src="/assets/papaya.js"></script>
416
415
  <script src="/client.jsx" type="module"></script>
417
416
  <script>window.__APOLLO_STATE__=atob("${apolloState}");</script>
418
417
  </body>
@@ -143,16 +143,11 @@ export const DatasetQueryHook = ({ datasetId, draft, history }) => {
143
143
  })
144
144
  useDraftSubscription(datasetId)
145
145
 
146
- if (loading || !data)
147
- return (
148
- <div className="loading-dataset">
149
- <Loading />
150
- Loading Dataset
151
- </div>
152
- )
153
146
  if (error) {
154
147
  if (error.message === 'You do not have access to read this dataset.') {
155
148
  return <FourOThreePage />
149
+ } else if (error.message.includes('has been deleted')) {
150
+ return <FourOFourPage message={error.message} />
156
151
  } else {
157
152
  try {
158
153
  apm.captureError(error)
@@ -161,6 +156,14 @@ export const DatasetQueryHook = ({ datasetId, draft, history }) => {
161
156
  }
162
157
  return <FourOFourPage />
163
158
  }
159
+ } else {
160
+ if (loading || !data)
161
+ return (
162
+ <div className="loading-dataset">
163
+ <Loading />
164
+ Loading Dataset
165
+ </div>
166
+ )
164
167
  }
165
168
 
166
169
  return (
@@ -1,9 +1,11 @@
1
1
  import React from 'react'
2
2
  import Markdown from 'markdown-to-jsx'
3
+ import Helmet from 'react-helmet'
3
4
  import { useLocation, Redirect } from 'react-router-dom'
4
5
  import pluralize from 'pluralize'
5
6
  import formatDistanceToNow from 'date-fns/formatDistanceToNow'
6
7
  import parseISO from 'date-fns/parseISO'
8
+ import { pageTitle } from '../resources/strings.js'
7
9
 
8
10
  import { DatasetPageTabContainer } from './routes/styles/dataset-page-tab-container'
9
11
  import Validation from '../validation/validation.jsx'
@@ -85,6 +87,11 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
85
87
 
86
88
  return (
87
89
  <>
90
+ <Helmet>
91
+ <title>
92
+ {description.Name} - {pageTitle}
93
+ </title>
94
+ </Helmet>
88
95
  {dataset.snapshots && !hasEdit && (
89
96
  <Redirect
90
97
  to={`/datasets/${dataset.id}/versions/${
@@ -1,10 +1,10 @@
1
1
  import React from 'react'
2
2
  import PropTypes from 'prop-types'
3
- import { Link } from 'react-router-dom'
4
3
  import FileView from './file-view.jsx'
5
4
  import { apiPath } from './file'
6
5
  import styled from '@emotion/styled'
7
6
  import { Media } from '../../styles/media'
7
+ import { DatasetPageBorder } from '../routes/styles/dataset-page-border'
8
8
 
9
9
  const PathBreadcrumb = styled.div`
10
10
  font-size: 14px;
@@ -52,38 +52,27 @@ FileDisplayBreadcrumb.propTypes = {
52
52
  }
53
53
 
54
54
  const FileDisplay = ({ datasetId, snapshotTag = null, filePath }) => (
55
- <div className="dataset-form display-file container">
56
- <div className="grid display-file-content">
57
- <div className="display-file-header col col-12">
58
- <div className="form-group modal-title">
59
- <span className="ds-primary display-file-path">
60
- <PathBreadcrumb>
61
- <h2>{datasetId}</h2>
62
- <FileDisplayBreadcrumb filePath={filePath} />
63
- </PathBreadcrumb>
64
- </span>
65
- <Media greaterThanOrEqual="medium">
66
- <div className="modal-download btn-admin-blue">
67
- <a href={apiPath(datasetId, snapshotTag, filePath)} download>
68
- <i className="fa fa-download" /> Download
69
- </a>
70
- <Link className="return-link" to={`/datasets/${datasetId}`}>
71
- Return to dataset
72
- </Link>
73
- </div>
74
- </Media>
75
- <hr />
76
- </div>
77
- </div>
78
- <div className="col col-12 display-file-body">
79
- <FileView
80
- datasetId={datasetId}
81
- snapshotTag={snapshotTag}
82
- path={filePath}
83
- />
84
- </div>
55
+ <DatasetPageBorder className="dataset-form display-file">
56
+ <PathBreadcrumb>
57
+ <FileDisplayBreadcrumb filePath={filePath} />
58
+ </PathBreadcrumb>
59
+ <div className="display-file-body">
60
+ <FileView
61
+ datasetId={datasetId}
62
+ snapshotTag={snapshotTag}
63
+ path={filePath}
64
+ />
85
65
  </div>
86
- </div>
66
+
67
+ <Media greaterThanOrEqual="medium">
68
+ <hr />
69
+ <div className="modal-download btn-admin-blue">
70
+ <a href={apiPath(datasetId, snapshotTag, filePath)} download>
71
+ <i className="fa fa-download" /> Download
72
+ </a>
73
+ </div>
74
+ </Media>
75
+ </DatasetPageBorder>
87
76
  )
88
77
 
89
78
  FileDisplay.propTypes = {
@@ -2,103 +2,71 @@
2
2
 
3
3
  exports[`File Viewer - JSON renders with invalid JSON 1`] = `
4
4
  <DocumentFragment>
5
- <div
6
- class="container"
5
+ <h3>
6
+ Tree
7
+ </h3>
8
+ <hr />
9
+ <p>
10
+ JSON failed to parse
11
+ </p>
12
+ <pre>
13
+ Unexpected token ; in JSON at position 4
14
+ </pre>
15
+ <h3>
16
+ Raw
17
+ </h3>
18
+ <hr />
19
+ <pre
20
+ class="css-ffm88e"
7
21
  >
8
- <div
9
- class="grid"
10
- >
11
- <div
12
- class="col col-lg"
13
- >
14
- <h3>
15
- Tree
16
- </h3>
17
- <hr />
18
- <p>
19
- JSON failed to parse
20
- </p>
21
- <pre>
22
- Unexpected token ; in JSON at position 4
23
- </pre>
24
- </div>
25
- <div
26
- class="col"
27
- >
28
- <h3>
29
- Raw
30
- </h3>
31
- <hr />
32
- <pre
33
- class="css-ffm88e"
34
- >
35
- 1234;
36
- </pre>
37
- </div>
38
- </div>
39
- </div>
22
+ 1234;
23
+ </pre>
40
24
  </DocumentFragment>
41
25
  `;
42
26
 
43
27
  exports[`File Viewer - JSON renders with valid JSON 1`] = `
44
28
  <DocumentFragment>
29
+ <h3>
30
+ Tree
31
+ </h3>
32
+ <hr />
45
33
  <div
46
- class="container"
34
+ class="json-container"
47
35
  >
48
36
  <div
49
- class="grid"
37
+ class="expand-prop-name"
50
38
  >
51
- <div
52
- class="col col-lg"
39
+ Root Property-
40
+ </div>
41
+ <div
42
+ class="json-container"
43
+ >
44
+ <span
45
+ class="prop-name"
53
46
  >
54
- <h3>
55
- Tree
56
- </h3>
57
- <hr />
58
- <div
59
- class="json-container"
60
- >
61
- <div
62
- class="expand-prop-name"
63
- >
64
- Root Property-
65
- </div>
66
- <div
67
- class="json-container"
68
- >
69
- <span
70
- class="prop-name"
71
- >
72
- Thing:
73
- </span>
74
- 1
75
- </div>
76
- <div
77
- class="json-container"
78
- >
79
- <span
80
- class="prop-name"
81
- >
82
- Name:
83
- </span>
84
- string
85
- </div>
86
- </div>
87
- </div>
88
- <div
89
- class="col"
47
+ Thing:
48
+ </span>
49
+ 1
50
+ </div>
51
+ <div
52
+ class="json-container"
53
+ >
54
+ <span
55
+ class="prop-name"
90
56
  >
91
- <h3>
92
- Raw
93
- </h3>
94
- <hr />
95
- <pre
96
- class="css-ffm88e"
97
- >
98
- {"thing":1,"name":"string"}
99
- </pre>
100
- </div>
57
+ Name:
58
+ </span>
59
+ string
101
60
  </div>
102
61
  </div>
62
+ <h3>
63
+ Raw
64
+ </h3>
65
+ <hr />
66
+ <pre
67
+ class="css-ffm88e"
68
+ >
69
+ {"thing":1,"name":"string"}
70
+ </pre>
103
71
  </DocumentFragment>
104
72
  `;
@@ -27,20 +27,14 @@ export const FileViewerJsonRaw = ({ jsonRaw }) => {
27
27
  )
28
28
  }
29
29
  return (
30
- <div className="container">
31
- <div className="grid">
32
- <div className="col col-lg">
33
- <h3>Tree</h3>
34
- <hr />
35
- {jsonViewer}
36
- </div>
37
- <div className="col">
38
- <h3>Raw</h3>
39
- <hr />
40
- <WrappedPre>{jsonRaw}</WrappedPre>
41
- </div>
42
- </div>
43
- </div>
30
+ <>
31
+ <h3>Tree</h3>
32
+ <hr />
33
+ {jsonViewer}
34
+ <h3>Raw</h3>
35
+ <hr />
36
+ <WrappedPre>{jsonRaw}</WrappedPre>
37
+ </>
44
38
  )
45
39
  }
46
40
 
@@ -1,19 +1,25 @@
1
- import React from 'react'
1
+ import React, { useEffect, useRef } from 'react'
2
2
  import PropTypes from 'prop-types'
3
- import Papaya from '../../../common/partials/papaya.jsx'
4
- import styled from '@emotion/styled'
3
+ import { Niivue } from '@niivue/niivue'
5
4
 
6
- const StyleWrapper = styled.div`
7
- div.papaya-wrap {
8
- margin: auto;
9
- }
10
- `
5
+ const FileViewerNifti = ({ imageUrl }) => {
6
+ const canvas = useRef()
7
+ useEffect(() => {
8
+ const volumeList = [
9
+ {
10
+ url: imageUrl,
11
+ colorMap: 'gray',
12
+ opacity: 1,
13
+ visible: true,
14
+ },
15
+ ]
16
+ const nv = new Niivue({ dragAndDropEnabled: false })
17
+ nv.attachToCanvas(canvas.current)
18
+ nv.loadVolumes(volumeList) // press the "v" key to cycle through volumes
19
+ }, [imageUrl])
11
20
 
12
- const FileViewerNifti = ({ imageUrl }) => (
13
- <StyleWrapper>
14
- <Papaya image={imageUrl} />
15
- </StyleWrapper>
16
- )
21
+ return <canvas ref={canvas} height={800} />
22
+ }
17
23
 
18
24
  FileViewerNifti.propTypes = {
19
25
  imageUrl: PropTypes.string,