@openneuro/app 4.38.0-alpha.1 → 4.38.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.38.0-alpha.1",
+  "version": "4.38.0-alpha.2",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c7a1350704df419d17999699e056030b9aa0bd66"
+  "gitHead": "a2a301d754891d76a04c1ae91fde268419f0b5ca"
 }

package/src/scripts/datalad/dataset/dataset-query-fragments.js

@@ -9,6 +9,18 @@ export const DRAFT_FRAGMENT = gql`
       readme
       head
       size
+      fileCheck {
+        datasetId
+        hexsha
+        refs
+        remote
+        annexFsck {
+          errorMessages
+          file
+          key
+          success
+        }
+      }
       description {
         Name
         Authors

package/src/scripts/dataset/fragments/file-check-list.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import styles from "./scss/file-check-list.module.scss"
+
+export const FileCheckList = ({ fileCheck }) => {
+  if (!fileCheck) return null
+  return (
+    <div className={styles["fileCheck-container"]}>
+      {fileCheck.annexFsck.map((item, index) => (
+        <div key={index} className={styles["fileCheck-card"]}>
+          <div className={styles["fileCheck-header"]}>
+            <span className={styles["fileCheck-fileIcon"]}>
+              <i className="fas fa-file"></i>
+            </span>
+            <span className={styles["fileCheck-fileName"]}>{item.file}</span>
+          </div>
+          <div className={styles["fileCheck-body"]}>
+            <div className={styles["fileCheck-key"]}>
+              <span className={styles["fileCheck-label"]}>Key:</span>
+              <span className={styles["fileCheck-value"]}>{item.key}</span>
+            </div>
+            {item.errorMessages && item.errorMessages.length > 0 && (
+              <div className={styles["fileCheck-errors"]}>
+                <span className={styles["fileCheck-errorIcon"]}>
+                  <i className="fas fa-exclamation"></i>
+                </span>
+                <span className={styles["fileCheck-label"]}>Errors:</span>
+                <ul className={styles["fileCheck-errorList"]}>
+                  {item.errorMessages.map((msg, i) => <li key={i}>{msg}</li>)}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/scripts/dataset/fragments/scss/file-check-list.module.scss

@@ -0,0 +1,79 @@
+$error: #B04E4B;
+$offWhite: #e0e0e0;
+$midGray_A: #f7f7f768;
+$errorBG_A: #ffdfde5e;
+
+.fileCheck-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  font-family: Arial, sans-serif;
+  margin-top: 20px;
+}
+
+.fileCheck-card {
+  background-color: #ffffff;
+  border: 1px solid $offWhite;
+  overflow: hidden;
+  transition: transform 0.2s;
+  &:hover {
+   background-color: #faf3f3;
+  }
+
+}
+
+.fileCheck-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: $midGray_A;
+  border-bottom: 1px solid $offWhite;
+  
+  .fileCheck-fileIcon {
+    margin-right: 8px;
+    font-size: 1.2rem;
+  }
+  
+  .fileCheck-fileName {
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.fileCheck-body {
+  padding: 0;
+  .fileCheck-key{
+    padding: 16px;
+  }
+  .fileCheck-label {
+    font-weight: bold;
+    color: #555;
+    margin-right: 5px;
+  }
+  
+  .fileCheck-value {
+    word-break: break-all;
+    color: #777;
+  }
+}
+
+.fileCheck-errors {
+  margin-top: 0;
+  padding: 12px;
+  background-color: $errorBG_A;
+  border-left: 4px solid $error;
+  
+  .fileCheck-errorIcon {
+    color: $error;
+    margin-right: 8px;
+  }
+  
+  .fileCheck-errorList {
+    margin: 0;
+    padding-left: 20px;
+    color: $error;
+    list-style-type: disc;
+  }
+}
+
+

package/src/scripts/dataset/routes/snapshot.tsx

@@ -9,29 +9,41 @@ import { HeaderRow4 } from "./styles/header-row"
 import FileView from "../files/file-view"
 import styled from "@emotion/styled"
 import { apiPath } from "../files/file"
+import { FileCheckList } from "../fragments/file-check-list"
 
 const FormRow = styled.div`
   margin-top: 0;
   margin-bottom: 1.3em;
 `
 
-export const NoErrors = ({ validation, authors, children }) => {
+export const NoErrors = ({ validation, authors, fileCheck, children }) => {
   const noErrors = validation?.errors === 0
   // zero authors will cause DOI minting to fail
   const hasAuthor = authors?.length > 0
-  if (noErrors && hasAuthor) {
+  const fileCheckFinish = fileCheck !== null
+  const noBadFiles = fileCheck?.annexFsck?.length === 0
+  if (noBadFiles && noErrors && hasAuthor) {
     return children
   } else {
     const correctErrorsMessage =
       "BIDS validation must be complete and all errors corrected"
     const noAuthorMessage =
       '"Authors" must include at least one entry in dataset_description.json'
+    const fileChecksPendingMessage =
+      "file integrity checks are pending and may take a few minutes to complete. Please wait a few minutes"
+    const badFilesMessage =
+      "one or more files in the most recent draft are missing or do not match checksums. Please reupload any files listed below"
     const includedMessages = []
     if (!noErrors) includedMessages.push(correctErrorsMessage)
     if (!hasAuthor) includedMessages.push(noAuthorMessage)
+    if (!fileCheckFinish) includedMessages.push(fileChecksPendingMessage)
+    if (fileCheckFinish && !noBadFiles) includedMessages.push(badFilesMessage)
     return (
       <span className="text-danger">
         {`${includedMessages.join(" and ")} to create a version`}
+        {fileCheckFinish && !noBadFiles && (
+          <FileCheckList fileCheck={fileCheck} />
+        )}
       </span>
     )
   }
@@ -42,6 +54,7 @@ const SnapshotRoute = ({
   snapshots,
   validation,
   description,
+  fileCheck,
 }): React.ReactElement => {
   const [changes, setChanges] = useState([])
   const [semanticLevel, setSemanticLevel] = useState("patch")
@@ -122,7 +135,11 @@ const SnapshotRoute = ({
             setElements={setChanges}
           />
         </div>
-        <NoErrors validation={validation} authors={description.Authors}>
+        <NoErrors
+          validation={validation}
+          authors={description.Authors}
+          fileCheck={fileCheck}
+        >
           {changes.length ? null : (
             <small className="text-danger">
               You must add at least one change message to create a new version

package/src/scripts/dataset/routes/tab-routes-draft.tsx

@@ -48,6 +48,7 @@ export const TabRoutesDraft = ({ dataset, hasEdit }) => {
             snapshots={dataset.snapshots}
             validation={dataset.draft.validation}
             description={dataset.draft.description}
+            fileCheck={dataset.draft.fileCheck}
           />
         }
       />