test changes, UI changes

Author: KunaalAgarwal

public/cwl/fsl/feat.cwl

@@ -0,0 +1,55 @@
+#!/usr/bin/env cwl-runner
+
+# https://fsl.fmrib.ox.ac.uk/fsl/fslwiki/FEAT
+# Complete fMRI analysis pipeline: preprocessing, statistics, and post-stats
+# The .fsf design file encodes all analysis parameters.
+# input_data must be provided separately so cwltool can stage it
+# inside the container; the .fsf paths are rewritten at runtime.
+
+cwlVersion: v1.2
+class: CommandLineTool
+
+requirements:
+  InlineJavascriptRequirement: {}
+  InitialWorkDirRequirement:
+    listing:
+      - entry: $(inputs.design_file)
+        entryname: design.fsf
+        writable: true
+      - entry: $(inputs.input_data)
+      - entryname: run_feat.sh
+        entry: |
+          #!/bin/bash
+          set -e
+          export USER=\${USER:-cwluser}
+          WD=`pwd`
+          sed -i "s|^set feat_files(1).*|set feat_files(1) \"\${WD}/$(inputs.input_data.basename)\"|" design.fsf
+          sed -i "s|^set fmri(outputdir).*|set fmri(outputdir) \"\${WD}/feat_output\"|" design.fsf
+          feat design.fsf
+
+hints:
+  DockerRequirement:
+    dockerPull: brainlife/fsl:latest
+
+stdout: feat.log
+stderr: feat.log
+
+inputs:
+  design_file:
+    type: File
+    label: FEAT design file (.fsf) containing all analysis parameters
+  input_data:
+    type: File
+    label: 4D BOLD input data referenced by the design file
+
+baseCommand: [bash, run_feat.sh]
+
+outputs:
+  feat_directory:
+    type: Directory
+    outputBinding:
+      glob: "*.feat"
+  log:
+    type: File
+    outputBinding:
+      glob: feat.log

public/cwl/fsl/film_gls.cwl

@@ -31,6 +31,12 @@ inputs:
     inputBinding:
       prefix: --pd=
       separate: false
+  contrast_file:
+    type: ['null', File]
+    label: Contrast definition file (.con)
+    inputBinding:
+      prefix: --con=
+      separate: false
   threshold:
     type: ['null', double]
     label: Threshold for FILM estimation (default 1000)
@@ -145,6 +151,42 @@ outputs:
       glob:
         - $(inputs.results_dir || 'results')/threshac1.nii.gz
         - $(inputs.results_dir || 'results')/threshac1.nii
+  cope:
+    type:
+      - 'null'
+      - type: array
+        items: File
+    outputBinding:
+      glob:
+        - $(inputs.results_dir || 'results')/cope*.nii.gz
+        - $(inputs.results_dir || 'results')/cope*.nii
+  varcope:
+    type:
+      - 'null'
+      - type: array
+        items: File
+    outputBinding:
+      glob:
+        - $(inputs.results_dir || 'results')/varcope*.nii.gz
+        - $(inputs.results_dir || 'results')/varcope*.nii
+  tstat:
+    type:
+      - 'null'
+      - type: array
+        items: File
+    outputBinding:
+      glob:
+        - $(inputs.results_dir || 'results')/tstat*.nii.gz
+        - $(inputs.results_dir || 'results')/tstat*.nii
+  zstat:
+    type:
+      - 'null'
+      - type: array
+        items: File
+    outputBinding:
+      glob:
+        - $(inputs.results_dir || 'results')/zstat*.nii.gz
+        - $(inputs.results_dir || 'results')/zstat*.nii
   log:
     type: File
     outputBinding:

src/components/BIDSDataModal.jsx

@@ -268,11 +268,6 @@ const BIDSDataModal = ({ show, onClose, bidsStructure }) => {
     });
   }, []);
 
-  const toggleAllSubjects = useCallback(() => {
-    setSelectedSubjects(prev =>
-      prev.size === allSubjectIds.length ? new Set() : new Set(allSubjectIds)
-    );
-  }, [allSubjectIds]);
 
   // --- Data type handlers ---
   const toggleDataType = useCallback((dt) => {
@@ -398,9 +393,14 @@ const BIDSDataModal = ({ show, onClose, bidsStructure }) => {
           {/* ---- Level 1: Subject Panel ---- */}
           <div className="bids-subject-panel">
             <div className="bids-subject-header">
-              <button className="bids-select-all-btn" onClick={toggleAllSubjects}>
-                {selectedSubjects.size === allSubjectIds.length ? 'Deselect all' : 'Select all'}
-              </button>
+              <div className="bids-select-btns">
+                <button className="bids-select-all-btn" onClick={() => setSelectedSubjects(new Set(allSubjectIds))}>
+                  Select all
+                </button>
+                <button className="bids-select-all-btn" onClick={() => setSelectedSubjects(new Set())}>
+                  Deselect all
+                </button>
+              </div>
               <span className="bids-subject-count">
                 {selectedSubjects.size}/{allSubjectIds.length}
               </span>

src/components/CWLPreviewPanel.jsx

@@ -34,8 +34,10 @@ function CWLPreviewPanel({ getWorkflowData }) {
     const [activeTab, setActiveTab] = useState('workflow');
     const [showFullscreen, setShowFullscreen] = useState(false);
     const [copied, setCopied] = useState(false);
+    const [copiedPane, setCopiedPane] = useState(null);
     const debounceRef = useRef(null);
     const copiedTimerRef = useRef(null);
+    const copiedPaneTimerRef = useRef(null);
 
     const [isCollapsed, setIsCollapsed] = useState(() => {
         try {
@@ -76,9 +78,9 @@ function CWLPreviewPanel({ getWorkflowData }) {
                     return;
                 }
                 setShowPlaceholder(false);
-                const { wf, jobDefaults } = buildCWLWorkflowObject(graph);
+                const { wf, jobDefaults, cwlDefaultKeys } = buildCWLWorkflowObject(graph);
                 setCwlOutput(SHEBANG + YAML.dump(wf, { noRefs: true }));
-                setJobOutput(buildJobTemplate(wf, jobDefaults));
+                setJobOutput(buildJobTemplate(wf, jobDefaults, cwlDefaultKeys));
                 setError(null);
             } catch (err) {
                 setShowPlaceholder(false);
@@ -91,8 +93,11 @@ function CWLPreviewPanel({ getWorkflowData }) {
 
     const activeContent = activeTab === 'workflow' ? cwlOutput : jobOutput;
 
-    // Clean up copied-reset timer on unmount
-    useEffect(() => () => { if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current); }, []);
+    // Clean up copied-reset timers on unmount
+    useEffect(() => () => {
+        if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+        if (copiedPaneTimerRef.current) clearTimeout(copiedPaneTimerRef.current);
+    }, []);
 
     const handleCopy = useCallback(() => {
         navigator.clipboard.writeText(activeContent).then(() => {
@@ -103,6 +108,16 @@ function CWLPreviewPanel({ getWorkflowData }) {
     }, [activeContent]);
 
     const highlightedHtml = useMemo(() => activeContent ? highlightYaml(activeContent) : '', [activeContent]);
+    const highlightedCwl = useMemo(() => cwlOutput ? highlightYaml(cwlOutput) : '', [cwlOutput]);
+    const highlightedJob = useMemo(() => jobOutput ? highlightYaml(jobOutput) : '', [jobOutput]);
+
+    const handleCopyPane = useCallback((content, pane) => {
+        navigator.clipboard.writeText(content).then(() => {
+            setCopiedPane(pane);
+            if (copiedPaneTimerRef.current) clearTimeout(copiedPaneTimerRef.current);
+            copiedPaneTimerRef.current = setTimeout(() => setCopiedPane(null), 1500);
+        }).catch(() => showWarning('Copy to clipboard failed'));
+    }, []);
 
     return (
         <>
@@ -186,22 +201,43 @@ function CWLPreviewPanel({ getWorkflowData }) {
                 className="cwl-fullscreen-modal"
             >
                 <Modal.Header>
-                    <Modal.Title>
-                        {activeTab === 'workflow' ? 'CWL Workflow Preview' : 'Job Template Preview'}
-                    </Modal.Title>
-                    <button
-                        className="cwl-action-btn"
-                        onClick={handleCopy}
-                        disabled={!activeContent}
-                    >
-                        {copied ? 'Copied!' : 'Copy'}
-                    </button>
+                    <Modal.Title>CWL Preview</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <pre
-                        className="cwl-code cwl-code-fullscreen"
-                        dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-                    />
+                    <div className="cwl-split-container">
+                        <div className="cwl-split-pane">
+                            <div className="cwl-split-pane-header">
+                                <span className="cwl-split-pane-label">.cwl</span>
+                                <button
+                                    className="cwl-action-btn"
+                                    onClick={() => handleCopyPane(cwlOutput, 'cwl')}
+                                    disabled={!cwlOutput}
+                                >
+                                    {copiedPane === 'cwl' ? 'Copied!' : 'Copy'}
+                                </button>
+                            </div>
+                            <pre
+                                className="cwl-code cwl-code-fullscreen"
+                                dangerouslySetInnerHTML={{ __html: highlightedCwl }}
+                            />
+                        </div>
+                        <div className="cwl-split-pane">
+                            <div className="cwl-split-pane-header">
+                                <span className="cwl-split-pane-label">.yml</span>
+                                <button
+                                    className="cwl-action-btn"
+                                    onClick={() => handleCopyPane(jobOutput, 'job')}
+                                    disabled={!jobOutput}
+                                >
+                                    {copiedPane === 'job' ? 'Copied!' : 'Copy'}
+                                </button>
+                            </div>
+                            <pre
+                                className="cwl-code cwl-code-fullscreen"
+                                dangerouslySetInnerHTML={{ __html: highlightedJob }}
+                            />
+                        </div>
+                    </div>
                 </Modal.Body>
             </Modal>
         </>

src/components/CustomWorkflowParamModal.jsx

@@ -644,6 +644,7 @@ const CustomWorkflowParamModal = ({ show, onClose, workflowName, internalNodes,
                             </div>
                         )}
                     </div>
+
                 </Form>
             </Modal.Body>
         </Modal>

src/components/EdgeMappingModal.jsx

@@ -15,6 +15,14 @@ const getBaseType = (type) => {
 
 const isArrayType = (type) => type?.includes('[]') || false;
 
+/** When the source node is scattered, scalar File/Directory outputs are effectively arrays. */
+const getEffectiveOutputType = (type, sourceIsScattered) => {
+    if (!sourceIsScattered) return type;
+    const base = getBaseType(type);
+    if (!isArrayType(type) && (base === 'File' || base === 'Directory')) return `${base}[]`;
+    return type;
+};
+
 const checkTypeCompatibility = (outputType, inputType, outputExtensions = null, inputAcceptedExtensions = null) => {
     if (!outputType || !inputType) return { compatible: true, warning: true, reason: 'Type information unavailable' };
 
@@ -221,6 +229,7 @@ const EdgeMappingModal = ({
     targetNode,
     existingMappings = [],
     adjacencyWarning = null,
+    sourceIsScattered = false,
 }) => {
     const { showWarning } = useToast();
     const [mappings, setMappings] = useState([]);
@@ -437,8 +446,9 @@ const EdgeMappingModal = ({
     const getMappingCompatibility = (outputName, inputName) => {
         const output = sourceIO.outputs.find(o => o.name === outputName);
         const input = targetIO.inputs.find(i => i.name === inputName);
+        const effectiveOutputType = getEffectiveOutputType(output?.type, sourceIsScattered);
         return checkTypeCompatibility(
-            output?.type,
+            effectiveOutputType,
             input?.type,
             output?.extensions,
             input?.acceptedExtensions
@@ -516,7 +526,7 @@ const EdgeMappingModal = ({
                                         >
                                             <div className="io-item-main">
                                                 <span className="io-name">{output.label}</span>
-                                                <span className="io-type">{output.type}</span>
+                                                <span className="io-type">{getEffectiveOutputType(output.type, sourceIsScattered)}</span>
                                                 {!compatibility.compatible && <span className="warning-icon" title={compatibility.reason}>⚠️</span>}
                                             </div>
                                             {output.extensions?.length > 0 && (

src/components/IONodeModal.jsx

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import '../styles/ioNodeModal.css';
+
+function IONodeModal({ show, onHide, label, notes, onSave }) {
+    const [nameValue, setNameValue] = useState(label || '');
+    const [notesValue, setNotesValue] = useState(notes || '');
+
+    // Sync state when modal opens with new data
+    useEffect(() => {
+        if (show) {
+            setNameValue(label || '');
+            setNotesValue(notes || '');
+        }
+    }, [show, label, notes]);
+
+    const handleSave = () => {
+        onSave({
+            label: nameValue.trim() || label,
+            notes: notesValue,
+        });
+        onHide();
+    };
+
+    return (
+        <Modal
+            show={show}
+            onHide={onHide}
+            centered
+            size="sm"
+            className="io-node-modal"
+        >
+            <Modal.Header>
+                <Modal.Title>Edit I/O Node</Modal.Title>
+            </Modal.Header>
+            <Modal.Body onClick={(e) => e.stopPropagation()}>
+                <Form>
+                    <Form.Group className="io-modal-field">
+                        <Form.Label className="io-modal-label">Name</Form.Label>
+                        <Form.Control
+                            type="text"
+                            value={nameValue}
+                            onChange={(e) => setNameValue(e.target.value)}
+                            className="io-modal-input"
+                            placeholder="Node name"
+                            autoFocus
+                        />
+                    </Form.Group>
+                    <Form.Group className="io-modal-field">
+                        <Form.Label className="io-modal-label">Notes</Form.Label>
+                        <Form.Control
+                            as="textarea"
+                            rows={4}
+                            value={notesValue}
+                            onChange={(e) => setNotesValue(e.target.value)}
+                            className="io-modal-textarea"
+                            placeholder="Add notes about this node..."
+                        />
+                    </Form.Group>
+                </Form>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onHide}>Cancel</Button>
+                <Button variant="primary" onClick={handleSave}>Save</Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
+
+export default IONodeModal;