diff --git a/cypress/component/GetDataDialog.cy.tsx b/cypress/component/GetDataDialog.cy.tsx index 2984a1db..527841eb 100644 --- a/cypress/component/GetDataDialog.cy.tsx +++ b/cypress/component/GetDataDialog.cy.tsx @@ -24,4 +24,19 @@ describe('GetDataDialog', () => { cy.get('[data-cy="get-data-dialog-close-button"]').click(); cy.get('@onCloseSpy').should('have.been.called'); }); + + it('Switches between docker and singularity commands', () => { + cy.mount(); + + cy.get('button').contains('docker').should('exist'); + cy.get('button').contains('singularity').should('exist'); + + cy.get('code').should('contain', 'docker run'); + + cy.get('button').contains('singularity').click(); + cy.get('code').should('contain', 'singularity run'); + + cy.get('button').contains('docker').click(); + cy.get('code').should('contain', 'docker run'); + }); }); diff --git a/src/components/GetDataDialog.tsx b/src/components/GetDataDialog.tsx index 22376ec6..751c040d 100644 --- a/src/components/GetDataDialog.tsx +++ b/src/components/GetDataDialog.tsx @@ -9,6 +9,8 @@ import { DialogContent, DialogContentText, useMediaQuery, + ToggleButton, + ToggleButtonGroup, } from '@mui/material'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import { useTheme } from '@mui/material/styles'; @@ -17,14 +19,19 @@ import NBTheme from '../theme'; function GetDataDialog({ open, onClose }: { open: boolean; onClose: () => void }) { const DOCKER_RUN_COMMAND = 'docker run -t -u $(id -u):$(id -g) -v $(pwd):/data neurobagel/dataget:latest /data/neurobagel-query-results.tsv /data/output'; + const SINGULARITY_RUN_COMMAND = + 'singularity run --bind $(pwd):/data docker://neurobagel/dataget:latest /data/neurobagel-query-results.tsv /data/output'; const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down('md')); + const [commandType, setCommandType] = React.useState('docker'); + const showRunCommand = commandType === 'docker' ? DOCKER_RUN_COMMAND : SINGULARITY_RUN_COMMAND; + const [anchorEl, setAnchorEl] = React.useState(null); const [showPopover, setShowPopover] = useState(false); const handleCopyClick = (event: React.MouseEvent) => { - navigator.clipboard.writeText(DOCKER_RUN_COMMAND); + navigator.clipboard.writeText(showRunCommand); setAnchorEl(event.currentTarget); setShowPopover(true); @@ -38,6 +45,10 @@ function GetDataDialog({ open, onClose }: { open: boolean; onClose: () => void } setShowPopover(false); }; + const handleToggle = (_event: React.MouseEvent, newCommand: string) => { + setCommandType(newCommand); + }; + return ( @@ -57,9 +68,19 @@ function GetDataDialog({ open, onClose }: { open: boolean; onClose: () => void }
  • Copy and run the command below
  • + + docker + singularity +
    - {DOCKER_RUN_COMMAND} + {showRunCommand} { }, plugins: [react()], envPrefix: 'NB_', - // Excluding the Auth0 library from the bundle to avoid issues with - // Cypress component tests. TODO: understand why this is necessary + optimizeDeps: { + // Excluding the Auth0 library from the bundle to avoid issues with + // Cypress component tests. TODO: understand why this is necessary exclude: ['@auth0/auth0-react'], }, };