[mri_violations] Convert module to React and update UI (#7473)

This converts the MRI Violations module to React. While doing so, is simplifies the subpages. They are no longer menu filters, but modal popup windows that display all details of errors for a scan when the link is clicked. All violations for the SeriesUID are shown to provide context. The maintenance should also be simplified by having converted most types of queries to DataProvisioners, which makes it easier to see the query and copy/paste into SQL. This should also result in more consistency with how CenterID/ProjectID matches are handled with the rest of LORIS.

Fixes #7470
Fixes #5714 (the pages no longer exist)
Fixes #6576 (there is only one page with filters now)
Fixes #6839 (the pages no longer exist, so don't have tabs..)

Makefile

@@ -55,3 +55,5 @@ testdata:
 login:
 	target=login npm run compile
 
+mri_violations:
+	target=mri_violations npm run compile

jsx/DataTable.js

@@ -383,7 +383,9 @@ class DataTable extends Component {
    * Called by React when the component has been rendered on the page.
    */
   componentDidMount() {
-    $('.dynamictable').DynamicTable();
+    if (!this.props.noDynamicTable) {
+      $('.dynamictable').DynamicTable();
+    }
   }
 
   /**
@@ -648,6 +650,7 @@ DataTable.propTypes = {
   actions: PropTypes.array,
   hide: PropTypes.object,
   nullTableShow: PropTypes.bool,
+  noDynamicTable: PropTypes.bool,
 };
 DataTable.defaultProps = {
   headers: [],
@@ -660,6 +663,7 @@ DataTable.defaultProps = {
     defaultColumn: false,
   },
   nullTableShow: false,
+  noDynamicTable: false,
 };
 
 export default DataTable;

jsx/FilterableDataTable.js

@@ -160,6 +160,7 @@ class FilterableDataTable extends Component {
         getMappedCell={this.props.getMappedCell}
         folder={this.props.folder}
         nullTableShow={this.props.nullTableShow}
+        noDynamicTable={this.props.noDynamicTable}
       />
     );
 
@@ -175,6 +176,7 @@ class FilterableDataTable extends Component {
 
 FilterableDataTable.defaultProps = {
   columns: 3,
+  noDynamicTable: false,
 };
 
 FilterableDataTable.propTypes = {
@@ -187,6 +189,7 @@ FilterableDataTable.propTypes = {
   getFormattedCell: PropTypes.func,
   actions: PropTypes.array,
   updateFilterCallback: PropTypes.func,
+  noDynamicTable: PropTypes.bool,
 };
 
 export default FilterableDataTable;

jsx/Modal.js

@@ -60,7 +60,7 @@ class Modal extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
-    const {show, children, onSubmit, title} = this.props;
+    const {show, children, onSubmit, title, width} = this.props;
 
     const headerStyle = {
       display: 'flex',
@@ -107,7 +107,7 @@ class Modal extends Component {
       margin: 'auto',
       padding: 0,
       border: '1px solid #888',
-      width: '700px',
+      width: width || '700px',
       boxShadow: '0 4px 8px 0 rbga(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)',
       transition: 'top 0.4s, opacity 0.4s',
     };

jsx/StaticDataTable.js

@@ -60,7 +60,7 @@ class StaticDataTable extends Component {
    * Called by React when the component has been rendered on the page.
    */
   componentDidMount() {
-    if (jQuery.fn.DynamicTable) {
+    if (jQuery.fn.DynamicTable && !this.props.NoDynamicTable) {
       if (this.props.freezeColumn) {
         $('#dynamictable').DynamicTable({
           freezeColumn: this.props.freezeColumn,
@@ -105,7 +105,7 @@ class StaticDataTable extends Component {
    * @param {object} prevState - Previous React Component state
    */
   componentDidUpdate(prevProps, prevState) {
-    if (jQuery.fn.DynamicTable) {
+    if (jQuery.fn.DynamicTable && !this.props.NoDynamicTable) {
       if (this.props.freezeColumn) {
         $('#dynamictable').DynamicTable({
           freezeColumn: this.props.freezeColumn,
@@ -552,9 +552,12 @@ class StaticDataTable extends Component {
         matchesFound++;
         if (matchesFound > currentPageRow) {
           const rowIndex = index[i].Content;
+          const rowCell = this.state.Hide.defaultColumn !== true ?
+              <td>{rowIndex}</td> : null;
+
           rows.push(
             <tr key={'tr_' + rowIndex} colSpan={headers.length}>
-              <td>{rowIndex}</td>
+              {rowCell}
               {curRow}
             </tr>
           );
@@ -664,7 +667,9 @@ StaticDataTable.propTypes = {
   Hide: PropTypes.object,
   hiddenHeaders: PropTypes.array,
   DisableFilter: PropTypes.bool,
+  NoDynamicTable: PropTypes.bool,
 };
+
 StaticDataTable.defaultProps = {
   Headers: [],
   Data: {},
@@ -676,6 +681,7 @@ StaticDataTable.defaultProps = {
     defaultColumn: false,
   },
   DisableFilter: false,
+  NoDynamicTable: false,
 };
 
 let RStaticDataTable = React.createFactory(StaticDataTable);

modules/mri_violations/.gitignore

@@ -1,6 +1,2 @@
-js/columnFormatter.js
-js/columnFormatterUnresolved.js
-js/mri_protocol_check_violations_columnFormatter.js
-js/mri_protocol_violations_columnFormatter.js
-js/mri_violations_helper.js
+js/*
 

modules/mri_violations/README.md

@@ -23,13 +23,8 @@ from further analysis.
 
 The MRI violations module shows a summary of the MRI violations
 (one image per row) identified by the imaging pipeline scripts.
-Depending on the type of violation, clicking on the scan's problem
-will redirect the user to pages with more information regarding
-the identified violation. The different types of violation are:
-
-- Could not identify scan type
-- Protocol Violation
-- Candidate Mismatch
+It can be used to set a "Resolution Status" for how the violation
+was dealt with.
 
 Additionally, the violations "Resolution Status" column can be
 updated once the violation has been resolved. Available options
@@ -54,6 +49,9 @@ flag should have either a drop down menu or open text for the person
 approving the insertion to indicate what the flag is for
 - **Other**: resolutions that don't fit in any of the above categories 
 
+It does not resolve any problems itself, it only logs the problem and
+what resolution occured.
+
 ## Permissions
 
 To access the MRI violated module, one must have either the `violated_scans_view_allsites`

modules/mri_violations/help/mri_violations.md

@@ -4,4 +4,7 @@ This module displays scans that have been flagged for significant variance from
 
 The table contains two tabs: **Not Resolved** and **Resolved**. When a scan is updated to any status other than *Unresolved*, it will move to the **Resolved** tab. You must manually update the status of each *Unresolved* scan, when relevant.
 
-You can click the link in the *MincFile* column to view the scan in BrainBrowser. Click **Protocol Violation** in the *Problem* column to view details of the protocol violations issue.
+You can click the link in the *Image File* column to view the scan in BrainBrowser. Click **Protocol Violation** in the *Problem* column to view details of the protocol violations issue.
+
+If you click on the link for any scan of problem type "Could not identify scan type" or "Protocol violation" the module will
+display a popup with the details of any problems for that SeriesUID.