@openneuro/app 4.1.1 → 4.2.2

package/src/scripts/file-tree/file.jsx

@@ -1,123 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Link } from 'react-router-dom'
-import UpdateFile from '../datalad/mutations/update-file.jsx'
-import DeleteFile from '../datalad/mutations/delete-file.jsx'
-import { Media } from '../styles/media'
-import RemoveAnnexObject from '../datalad/mutations/remove-annex-object.jsx'
-import FlagAnnexObject from '../datalad/mutations/flag-annex-object.jsx'
-import { isAdmin } from '../authentication/admin-user.jsx'
-import {
-  getProfile,
-  hasEditPermissions,
-} from '../refactor_2021/authentication/profile.js'
-import { useCookies } from 'react-cookie'
-
-const filePath = (path, filename) => `${(path && path + ':') || ''}${filename}`
-
-export const apiPath = (datasetId, snapshotTag, filePath) => {
-  const snapshotPath = snapshotTag ? `/snapshots/${snapshotTag}` : ''
-  return `/crn/datasets/${datasetId}${snapshotPath}/files/${filePath}`
-}
-
-const File = ({
-  id,
-  datasetId,
-  path,
-  filename,
-  snapshotTag,
-  editMode = false,
-  isMobile,
-  annexed,
-  annexKey,
-  datasetPermissions,
-  toggleFileToDelete,
-  isFileToBeDeleted,
-}) => {
-  const snapshotVersionPath = snapshotTag ? `/versions/${snapshotTag}` : ''
-  // React route to display the file
-  const viewerPath = `/datasets/${datasetId}${snapshotVersionPath}/file-display/${filePath(
-    path,
-    filename,
-  )}`
-  const [cookies] = useCookies()
-  const user = getProfile(cookies)
-  return (
-    <>
-      {filename}
-      <span className="filetree-editfile">
-        <Media greaterThanOrEqual="medium">
-          <span className="edit-file download-file">
-            <a
-              href={apiPath(datasetId, snapshotTag, filePath(path, filename))}
-              download>
-              <i className="fa fa-download" /> Download
-            </a>
-          </span>
-        </Media>
-        <span className="edit-file view-file">
-          <Link to={viewerPath}>
-            <i className="fa fa-eye" /> View
-          </Link>
-        </span>
-        {editMode && (
-          <Media greaterThanOrEqual="medium">
-            <UpdateFile datasetId={datasetId} path={path}>
-              <i className="fa fa-file-o" /> Update
-            </UpdateFile>
-          </Media>
-        )}
-        {editMode && filename !== 'dataset_description.json' && (
-          <>
-            <Media greaterThanOrEqual="medium">
-              <DeleteFile
-                datasetId={datasetId}
-                path={path}
-                filename={filename}
-              />
-            </Media>
-            <div className="bulk-delete-checkbox-group delete-file">
-              <input
-                id={'cb-' + filename}
-                type="checkbox"
-                checked={isFileToBeDeleted(id)}
-                onChange={() => toggleFileToDelete({ id, path, filename })}
-              />
-              <label htmlFor={'cb-' + filename}>
-                {isFileToBeDeleted(id) ? 'ADDED' : 'ADD TO BULK DELETE'}{' '}
-              </label>
-            </div>
-          </>
-        )}
-        {!isMobile &&
-          annexed &&
-          (isAdmin() ? (
-            <RemoveAnnexObject
-              datasetId={datasetId}
-              snapshot={snapshotTag}
-              annexKey={annexKey}
-              path={path}
-              filename={filename}
-            />
-          ) : hasEditPermissions(datasetPermissions, user && user.sub) ? (
-            <FlagAnnexObject
-              datasetId={datasetId}
-              snapshot={snapshotTag}
-              filepath={filePath(path, filename)}
-              annexKey={annexKey}
-            />
-          ) : null)}
-      </span>
-    </>
-  )
-}
-
-File.propTypes = {
-  datasetId: PropTypes.string,
-  path: PropTypes.string,
-  filename: PropTypes.string,
-  snapshotTag: PropTypes.string,
-  editMode: PropTypes.bool,
-}
-
-export default File

package/src/scripts/file-tree/files.jsx

@@ -1,126 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { flatToTree } from './flat-to-tree.js'
-import FileTree from './file-tree.jsx'
-import { Media } from '../styles/media'
-import { useMutation, gql } from '@apollo/client'
-import WarnButton from '../common/forms/warn-button.jsx'
-
-const DELETE_FILES = gql`
-  mutation deleteFiles($datasetId: ID!, $files: [DeleteFile]) {
-    deleteFiles(datasetId: $datasetId, files: $files)
-  }
-`
-
-const Files = ({
-  datasetId,
-  snapshotTag,
-  datasetName,
-  files,
-  editMode = false,
-  datasetPermissions,
-}) => {
-  const [filesToDelete, setFilesToDelete] = useState({})
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [deleteFiles] = useMutation(DELETE_FILES)
-
-  const isFileToBeDeleted = id => id in filesToDelete
-
-  const toggleFileToDelete = ({ id, path, filename }) =>
-    setFilesToDelete(prevFilesToDelete => {
-      if (isFileToBeDeleted(id)) {
-        delete prevFilesToDelete[id]
-        return { ...prevFilesToDelete }
-      }
-      return {
-        ...prevFilesToDelete,
-        [id]: { path, filename },
-      }
-    })
-
-  const bulkDelete = () => {
-    if (Object.values(filesToDelete).length) {
-      setIsDeleting(true)
-      deleteFiles({
-        variables: { datasetId, files: Object.values(filesToDelete) },
-      }).then(() => {
-        setIsDeleting(false)
-        setFilesToDelete({})
-      })
-    }
-  }
-
-  const fileTree = flatToTree(files)
-  const diableBtn = Object.values(filesToDelete).length ? null : true
-  const filesCount = Object.values(filesToDelete).length
-  const bulkDeleteButton =
-    editMode &&
-    (isDeleting ? (
-      <span>Deleting...</span>
-    ) : (
-      <span className="delete-file">
-        <WarnButton
-          message="Bulk Delete"
-          icon="fa-trash"
-          warn={true}
-          className="edit-file"
-          action={bulkDelete}
-        />{' '}
-        {diableBtn ? (
-          '0 files added'
-        ) : (
-          <>
-            {filesCount} file{filesCount > 1 ? 's' : ''} added
-          </>
-        )}
-      </span>
-    ))
-  return (
-    <ul className="top-level-item">
-      <li className="clearfix">
-        <Media at="small">
-          <FileTree
-            datasetId={datasetId}
-            snapshotTag={snapshotTag}
-            path={''}
-            {...fileTree}
-            name={datasetName}
-            editMode={editMode}
-            defaultExpanded={false}
-            datasetPermissions={datasetPermissions}
-            toggleFileToDelete={toggleFileToDelete}
-            isFileToBeDeleted={isFileToBeDeleted}
-            bulkDeleteButton={bulkDeleteButton}
-          />
-        </Media>
-        <Media greaterThanOrEqual="medium">
-          <FileTree
-            datasetId={datasetId}
-            snapshotTag={snapshotTag}
-            path={''}
-            {...fileTree}
-            name={datasetName}
-            editMode={editMode}
-            defaultExpanded={true}
-            datasetPermissions={datasetPermissions}
-            toggleFileToDelete={toggleFileToDelete}
-            isFileToBeDeleted={isFileToBeDeleted}
-            bulkDeleteButton={bulkDeleteButton}
-          />
-        </Media>
-      </li>
-    </ul>
-  )
-}
-
-Files.propTypes = {
-  datasetId: PropTypes.string,
-  snapshotTag: PropTypes.string,
-  datasetName: PropTypes.string,
-  files: PropTypes.array,
-  editMode: PropTypes.bool,
-  fetchMore: PropTypes.func,
-  datasetPermissions: PropTypes.object,
-}
-
-export default Files

package/src/scripts/file-tree/flat-to-tree.js

@@ -1,49 +0,0 @@
-/**
- * Takes an array of files and returns a tree representation
- * @param {array} files
- */
-export const flatToTree = files => {
-  const tree = { name: '', files: [], directories: [] }
-  for (const file of files) {
-    const pathTokens = file.filename.split('/')
-    const lastPath = pathTokens.slice(-1).pop()
-    if (pathTokens.length === 1) {
-      // Top level file or directory stub
-      if (file.directory) {
-        tree.directories.push({ ...file, name: file.filename })
-      } else {
-        tree.files.push({ ...file })
-      }
-    } else {
-      // File in a directory
-      let directory = tree
-      for (const token of pathTokens) {
-        if (token === lastPath) {
-          // Leaf (file)
-          directory.files.push({
-            ...file,
-            filename: lastPath,
-          })
-        } else {
-          const newDir = directory.directories.find(dir => dir.name === token)
-          if (newDir) {
-            // Already exists, keep going
-            directory = newDir
-          } else {
-            // Create the missing directory
-            const createDir = {
-              name: token,
-              path: `${(directory.path && directory.path + ':') || ''}${token}`,
-              files: [],
-              directories: [],
-            }
-            directory.directories.push(createDir)
-            directory = createDir
-          }
-        }
-      }
-      tree.directories
-    }
-  }
-  return tree
-}

package/src/scripts/file-tree/viewers/__tests__/__snapshots__/file-viewer-json.spec.jsx.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File Viewer - JSON renders with invalid JSON 1`] = `
-<Fragment>
-  <div
-    className="col-xs-6"
-  >
-    <h3>
-      Tree
-    </h3>
-    <hr />
-    1234;
-  </div>
-  <div
-    className="col-xs-6"
-  >
-    <h3>
-      Raw
-    </h3>
-    <hr />
-    <Styled(pre)>
-      1234;
-    </Styled(pre)>
-  </div>
-</Fragment>
-`;
-
-exports[`File Viewer - JSON renders with valid JSON 1`] = `
-<Fragment>
-  <div
-    className="col-xs-6"
-  >
-    <h3>
-      Tree
-    </h3>
-    <hr />
-    {"thing":1,"name":"string"}
-  </div>
-  <div
-    className="col-xs-6"
-  >
-    <h3>
-      Raw
-    </h3>
-    <hr />
-    <Styled(pre)>
-      {"thing":1,"name":"string"}
-    </Styled(pre)>
-  </div>
-</Fragment>
-`;

package/src/scripts/file-tree/viewers/__tests__/file-viewer-json.spec.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { FileViewerJsonRaw } from '../file-viewer-json.jsx'
-
-describe('File Viewer - JSON', () => {
-  it('renders with valid JSON', () => {
-    const validJson = JSON.stringify({ thing: 1, name: 'string' })
-    const wrapper = shallow(<FileViewerJsonRaw jsonRaw={validJson} />)
-    expect(wrapper).toMatchSnapshot()
-  })
-  it('renders with invalid JSON', () => {
-    const wrapper = shallow(<FileViewerJsonRaw jsonRaw="1234;" />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})

package/src/scripts/file-tree/viewers/__tests__/parse-tabular.spec.js

@@ -1,24 +0,0 @@
-import parseTabular from '../parse-tabular.js'
-
-const demoCsv = `participant_id,age,sex
-sub-01,M,28
-sub-02,F,30
-sub-03,F,27
-`
-
-const demoTsv = `participant_id age sex
-sub-01  M 28
-sub-02  F 30
-`
-
-describe('parseTabular()', () => {
-  it('returns an array', () => {
-    expect(Array.isArray(parseTabular(demoCsv, ','))).toBe(true)
-  })
-  it('returns the expected number of data rows', () => {
-    expect(parseTabular(demoCsv, ',')).toHaveLength(3)
-  })
-  it('works with tab separators', () => {
-    expect(parseTabular(demoTsv, '\t')).toHaveLength(2)
-  })
-})

package/src/scripts/file-tree/viewers/file-viewer-csv.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import parseTabular from './parse-tabular.js'
-import FileViewerTable from './file-viewer-table.jsx'
-
-const FileViewerCsv = ({ data }) => {
-  const decoder = new TextDecoder()
-  const tableData = parseTabular(decoder.decode(data), ',')
-  return <FileViewerTable tableData={tableData} />
-}
-
-FileViewerCsv.propTypes = {
-  data: PropTypes.instanceOf(ArrayBuffer),
-}
-
-export default FileViewerCsv

package/src/scripts/file-tree/viewers/file-viewer-html.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const ScaledIframe = styled.iframe`
-  width: 100%;
-  height: 50vh;
-  border: none;
-`
-
-const FileViewerHtml = ({ data }) => {
-  const decoder = new TextDecoder()
-  return <ScaledIframe srcDoc={decoder.decode(data)} />
-}
-
-FileViewerHtml.propTypes = {
-  data: PropTypes.instanceOf(ArrayBuffer),
-}
-
-export default FileViewerHtml

package/src/scripts/file-tree/viewers/file-viewer-json.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const WrappedPre = styled.pre`
-  white-space: pre-wrap;
-`
-
-export const FileViewerJsonRaw = ({ jsonRaw }) => {
-  let jsonViewer
-  try {
-    jsonViewer = jsonRaw
-  } catch (e) {
-    jsonViewer = (
-      <>
-        <p>JSON failed to parse</p>
-        <pre>{e.message}</pre>
-      </>
-    )
-  }
-  return (
-    <>
-      <div className="col-xs-6">
-        <h3>Tree</h3>
-        <hr />
-        {jsonViewer}
-      </div>
-      <div className="col-xs-6">
-        <h3>Raw</h3>
-        <hr />
-        <WrappedPre>{jsonRaw}</WrappedPre>
-      </div>
-    </>
-  )
-}
-
-FileViewerJsonRaw.propTypes = {
-  jsonRaw: PropTypes.string,
-}
-
-const FileViewerJson = ({ data }) => {
-  const decoder = new TextDecoder()
-  return <FileViewerJsonRaw jsonRaw={decoder.decode(data)} />
-}
-
-FileViewerJson.propTypes = {
-  data: PropTypes.instanceOf(ArrayBuffer),
-}
-
-export default FileViewerJson

package/src/scripts/file-tree/viewers/file-viewer-nifti.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Papaya from '../../common/partials/papaya.jsx'
-
-const FileViewerNifti = ({ imageUrl }) => <Papaya image={imageUrl} />
-
-FileViewerNifti.propTypes = {
-  imageUrl: PropTypes.string,
-}
-
-export default FileViewerNifti

package/src/scripts/file-tree/viewers/file-viewer-table.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { AutoSizer, Column, Table } from 'react-virtualized'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const HalfViewport = styled.div`
-  height: 50vh;
-`
-
-const FileViewerTable = ({ tableData }) => (
-  <HalfViewport>
-    <AutoSizer defaultWidth={1024} defaultHeight={2048}>
-      {({ width, height }) => (
-        <Table
-          width={width}
-          height={height}
-          headerHeight={20}
-          rowHeight={30}
-          rowCount={tableData.length}
-          rowGetter={({ index }) => tableData[index]}>
-          {Object.keys(tableData[0]).map((colName, index) => (
-            <Column label={colName} dataKey={colName} key={index} width={100} />
-          ))}
-        </Table>
-      )}
-    </AutoSizer>
-  </HalfViewport>
-)
-
-FileViewerTable.propTypes = {
-  tableData: PropTypes.array,
-}
-
-export default FileViewerTable

package/src/scripts/file-tree/viewers/file-viewer-text.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const FileViewerText = ({ data }) => {
-  const decoder = new TextDecoder()
-  return <pre>{decoder.decode(data)}</pre>
-}
-
-FileViewerText.propTypes = {
-  data: PropTypes.instanceOf(ArrayBuffer),
-}
-
-export default FileViewerText

package/src/scripts/file-tree/viewers/file-viewer-tsv.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import parseTabular from './parse-tabular.js'
-import FileViewerTable from './file-viewer-table.jsx'
-
-const FileViewerTsv = ({ data }) => {
-  const decoder = new TextDecoder()
-  const tableData = parseTabular(decoder.decode(data), '\t')
-  return <FileViewerTable tableData={tableData} />
-}
-
-FileViewerTsv.propTypes = {
-  data: PropTypes.instanceOf(ArrayBuffer),
-}
-
-export default FileViewerTsv

package/src/scripts/file-tree/viewers/parse-tabular.js

@@ -1,18 +0,0 @@
-const parseTabular = (data, separator) => {
-  const rows = data.split('\n')
-  // Remove any whitespace rows (usually trailing)
-  const trimmedRows = rows.filter(row => !/^\s*$/.test(row))
-  // remove header from rows
-  const header = trimmedRows.shift().split(separator)
-
-  return trimmedRows.map(row =>
-    row
-      .split(separator)
-      .reduce(
-        (rowObj, col, colIndex) => ((rowObj[header[colIndex]] = col), rowObj),
-        {},
-      ),
-  )
-}
-
-export default parseTabular