@openneuro/app 4.33.4 → 4.34.0

package/src/scripts/components/warn-button/WarnButton.tsx

@@ -0,0 +1,97 @@
+import React from "react"
+import type { FC } from "react"
+import "./warn-button.scss"
+import { Tooltip } from "../tooltip/Tooltip"
+import { Button } from "../button/Button"
+
+export interface WarnButtonProps {
+  message?: string
+  icon?: string
+  className?: string
+  disabled?: boolean
+  tooltip?: string
+  iconOnly?: boolean
+  onConfirmedClick?: () => void
+  displayOptions?: boolean
+  setDisplayOptions?(cb: (currentState: boolean) => boolean): void
+  withLabel?: boolean
+}
+export const WarnButton: FC<WarnButtonProps> = ({
+  message,
+  icon,
+  className,
+  disabled,
+  tooltip,
+  iconOnly,
+  onConfirmedClick,
+  displayOptions,
+  setDisplayOptions,
+  withLabel,
+}) => {
+  if (displayOptions === undefined || displayOptions === null) {
+    ;[displayOptions, setDisplayOptions] = React.useState(false as boolean)
+  }
+  const viewAction = (
+    <div
+      className={withLabel ? "warn-btn-group with-label" : "warn-btn-group"}
+      role="group"
+    >
+      <div className="slide-in">
+        <Button
+          className="btn-warn-component cancel"
+          iconSize="12px"
+          iconOnly={iconOnly}
+          icon="fa fa-times"
+          color="#fff"
+          backgroundColor="#c00342"
+          onClick={() => setDisplayOptions((currentState) => !currentState)}
+          size="xsmall"
+          label="cancel"
+        />
+
+        <Button
+          className="btn-warn-component success"
+          iconSize="12px"
+          icon="fa fa-check"
+          color="#fff"
+          iconOnly={iconOnly}
+          backgroundColor="#00b489"
+          onClick={() => {
+            onConfirmedClick()
+            setDisplayOptions((currentState) => !currentState)
+          }}
+          size="xsmall"
+          label="confirm"
+        />
+      </div>
+    </div>
+  )
+
+  const hideAction = (
+    <span className={disabled ? " disabled warn-btn-click" : "warn-btn-click"}>
+      <Button
+        className="btn-warn-component"
+        iconSize="12px"
+        icon={"fa " + icon}
+        label={message}
+        onClick={() =>
+          setDisplayOptions((currentState) => !currentState)}
+        disabled={disabled}
+      />
+    </span>
+  )
+
+  const button = displayOptions ? viewAction : hideAction
+
+  return (
+    <div className={"warn-btn " + (className || "")}>
+      {tooltip
+        ? (
+          <Tooltip flow="up" tooltip={tooltip}>
+            {button}
+          </Tooltip>
+        )
+        : button}
+    </div>
+  )
+}

package/src/scripts/components/warn-button/warn-button.scss

@@ -0,0 +1,39 @@
+.warn-btn {
+  .btn-warn-component {
+    padding: 10px;
+  }
+  .slide-in {
+    display: flex;
+    overflow: hidden;
+  }
+  .warn-btn-group {
+    opacity: 1;
+    transition: opacity 0.3s;
+    animation: fade 0.4s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    button {
+      margin: 5px;
+      padding: 6px;
+      width: 26px;
+      height: 26px;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+    &.with-label {
+      button {
+        width: auto;
+      }
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -5,6 +5,8 @@ const DatasetQueryContext = React.createContext({
   datasetId: null,
   fetchMore: null,
   error: null,
+  stopPolling: null,
+  startPolling: null,
 })
 
 export default DatasetQueryContext

package/src/scripts/dataset/comments/comment.jsx

@@ -10,7 +10,7 @@ import AdminUser from "../../authentication/admin-user.jsx"
 import LoggedIn from "../../authentication/logged-in.jsx"
 import { toast } from "react-toastify"
 import ToastContent from "../../common/partials/toast-content"
-import { Icon } from "@openneuro/components/icon"
+import { Icon } from "../../components/icon/Icon"
 import { Username } from "../../users/username"
 
 const Comment = ({ datasetId, data, children }) => {

package/src/scripts/dataset/components/AnalyzeDropdown.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Dropdown } from "@openneuro/components/dropdown"
-import { Button } from "@openneuro/components/button"
+import { Dropdown } from "../../components/dropdown/Dropdown"
+import { Button } from "../../components/button/Button"
 import styled from "@emotion/styled"
 import BrainlifeIcon from "../../../assets/external/brainlife.png"
 import NemarIcon from "../../../assets/external/nemar.png"

package/src/scripts/dataset/components/CloneDropdown.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Dropdown } from "@openneuro/components/dropdown"
-import { Button } from "@openneuro/components/button"
+import { Dropdown } from "../../components/dropdown/Dropdown"
+import { Button } from "../../components/button/Button"
 
 export interface CloneDropdownProps {
   gitAccess: React.ReactNode

package/src/scripts/dataset/components/DatasetEventItem.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from "react"
+import styles from "./scss/dataset-events.module.scss"
+
+interface Event {
+  id: string
+  timestamp: string
+  note?: string
+  event: { type: string }
+  user?: { name?: string; email?: string }
+}
+
+interface DatasetEventItemProps {
+  event: Event
+  editingNoteId: string | null
+  updatedNote: string
+  startEditingNote: (id: string, note: string) => void
+  handleUpdateNote: () => void
+  setUpdatedNote: (note: string) => void
+}
+
+export const DatasetEventItem: React.FC<DatasetEventItemProps> = ({
+  event,
+  editingNoteId,
+  updatedNote,
+  startEditingNote,
+  handleUpdateNote,
+  setUpdatedNote,
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+  // Function to adjust/resize the height
+  const adjustTextareaHeight = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto"
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
+    }
+  }
+
+  useEffect(() => {
+    adjustTextareaHeight()
+  }, [updatedNote])
+
+  return (
+    <li>
+      <div className="grid faux-table">
+        <div className="col-lg col col-5">
+          {editingNoteId === event.id
+            ? (
+              <textarea
+                ref={textareaRef}
+                className={styles.dse_inlineForm}
+                value={updatedNote}
+                onChange={(e) => {
+                  setUpdatedNote(e.target.value)
+                  adjustTextareaHeight()
+                }}
+                style={{ overflow: "hidden", resize: "none" }}
+              />
+            )
+            : event.event.type === "note"
+            ? (
+              <pre
+                style={{
+                  whiteSpace: "pre-wrap",
+                  margin: 0,
+                  background: "transparent",
+                  overflow: "visible",
+                  border: 0,
+                }}
+              >
+              {event.note}
+              </pre>
+            )
+            : (
+              event.event.type
+            )}
+        </div>
+        <div className="col-lg col col-3">
+          {new Date(event.timestamp).toLocaleString()}
+        </div>
+        <div className="col-lg col col-3">
+          {event.user?.name || event.user?.email || "Unknown"}
+        </div>
+        <div className="col-lg col col-1">
+          {event.event.type === "note" && editingNoteId !== event.id && (
+            <button
+              onClick={() => startEditingNote(event.id, event.note || "")}
+              className="on-button on-button--small on-button--primary"
+            >
+              Edit
+            </button>
+          )}
+          {editingNoteId === event.id && (
+            <button
+              onClick={handleUpdateNote}
+              className="on-button on-button--small on-button--primary"
+            >
+              Save
+            </button>
+          )}
+        </div>
+      </div>
+    </li>
+  )
+}

package/src/scripts/dataset/components/DatasetGitAccess.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Tooltip } from "@openneuro/components/tooltip"
-import { Button } from "@openneuro/components/button"
+import { Tooltip } from "../../components/tooltip/Tooltip"
+import { Button } from "../../components/button/Button"
 
 function copyToClipboard(text) {
   navigator.clipboard.writeText(text)

package/src/scripts/dataset/components/DatasetToolButton.tsx

@@ -2,8 +2,8 @@ import React from "react"
 import styled from "@emotion/styled"
 import type { StyledComponent } from "@emotion/styled"
 import { Link } from "react-router-dom"
-import { Tooltip } from "@openneuro/components/tooltip"
-import { Icon } from "@openneuro/components/icon"
+import { Tooltip } from "../../components/tooltip/Tooltip"
+import { Icon } from "../../components/icon/Icon"
 import { useLocation } from "react-router-dom"
 
 interface DatasetToolStyleProps {

package/src/scripts/dataset/components/ModalitiesMetaDataBlock.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { Link } from "react-router-dom"
+import { ModalityLabel } from "../../components/formatting/modality-label"
 
 export interface ModalitiesMetaDataBlockProps {
   items: string[]
@@ -10,21 +11,12 @@ export const ModalitiesMetaDataBlock = ({
   items,
   className,
 }: ModalitiesMetaDataBlockProps) => {
-  const customCase = {
-    mri: "MRI",
-    ieeg: "iEEG",
-    pet: "PET",
-    eeg: "EEG",
-    meg: "MEG",
-  }
   return (
     <div className={"dataset-meta-block " + className}>
       <h2 className="dmb-heading">Available Modalities</h2>
       {items.map((item, index) => (
         <Link key={index} to={"/search/modality/" + item.toLowerCase()}>
-          {item.toLowerCase() in customCase
-            ? customCase[item.toLowerCase()]
-            : item}
+          <ModalityLabel modality={item} />
         </Link>
       ))}
     </div>

package/src/scripts/dataset/components/ValidationBlock.tsx

@@ -1,7 +1,9 @@
-import React from "react"
+import React, { useContext } from "react"
+import * as Sentry from "@sentry/react"
 import { Validation, ValidationPending } from "../../validation/validation"
 import LegacyValidation from "../../validation-legacy/validation.jsx"
 import type { Issue } from "@bids/validator/issues"
+import DatasetQueryContext from "../../datalad/dataset/dataset-query-context.js"
 
 // TODO - Generate from GraphQL
 interface CodeMessageInput {
@@ -38,6 +40,40 @@ export const ValidationBlock: React.FC<ValidationBlockProps> = ({
   issuesStatus,
   validation,
 }) => {
+  const { stopPolling, startPolling } = useContext(DatasetQueryContext)
+
+  // Function to stop polling if issuesStatus or validation exists
+  const stopPollingValidation = () => {
+    if (issuesStatus || validation) {
+      if (typeof stopPolling === "function") {
+        try {
+          stopPolling()
+        } catch (error) {
+          Sentry.captureException(error)
+        }
+      }
+    }
+  }
+
+  // Function to start polling if ValidationPending is shown.
+  const startPollingValidation = () => {
+    if (!issuesStatus && !validation) {
+      if (typeof startPolling === "function") {
+        try {
+          startPolling(10000) // 10s poll interval
+        } catch (error) {
+          Sentry.captureException(error)
+        }
+      }
+    }
+  }
+
+  // Stop polling on render if validation or issuesStatus exists.
+  React.useEffect(() => {
+    stopPollingValidation()
+    startPollingValidation()
+  }, [issuesStatus, validation, stopPolling, startPolling])
+
   if (issuesStatus) {
     return (
       <div className="validation-accordion">
@@ -49,7 +85,6 @@ export const ValidationBlock: React.FC<ValidationBlockProps> = ({
       </div>
     )
   } else {
-    // If data exists, populate this. Otherwise we show pending.
     if (validation) {
       return (
         <div className="validation-accordion">

package/src/scripts/dataset/components/VersionList.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Link } from "react-router-dom"
-import { Dropdown } from "@openneuro/components/dropdown"
+import { Dropdown } from "../../components/dropdown/Dropdown"
 import { formatDate } from "../../utils/date"
 
 export interface VersionListProps {

package/src/scripts/dataset/components/scss/dataset-events.module.scss

@@ -0,0 +1,41 @@
+.datasetEvents {
+  .datasetEventHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      padding: 0;
+      &:nth-child(odd) {
+        background-color: #f4f4f4;
+      }
+    }
+  }
+  .addEventForm {
+    width: 50%;
+    margin: 10px auto 30px;
+    text-align: right;
+    input {
+      min-width: 100%;
+      display: block;
+    }
+    textarea {
+      margin: 20px 0 10px;
+      min-width: 100%;
+      display: block;
+      min-height: 100px;
+    }
+  }
+}
+
+.dse_inlineForm{
+    width: 100%;
+    margin:0 0 0 -20px;
+    padding: 10px 20px;
+    line-height: 20px;
+  }
+

package/src/scripts/dataset/dataset-query.jsx

@@ -3,7 +3,7 @@ import * as Sentry from "@sentry/react"
 import PropTypes from "prop-types"
 import { useNavigate, useParams } from "react-router-dom"
 import { useApolloClient, useQuery } from "@apollo/client"
-import { Loading } from "@openneuro/components/loading"
+import { Loading } from "../components/loading/Loading"
 
 import DatasetQueryContext from "../datalad/dataset/dataset-query-context.js"
 import DatasetContext from "../datalad/dataset/dataset-context.js"
@@ -25,15 +25,15 @@ import { getDatasetPage, getDraftPage } from "../queries/dataset"
  */
 export const DatasetQueryHook = ({ datasetId, draft }) => {
   const navigate = useNavigate()
-  const { data, loading, error, fetchMore } = useQuery(
-    draft ? getDraftPage : getDatasetPage,
-    {
-      variables: { datasetId },
-      fetchPolicy: "cache-and-network",
-      nextFetchPolicy: "cache-first",
-    },
-  )
-
+  const { data, loading, error, fetchMore, stopPolling, startPolling } =
+    useQuery(
+      draft ? getDraftPage : getDatasetPage,
+      {
+        variables: { datasetId },
+        fetchPolicy: "cache-and-network",
+        nextFetchPolicy: "cache-first",
+      },
+    )
   if (error) {
     if (error.message === "You do not have access to read this dataset.") {
       return <FourOThreePage />
@@ -61,7 +61,6 @@ export const DatasetQueryHook = ({ datasetId, draft }) => {
       )
     }
   }
-
   return (
     <DatasetContext.Provider value={data.dataset}>
       <ErrorBoundary subject={"error in dataset page"}>
@@ -70,6 +69,8 @@ export const DatasetQueryHook = ({ datasetId, draft }) => {
             datasetId,
             fetchMore,
             error,
+            stopPolling,
+            startPolling,
           }}
         >
           <DatasetRoutes dataset={data.dataset} />

package/src/scripts/dataset/download/__tests__/__snapshots__/download-command-line.spec.jsx.snap

@@ -6,7 +6,13 @@ exports[`dataset/download > DownloadSampleCommand component > renders successful
     class="css-xak41w"
     role="figure"
   >
-    openneuro download --draft ds000001 ds000001-download/
+    # Login by following the prompts
+    <br />
+    deno run -A jsr:@openneuro/cli login
+    <br />
+    # Download the repository
+    <br />
+    deno run -A jsr:@openneuro/cli download --draft ds000001 ds000001-download/
   </pre>
 </DocumentFragment>
 `;

package/src/scripts/dataset/download/__tests__/download-command-line.spec.jsx

@@ -13,11 +13,11 @@ describe("dataset/download", () => {
     it("drafts show draft flag", () => {
       render(<DownloadSampleCommand {...defProps} />)
       expect(screen.getByRole("figure")).toHaveTextContent("--draft")
-      expect(screen.queryByText("--snapshot")).not.toBeInTheDocument()
+      expect(screen.queryByText("--version")).not.toBeInTheDocument()
     })
     it("snapshots show snapshot flag", () => {
       render(<DownloadSampleCommand {...defProps} snapshotTag="1.0.0" />)
-      expect(screen.getByRole("figure")).toHaveTextContent("--snapshot")
+      expect(screen.getByRole("figure")).toHaveTextContent("--version")
       expect(screen.queryByText("--draft")).not.toBeInTheDocument()
     })
   })

package/src/scripts/dataset/download/download-command-line.jsx

@@ -4,9 +4,12 @@ import ShellExample from "./shell-example.jsx"
 
 export const DownloadSampleCommand = ({ datasetId, snapshotTag }) => (
   <ShellExample role="figure">
-    openneuro download {snapshotTag ? `--snapshot ${snapshotTag}` : "--draft"}
-    {" "}
-    {datasetId} {datasetId}
+    # Login by following the prompts<br />
+    deno run -A jsr:@openneuro/cli login<br />
+    # Download the repository<br />
+    deno run -A jsr:@openneuro/cli download{" "}
+    {snapshotTag ? `--version ${snapshotTag}` : "--draft"} {datasetId}{" "}
+    {datasetId}
     -download/
   </ShellExample>
 )
@@ -18,22 +21,23 @@ DownloadSampleCommand.propTypes = {
 
 const DownloadCommandLine = ({ datasetId, snapshotTag }) => (
   <div>
-    <h4>Download with Node.js</h4>
+    <h4>Download with Deno</h4>
     <p>
-      Using{" "}
-      <a href="https://www.npmjs.com/package/@openneuro/cli">@openneuro/cli</a>
-      {" "}
+      Using <a href="https://jsr.io/@openneuro/cli">@openneuro/cli</a>{" "}
       you can download this dataset from the command line using{" "}
-      <a href="https://nodejs.org/en/download/">Node.js</a>. This method is good
-      for larger datasets or unstable connections, but has known issues on
-      Windows.
+      <a href="https://docs.deno.com/runtime/getting_started/installation/">
+        Deno
+      </a>.
     </p>
     <DownloadSampleCommand datasetId={datasetId} snapshotTag={snapshotTag} />
     <p>
-      This will download to {datasetId}
-      -download/ in the current directory. If your download is interrupted and
-      you need to retry, rerun the command to resume the download.
+      This will download a DataLad dataset to {datasetId}
+      -download/ in the current directory. To download annexed files, use
+      datalad or git-annex.
     </p>
+    <ShellExample>
+      cd {datasetId}-download && datalad get [PATH]
+    </ShellExample>
   </div>
 )
 

package/src/scripts/dataset/download/download-datalad.jsx

@@ -27,9 +27,12 @@ const DownloadDataladExample = ({
         .git
       </ShellExample>
       {hasEdit && (
-        <ShellExample>
-          datalad install {config.url}/git/{workerId}/{datasetId}
-        </ShellExample>
+        <>
+          <p>Directly from OpenNeuro:</p>
+          <ShellExample>
+            datalad install {config.url}/git/{workerId}/{datasetId}
+          </ShellExample>
+        </>
       )}
     </>
   )

package/src/scripts/dataset/download/download-link.jsx

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import { downloadNative } from "./download-native.js"
 import { useApolloClient } from "@apollo/client"
-import { Button } from "@openneuro/components/button"
+import { Button } from "../../components/button/Button"
 
 const DownloadLink = ({ datasetId, snapshotTag }) => {
   const client = useApolloClient()

package/src/scripts/dataset/download/download-s3.jsx

@@ -25,10 +25,6 @@ const DownloadS3Instructions = ({ datasetId, s3Bucket }) => (
       uses <a href="https://aws.amazon.com/cli/">AWS CLI.</a>
     </p>
     <DownloadSampleS3 datasetId={datasetId} s3Bucket={s3Bucket} />
-    <p>
-      To download unpublished datasets or older snapshots, see advanced methods
-      below.
-    </p>
   </div>
 )
 

package/src/scripts/dataset/files/file-display.jsx

@@ -8,7 +8,7 @@ import { Media } from "../../styles/media"
 import { DatasetPageBorder } from "../routes/styles/dataset-page-border"
 import DatasetQueryContext from "../../datalad/dataset/dataset-query-context"
 import { fetchMoreDirectory } from "./file-tree-unloaded-directory.jsx"
-import { Loading } from "@openneuro/components/loading"
+import { Loading } from "../../components/loading/Loading"
 
 const PathBreadcrumb = styled.div`
   font-size: 14px;

package/src/scripts/dataset/files/file-tree-unloaded-directory.jsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react"
 import PropTypes from "prop-types"
 import DatasetQueryContext from "../../datalad/dataset/dataset-query-context.js"
 import { gql } from "@apollo/client"
-import { AccordionTab } from "@openneuro/components/accordion"
+import { AccordionTab } from "../../components/accordion/AccordionTab"
 
 export const DRAFT_FILES_QUERY = gql`
   query dataset($datasetId: ID!, $tree: String!) {

package/src/scripts/dataset/files/file-tree.tsx

@@ -4,7 +4,7 @@ import UpdateFile from "../mutations/update-file.jsx"
 import DeleteFile from "../mutations/delete-file.jsx"
 import FileTreeUnloadedDirectory from "./file-tree-unloaded-directory.jsx"
 import { Media } from "../../styles/media"
-import { AccordionTab } from "@openneuro/components/accordion"
+import { AccordionTab } from "../../components/accordion/AccordionTab"
 import type { DatasetFile } from "../../types/dataset-file"
 
 export const unescapePath = (path: string): string => path.replace(/:/g, "/")

package/src/scripts/dataset/files/file-view.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { Loading } from "@openneuro/components/loading"
+import { Loading } from "../../components/loading/Loading"
 import FileViewerType from "./file-viewer-type.jsx"
 import { isNifti, isNwb } from "./file-types"