@openneuro/app 4.20.6 → 4.21.0-alpha.1

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.
Files changed (42) hide show
  1. package/package.json +4 -4
  2. package/src/scripts/app.tsx +16 -10
  3. package/src/scripts/components/__tests__/agreement.spec.tsx +24 -0
  4. package/src/scripts/components/agreement.tsx +76 -0
  5. package/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap +10 -330
  6. package/src/scripts/dataset/components/BrainLifeButton.tsx +38 -0
  7. package/src/scripts/dataset/components/CloneDropdown.tsx +31 -0
  8. package/src/scripts/dataset/components/DatasetAlert.tsx +25 -0
  9. package/src/scripts/dataset/components/DatasetGitAccess.tsx +82 -0
  10. package/src/scripts/dataset/components/DatasetHeader.tsx +43 -0
  11. package/src/scripts/dataset/components/DatasetHeaderMeta.tsx +22 -0
  12. package/src/scripts/dataset/components/DatasetToolButton.tsx +52 -0
  13. package/src/scripts/dataset/components/DatasetTools.tsx +149 -0
  14. package/src/scripts/dataset/components/MetaDataBlock.tsx +24 -0
  15. package/src/scripts/dataset/components/MetaDataListBlock.tsx +23 -0
  16. package/src/scripts/dataset/components/ModalitiesMetaDataBlock.tsx +32 -0
  17. package/src/scripts/dataset/components/NemarButton.tsx +34 -0
  18. package/src/scripts/dataset/components/ValidationBlock.tsx +11 -0
  19. package/src/scripts/dataset/components/VersionList.tsx +115 -0
  20. package/src/scripts/dataset/components/__tests__/DatasetAlert.spec.tsx +25 -0
  21. package/src/scripts/dataset/components/__tests__/DatasetHeaders.spec.tsx +18 -0
  22. package/src/scripts/dataset/components/__tests__/DatasetTools.spec.tsx +133 -0
  23. package/src/scripts/dataset/draft-container.tsx +9 -11
  24. package/src/scripts/dataset/files/__tests__/file.spec.jsx +13 -4
  25. package/src/scripts/dataset/files/file.tsx +27 -21
  26. package/src/scripts/dataset/fragments/dataset-alert-draft.tsx +1 -1
  27. package/src/scripts/dataset/fragments/dataset-alert-version.tsx +1 -1
  28. package/src/scripts/dataset/routes/dataset-default.tsx +1 -1
  29. package/src/scripts/dataset/routes/download-dataset.tsx +7 -1
  30. package/src/scripts/dataset/routes/snapshot-default.tsx +1 -1
  31. package/src/scripts/dataset/snapshot-container.tsx +10 -12
  32. package/src/scripts/scss/README.md +3 -0
  33. package/src/scripts/scss/dataset/comments.scss +152 -0
  34. package/src/scripts/scss/dataset/dataset-page.scss +397 -0
  35. package/src/scripts/scss/dataset/dataset-tool.scss +281 -0
  36. package/src/scripts/scss/dataset/dropdown.scss +29 -0
  37. package/src/scripts/scss/dataset/validation.scss +392 -0
  38. package/src/scripts/scss/dataset/version-dropdown.scss +121 -0
  39. package/src/scripts/scss/index.scss +6 -0
  40. package/src/scripts/scss/variables.scss +205 -0
  41. package/src/scripts/utils/__tests__/local-storage.spec.tsx +32 -0
  42. package/src/scripts/utils/local-storage.tsx +53 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openneuro/app",
3
- "version": "4.20.6",
3
+ "version": "4.21.0-alpha.1",
4
4
  "description": "React JS web frontend for the OpenNeuro platform.",
5
5
  "license": "MIT",
6
6
  "main": "public/client.js",
@@ -20,8 +20,8 @@
20
20
  "@emotion/react": "11.11.1",
21
21
  "@emotion/styled": "11.11.0",
22
22
  "@niivue/niivue": "0.34.0",
23
- "@openneuro/client": "^4.20.6",
24
- "@openneuro/components": "^4.20.6",
23
+ "@openneuro/client": "^4.21.0-alpha.1",
24
+ "@openneuro/components": "^4.21.0-alpha.1",
25
25
  "@tanstack/react-table": "^8.9.3",
26
26
  "bids-validator": "1.13.0",
27
27
  "bytes": "^3.0.0",
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "aa5c38f518dc7635790ef381c09e3447748816e1"
73
+ "gitHead": "7207d4655d8adb89a95681dfef51b2c69e542e0a"
74
74
  }
@@ -5,6 +5,9 @@ import { Cookies, CookiesProvider } from "react-cookie"
5
5
  import { ToastContainer } from "react-toastify"
6
6
  import "react-toastify/dist/ReactToastify.css"
7
7
  import { MediaContextProvider } from "./styles/media"
8
+ import { Agreement } from "./components/agreement"
9
+ import { LocalStorageProvider } from "./utils/local-storage"
10
+ import "./scss/index.scss"
8
11
 
9
12
  interface AppProps {
10
13
  children: ReactNode
@@ -19,16 +22,19 @@ const App: FC<AppProps> = ({
19
22
  children: ReactNode
20
23
  }) => {
21
24
  return (
22
- <CookiesProvider cookies={cookies}>
23
- <MediaContextProvider>
24
- <Helmet>
25
- <title>{frontPage.pageTitle}</title>
26
- <meta name="description" content={frontPage.pageDescription} />
27
- </Helmet>
28
- {children}
29
- <ToastContainer position="bottom-right" />
30
- </MediaContextProvider>
31
- </CookiesProvider>
25
+ <LocalStorageProvider defaultValue={{ agreement: false }}>
26
+ <CookiesProvider cookies={cookies}>
27
+ <MediaContextProvider>
28
+ <Helmet>
29
+ <title>{frontPage.pageTitle}</title>
30
+ <meta name="description" content={frontPage.pageDescription} />
31
+ </Helmet>
32
+ {children}
33
+ <Agreement />
34
+ <ToastContainer position="bottom-right" />
35
+ </MediaContextProvider>
36
+ </CookiesProvider>
37
+ </LocalStorageProvider>
32
38
  )
33
39
  }
34
40
 
@@ -0,0 +1,24 @@
1
+ import React from "react"
2
+ import { fireEvent, render, screen } from "@testing-library/react"
3
+ import { Agreement } from "../agreement"
4
+ import { LocalStorageProvider } from "../../utils/local-storage"
5
+
6
+ describe("Agreement component", () => {
7
+ beforeEach(() => {
8
+ localStorage.clear()
9
+ })
10
+ afterEach(() => {
11
+ localStorage.clear()
12
+ })
13
+ it("Accepting the agreement sets the 'agreement' property in localStorage", () => {
14
+ render(
15
+ <LocalStorageProvider defaultValue={{}}>
16
+ <Agreement />
17
+ </LocalStorageProvider>,
18
+ )
19
+ fireEvent.click(screen.getByRole("button"))
20
+ expect(JSON.parse(localStorage.getItem("openneuro")).agreement).toEqual(
21
+ true,
22
+ )
23
+ })
24
+ })
@@ -0,0 +1,76 @@
1
+ import React from "react"
2
+ import { useLocalStorage } from "../utils/local-storage"
3
+ import styled from "@emotion/styled"
4
+
5
+ export const STORAGE_KEY = "agreement"
6
+
7
+ const AgreementDiv = styled.div`
8
+ overflow: hidden;
9
+ position: fixed;
10
+ bottom: 0;
11
+ height: 96px;
12
+ width: 100%;
13
+ background: white;
14
+ z-index: 1005;
15
+ -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.5);
16
+ -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.5);
17
+ box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.5);
18
+ padding: 4px;
19
+ `
20
+
21
+ const AgreementButton = styled.div`
22
+ position: relative;
23
+ top: 50%;
24
+ transform: translateY(-50%);
25
+ `
26
+
27
+ /**
28
+ * Hook to use the download agreement state from localStorage
29
+ */
30
+ export function useAgreement() {
31
+ return useLocalStorage(STORAGE_KEY)
32
+ }
33
+
34
+ /**
35
+ * Floating agreement for data use that is only present if the user has not accepted this
36
+ */
37
+ export const Agreement = () => {
38
+ const [agreed, setAgreed] = useAgreement()
39
+
40
+ if (agreed) {
41
+ return null
42
+ } else {
43
+ return (
44
+ <AgreementDiv>
45
+ <div className="container">
46
+ <div className="grid grid-between">
47
+ <div className="col col-lg col-11">
48
+ The agreement text goes here. Lorem ipsum dolor sit amet,
49
+ consectetur adipiscing elit. Vivamus a condimentum nibh.
50
+ Pellentesque aliquet volutpat odio sit amet imperdiet. Praesent
51
+ erat lorem, varius in libero sit amet, pulvinar placerat enim. Sed
52
+ lacus nibh, dapibus vitae fermentum sit amet, volutpat at purus.
53
+ Cras accumsan, massa vitae sagittis cursus, magna lorem finibus
54
+ orci, sit amet sollicitudin arcu turpis quis mi. Aenean vel
55
+ feugiat arcu. Morbi congue nulla quam, eu hendrerit metus viverra
56
+ vel. Vestibulum non urna dignissim, tincidunt enim sit amet,
57
+ molestie nisi. Pellentesque sed lacus eu quam ultricies ultricies
58
+ at eu sem. Suspendisse sed eleifend lorem, vel fermentum odio.
59
+ Vivamus nunc lorem, ultricies vel tellus eget, molestie tristique
60
+ metus.
61
+ </div>
62
+ <div className="col col-lg col-1">
63
+ <AgreementButton
64
+ className="on-button on-button--small on-button--primary"
65
+ onClick={() => setAgreed(true)}
66
+ role="button"
67
+ >
68
+ I Agree
69
+ </AgreementButton>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </AgreementDiv>
74
+ )
75
+ }
76
+ }
@@ -593,29 +593,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
593
593
    CHANGES
594
594
  <span
595
595
  class="filetree-editfile"
596
- >
597
- <div
598
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
599
- />
600
- <span
601
- class=" "
602
- data-flow="up"
603
- data-tooltip="View"
604
- >
605
- <span
606
- class="edit-file view-file"
607
- >
608
- <a
609
- aria-label="view file"
610
- href="/datasets/ds001032/versions/1.0.0/file-display/CHANGES"
611
- >
612
- <i
613
- class="fa fa-eye"
614
- />
615
- </a>
616
- </span>
617
- </span>
618
- </span>
596
+ />
619
597
  </li>
620
598
  <li
621
599
  class="clearfix filetree-item filetree-file"
@@ -633,29 +611,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
633
611
    README
634
612
  <span
635
613
  class="filetree-editfile"
636
- >
637
- <div
638
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
639
- />
640
- <span
641
- class=" "
642
- data-flow="up"
643
- data-tooltip="View"
644
- >
645
- <span
646
- class="edit-file view-file"
647
- >
648
- <a
649
- aria-label="view file"
650
- href="/datasets/ds001032/versions/1.0.0/file-display/README"
651
- >
652
- <i
653
- class="fa fa-eye"
654
- />
655
- </a>
656
- </span>
657
- </span>
658
- </span>
614
+ />
659
615
  </li>
660
616
  <li
661
617
  class="clearfix filetree-item filetree-file"
@@ -673,29 +629,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
673
629
    T1w.json
674
630
  <span
675
631
  class="filetree-editfile"
676
- >
677
- <div
678
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
679
- />
680
- <span
681
- class=" "
682
- data-flow="up"
683
- data-tooltip="View"
684
- >
685
- <span
686
- class="edit-file view-file"
687
- >
688
- <a
689
- aria-label="view file"
690
- href="/datasets/ds001032/versions/1.0.0/file-display/T1w.json"
691
- >
692
- <i
693
- class="fa fa-eye"
694
- />
695
- </a>
696
- </span>
697
- </span>
698
- </span>
632
+ />
699
633
  </li>
700
634
  <li
701
635
  class="clearfix filetree-item filetree-file"
@@ -713,29 +647,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
713
647
    dataset_description.json
714
648
  <span
715
649
  class="filetree-editfile"
716
- >
717
- <div
718
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
719
- />
720
- <span
721
- class=" "
722
- data-flow="up"
723
- data-tooltip="View"
724
- >
725
- <span
726
- class="edit-file view-file"
727
- >
728
- <a
729
- aria-label="view file"
730
- href="/datasets/ds001032/versions/1.0.0/file-display/dataset_description.json"
731
- >
732
- <i
733
- class="fa fa-eye"
734
- />
735
- </a>
736
- </span>
737
- </span>
738
- </span>
650
+ />
739
651
  </li>
740
652
  <li
741
653
  class="clearfix filetree-item filetree-file"
@@ -753,29 +665,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
753
665
    participants.tsv
754
666
  <span
755
667
  class="filetree-editfile"
756
- >
757
- <div
758
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
759
- />
760
- <span
761
- class=" "
762
- data-flow="up"
763
- data-tooltip="View"
764
- >
765
- <span
766
- class="edit-file view-file"
767
- >
768
- <a
769
- aria-label="view file"
770
- href="/datasets/ds001032/versions/1.0.0/file-display/participants.tsv"
771
- >
772
- <i
773
- class="fa fa-eye"
774
- />
775
- </a>
776
- </span>
777
- </span>
778
- </span>
668
+ />
779
669
  </li>
780
670
  <li
781
671
  class="clearfix filetree-item filetree-dir"
@@ -913,49 +803,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
913
803
    CHANGES
914
804
  <span
915
805
  class="filetree-editfile"
916
- >
917
- <div
918
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
919
- >
920
- <span
921
- class=" "
922
- data-flow="up"
923
- data-tooltip="Download: 52B"
924
- >
925
- <span
926
- class="edit-file download-file"
927
- >
928
- <a
929
- aria-label="download file"
930
- download=""
931
- href="/crn/datasets/ds001032/snapshots/1.0.0/files/CHANGES"
932
- >
933
- <i
934
- class="fa fa-download"
935
- />
936
- </a>
937
- </span>
938
- </span>
939
- </div>
940
- <span
941
- class=" "
942
- data-flow="up"
943
- data-tooltip="View"
944
- >
945
- <span
946
- class="edit-file view-file"
947
- >
948
- <a
949
- aria-label="view file"
950
- href="/datasets/ds001032/versions/1.0.0/file-display/CHANGES"
951
- >
952
- <i
953
- class="fa fa-eye"
954
- />
955
- </a>
956
- </span>
957
- </span>
958
- </span>
806
+ />
959
807
  </li>
960
808
  <li
961
809
  class="clearfix filetree-item filetree-file"
@@ -973,49 +821,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
973
821
    README
974
822
  <span
975
823
  class="filetree-editfile"
976
- >
977
- <div
978
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
979
- >
980
- <span
981
- class=" "
982
- data-flow="up"
983
- data-tooltip="Download: 709B"
984
- >
985
- <span
986
- class="edit-file download-file"
987
- >
988
- <a
989
- aria-label="download file"
990
- download=""
991
- href="/crn/datasets/ds001032/snapshots/1.0.0/files/README"
992
- >
993
- <i
994
- class="fa fa-download"
995
- />
996
- </a>
997
- </span>
998
- </span>
999
- </div>
1000
- <span
1001
- class=" "
1002
- data-flow="up"
1003
- data-tooltip="View"
1004
- >
1005
- <span
1006
- class="edit-file view-file"
1007
- >
1008
- <a
1009
- aria-label="view file"
1010
- href="/datasets/ds001032/versions/1.0.0/file-display/README"
1011
- >
1012
- <i
1013
- class="fa fa-eye"
1014
- />
1015
- </a>
1016
- </span>
1017
- </span>
1018
- </span>
824
+ />
1019
825
  </li>
1020
826
  <li
1021
827
  class="clearfix filetree-item filetree-file"
@@ -1033,49 +839,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
1033
839
    T1w.json
1034
840
  <span
1035
841
  class="filetree-editfile"
1036
- >
1037
- <div
1038
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
1039
- >
1040
- <span
1041
- class=" "
1042
- data-flow="up"
1043
- data-tooltip="Download: 196B"
1044
- >
1045
- <span
1046
- class="edit-file download-file"
1047
- >
1048
- <a
1049
- aria-label="download file"
1050
- download=""
1051
- href="/crn/datasets/ds001032/snapshots/1.0.0/files/T1w.json"
1052
- >
1053
- <i
1054
- class="fa fa-download"
1055
- />
1056
- </a>
1057
- </span>
1058
- </span>
1059
- </div>
1060
- <span
1061
- class=" "
1062
- data-flow="up"
1063
- data-tooltip="View"
1064
- >
1065
- <span
1066
- class="edit-file view-file"
1067
- >
1068
- <a
1069
- aria-label="view file"
1070
- href="/datasets/ds001032/versions/1.0.0/file-display/T1w.json"
1071
- >
1072
- <i
1073
- class="fa fa-eye"
1074
- />
1075
- </a>
1076
- </span>
1077
- </span>
1078
- </span>
842
+ />
1079
843
  </li>
1080
844
  <li
1081
845
  class="clearfix filetree-item filetree-file"
@@ -1093,49 +857,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
1093
857
    dataset_description.json
1094
858
  <span
1095
859
  class="filetree-editfile"
1096
- >
1097
- <div
1098
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
1099
- >
1100
- <span
1101
- class=" "
1102
- data-flow="up"
1103
- data-tooltip="Download: 172B"
1104
- >
1105
- <span
1106
- class="edit-file download-file"
1107
- >
1108
- <a
1109
- aria-label="download file"
1110
- download=""
1111
- href="/crn/datasets/ds001032/snapshots/1.0.0/files/dataset_description.json"
1112
- >
1113
- <i
1114
- class="fa fa-download"
1115
- />
1116
- </a>
1117
- </span>
1118
- </span>
1119
- </div>
1120
- <span
1121
- class=" "
1122
- data-flow="up"
1123
- data-tooltip="View"
1124
- >
1125
- <span
1126
- class="edit-file view-file"
1127
- >
1128
- <a
1129
- aria-label="view file"
1130
- href="/datasets/ds001032/versions/1.0.0/file-display/dataset_description.json"
1131
- >
1132
- <i
1133
- class="fa fa-eye"
1134
- />
1135
- </a>
1136
- </span>
1137
- </span>
1138
- </span>
860
+ />
1139
861
  </li>
1140
862
  <li
1141
863
  class="clearfix filetree-item filetree-file"
@@ -1153,49 +875,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
1153
875
    participants.tsv
1154
876
  <span
1155
877
  class="filetree-editfile"
1156
- >
1157
- <div
1158
- class="fresnel-container fresnel-greaterThanOrEqual-medium "
1159
- >
1160
- <span
1161
- class=" "
1162
- data-flow="up"
1163
- data-tooltip="Download: 36B"
1164
- >
1165
- <span
1166
- class="edit-file download-file"
1167
- >
1168
- <a
1169
- aria-label="download file"
1170
- download=""
1171
- href="/crn/datasets/ds001032/snapshots/1.0.0/files/participants.tsv"
1172
- >
1173
- <i
1174
- class="fa fa-download"
1175
- />
1176
- </a>
1177
- </span>
1178
- </span>
1179
- </div>
1180
- <span
1181
- class=" "
1182
- data-flow="up"
1183
- data-tooltip="View"
1184
- >
1185
- <span
1186
- class="edit-file view-file"
1187
- >
1188
- <a
1189
- aria-label="view file"
1190
- href="/datasets/ds001032/versions/1.0.0/file-display/participants.tsv"
1191
- >
1192
- <i
1193
- class="fa fa-eye"
1194
- />
1195
- </a>
1196
- </span>
1197
- </span>
1198
- </span>
878
+ />
1199
879
  </li>
1200
880
  <li
1201
881
  class="clearfix filetree-item filetree-dir"
@@ -0,0 +1,38 @@
1
+ import React from "react"
2
+ import { Tooltip } from "@openneuro/components/tooltip"
3
+ import { Button } from "@openneuro/components/button"
4
+
5
+ export interface BrainLifeButtonProps {
6
+ datasetId: string
7
+ snapshotVersion?: string
8
+ onBrainlife: boolean
9
+ }
10
+
11
+ export const BrainLifeButton: React.FC<BrainLifeButtonProps> = ({
12
+ datasetId,
13
+ snapshotVersion,
14
+ onBrainlife,
15
+ }) => {
16
+ const url = snapshotVersion
17
+ ? `https://brainlife.io/openneuro/${datasetId}/${snapshotVersion}`
18
+ : `https://brainlife.io/openneuro/${datasetId}`
19
+ return (
20
+ <>
21
+ {onBrainlife && (
22
+ <div className="brainlife-block">
23
+ <Tooltip tooltip="Analyze on brainlife" flow="up">
24
+ <Button
25
+ className="brainlife-link"
26
+ primary={true}
27
+ size="small"
28
+ onClick={() => {
29
+ window.open(url, "_blank")
30
+ }}
31
+ label="brainlife.io"
32
+ />
33
+ </Tooltip>
34
+ </div>
35
+ )}
36
+ </>
37
+ )
38
+ }
@@ -0,0 +1,31 @@
1
+ import React from "react"
2
+ import { Dropdown } from "@openneuro/components/dropdown"
3
+ import { Button } from "@openneuro/components/button"
4
+
5
+ export interface CloneDropdownProps {
6
+ gitAccess: React.ReactNode
7
+ }
8
+
9
+ export const CloneDropdown: React.FC<CloneDropdownProps> = ({ gitAccess }) => {
10
+ return (
11
+ <div className="clone-dropdown">
12
+ <Dropdown
13
+ label={
14
+ <Button
15
+ className="clone-link"
16
+ primary={true}
17
+ size="small"
18
+ label="Clone"
19
+ >
20
+ <i className="fas fa-caret-up"></i>
21
+ <i className="fas fa-caret-down"></i>
22
+ </Button>
23
+ }
24
+ >
25
+ <div>
26
+ <span>{gitAccess}</span>
27
+ </div>
28
+ </Dropdown>
29
+ </div>
30
+ )
31
+ }
@@ -0,0 +1,25 @@
1
+ import React from "react"
2
+
3
+ export interface DatasetAlertProps {
4
+ alert: string
5
+ footer?: string
6
+ level?: "warning" | "error" | "info"
7
+ }
8
+
9
+ export const DatasetAlert: React.FC<DatasetAlertProps> = ({
10
+ alert,
11
+ children,
12
+ footer,
13
+ level,
14
+ }) => (
15
+ <div
16
+ className={level ? `dataset-header-alert ${level}` : "dataset-header-alert"}
17
+ role="alert"
18
+ >
19
+ <span>
20
+ <strong>{alert}&#32;</strong>
21
+ {children}
22
+ </span>
23
+ {footer && <small>{footer}</small>}
24
+ </div>
25
+ )