@openneuro/app 4.20.6 → 4.21.0-alpha.3

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 -354
  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.3",
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.3",
24
+ "@openneuro/components": "^4.21.0-alpha.3",
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": "bf7cd2056ff18856d46c269d70544f385c30731e"
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
+ }
@@ -431,30 +431,6 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
431
431
  </a>
432
432
  </span>
433
433
  </span>
434
- <span
435
- class="css-1an2ojl"
436
- >
437
- <span
438
- class=" "
439
- data-flow="up"
440
- data-tooltip="How to Download"
441
- >
442
- <a
443
- href="/datasets/ds001032/versions/1.0.0/download"
444
- >
445
- <span
446
- aria-label="Download"
447
- class=" on-icon icon-text "
448
- role="img"
449
- >
450
- <i
451
- class="fa fa-download"
452
- />
453
- Download
454
- </span>
455
- </a>
456
- </span>
457
- </span>
458
434
  <span
459
435
  class="css-1an2ojl"
460
436
  >
@@ -593,29 +569,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
593
569
    CHANGES
594
570
  <span
595
571
  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>
572
+ />
619
573
  </li>
620
574
  <li
621
575
  class="clearfix filetree-item filetree-file"
@@ -633,29 +587,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
633
587
    README
634
588
  <span
635
589
  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>
590
+ />
659
591
  </li>
660
592
  <li
661
593
  class="clearfix filetree-item filetree-file"
@@ -673,29 +605,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
673
605
    T1w.json
674
606
  <span
675
607
  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>
608
+ />
699
609
  </li>
700
610
  <li
701
611
  class="clearfix filetree-item filetree-file"
@@ -713,29 +623,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
713
623
    dataset_description.json
714
624
  <span
715
625
  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>
626
+ />
739
627
  </li>
740
628
  <li
741
629
  class="clearfix filetree-item filetree-file"
@@ -753,29 +641,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
753
641
    participants.tsv
754
642
  <span
755
643
  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>
644
+ />
779
645
  </li>
780
646
  <li
781
647
  class="clearfix filetree-item filetree-dir"
@@ -913,49 +779,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
913
779
    CHANGES
914
780
  <span
915
781
  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>
782
+ />
959
783
  </li>
960
784
  <li
961
785
  class="clearfix filetree-item filetree-file"
@@ -973,49 +797,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
973
797
    README
974
798
  <span
975
799
  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>
800
+ />
1019
801
  </li>
1020
802
  <li
1021
803
  class="clearfix filetree-item filetree-file"
@@ -1033,49 +815,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
1033
815
    T1w.json
1034
816
  <span
1035
817
  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>
818
+ />
1079
819
  </li>
1080
820
  <li
1081
821
  class="clearfix filetree-item filetree-file"
@@ -1093,49 +833,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
1093
833
    dataset_description.json
1094
834
  <span
1095
835
  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>
836
+ />
1139
837
  </li>
1140
838
  <li
1141
839
  class="clearfix filetree-item filetree-file"
@@ -1153,49 +851,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
1153
851
    participants.tsv
1154
852
  <span
1155
853
  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>
854
+ />
1199
855
  </li>
1200
856
  <li
1201
857
  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
+ }