Connects to #1865: View JSON in VCI/GCI Evidence Summaries (Preview, Provisional, Approved)

src/clincoded/static/components/gene_disease_summary/index.js

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { curator_page, queryKeyValue, external_url_map } from '../globals';
 import { RestMixin } from '../rest';
+import _ from 'underscore';
 import GeneDiseaseEvidenceSummaryHeader from './header';
 import GeneDiseaseEvidenceSummaryCaseLevel from './case_level';
 import GeneDiseaseEvidenceSummarySegregation from './case_level_segregation';
 import GeneDiseaseEvidenceSummaryCaseControl from './case_control';
 import GeneDiseaseEvidenceSummaryExperimental from './experimental';
 import GeneDiseaseEvidenceSummaryClassificationMatrix from './classification_matrix';
+import ViewJson from '../view_json';
 import CASE_INFO_TYPES from '../score/constants/case_info_types';
 
 const GeneDiseaseEvidenceSummary = createReactClass({
@@ -36,6 +38,7 @@ const GeneDiseaseEvidenceSummary = createReactClass({
             caseControlEvidenceList: [],
             experimentalEvidenceList: [],
             preview: queryKeyValue('preview', this.props.href),
+            displayJson: false,
             hpoTermsCollection: {
                 caseLevel: {},
                 segregation: {},
@@ -56,6 +59,9 @@ const GeneDiseaseEvidenceSummary = createReactClass({
         if (affiliationUtilityBar) {
             affiliationUtilityBar.setAttribute('style', 'display:none');
         }
+        if (this.jsonView) {
+            this.jsonView.scrollIntoView({ behavior: 'smooth' });
+        }
     },
 
     loadData() {
@@ -658,18 +664,29 @@ const GeneDiseaseEvidenceSummary = createReactClass({
     },
 
     /**
-     * Method to genetate PDF from HTML
+     * Method to generate PDF from HTML
      * @param {*} e - Window event
      */
     handlePrintPDF(e) {
         window.print();
     },
 
+    /**
+     * Method to toggle JSON from gdm state
+     * @param {*} e
+     */
+    handleViewJSON(e) {
+        this.setState({displayJson: !this.state.displayJson});
+    },
+
     render() {
         const gdm = this.state.gdm;
+        const parsedJson = _.omit(gdm, ['@type', 'actions', 'active']);
+        const json = JSON.stringify(parsedJson, null, 4);
         const provisional = this.state.provisional;
         const snapshotPublishDate = this.state.snapshotPublishDate;
         const hpoTermsCollection = this.state.hpoTermsCollection;
+        let jsonButtonText = this.state.displayJson ? 'Hide JSON' : 'View JSON';
 
         return (
             <div className="gene-disease-evidence-summary-wrapper">
@@ -689,11 +706,17 @@ const GeneDiseaseEvidenceSummary = createReactClass({
                     <GeneDiseaseEvidenceSummaryCaseControl caseControlEvidenceList={this.state.caseControlEvidenceList} hpoTerms={hpoTermsCollection.caseControl} />
                     <GeneDiseaseEvidenceSummaryExperimental experimentalEvidenceList={this.state.experimentalEvidenceList} />
                 </div>
+                {this.state.displayJson ? 
+                    <div ref={(ref) => this.jsonView = ref}>
+                        <ViewJson data={json} />
+                    </div>
+                : null}
                 <p className="print-info-note">
                     <i className="icon icon-info-circle"></i> For best printing, choose "Landscape" for layout, 50% for Scale, "Minimum" for Margins, and select "Background graphics".
                 </p>
                 <div className="pdf-download-wrapper">
                     <button className="btn btn-default btn-inline-spacer" onClick={this.handleWindowClose}><i className="icon icon-close"></i> Close</button>
+                    <button className="btn btn-primary btn-inline-spacer" onClick={this.handleViewJSON}>{jsonButtonText}</button>
                     <button className="btn btn-primary btn-inline-spacer pull-right" onClick={this.handlePrintPDF}>Print PDF</button>
                 </div>
             </div>

src/clincoded/static/components/variant_interpretation_summary/index.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { curator_page, userMatch, queryKeyValue, external_url_map } from '../globals';
 import { RestMixin } from '../rest';
+import _ from 'underscore';
+import ViewJson from '../view_json';
 import VariantInterpretationSummaryHeader from './header';
 import VariantInterpretationSummaryEvaluation from './evaluations';
 
@@ -21,7 +23,8 @@ const VariantInterpretationSummary = createReactClass({
             user: null, // Logged-in user uuid
             interpretation: null, // The parent interpretation object associated with the classification
             classification: {}, // Logged-in user's existing classification object
-            preview: queryKeyValue('preview', this.props.href)
+            preview: queryKeyValue('preview', this.props.href),
+            displayJson: false,
         };
     },
 
@@ -37,6 +40,9 @@ const VariantInterpretationSummary = createReactClass({
         if (affiliationUtilityBar) {
             affiliationUtilityBar.setAttribute('style', 'display:none');
         }
+        if (this.jsonView) {
+            this.jsonView.scrollIntoView({ behavior: 'smooth' });
+        }
     },
 
     loadData() {
@@ -71,9 +77,21 @@ const VariantInterpretationSummary = createReactClass({
         window.print();
     },
 
+    /**
+     * Method to toggle JSON from interpretation state
+     * @param {*} e - Window event
+     */
+    handleViewJSON(e) {
+        this.setState({displayJson: !this.state.displayJson})
+    },
+
     render() {
         const interpretation = this.state.interpretation;
         const classification = this.state.classification;
+        const parsedJson = _.omit(interpretation, ['@type', 'actions', 'active']);
+        const json = JSON.stringify(parsedJson, null, 4);
+        let jsonButtonText = this.state.displayJson ? 'Hide JSON' : 'View JSON';
+
 
         return (
             <div className="container variant-interprertation-summary-wrapper">
@@ -85,11 +103,17 @@ const VariantInterpretationSummary = createReactClass({
                     <VariantInterpretationSummaryHeader interpretation={interpretation} classification={classification} />
                     <VariantInterpretationSummaryEvaluation interpretation={interpretation} classification={classification} />
                 </div>
+                {this.state.displayJson ? 
+                    <div ref={(ref) => this.jsonView = ref}>
+                        <ViewJson data={json} />
+                    </div>
+                : null}
                 <p className="print-info-note">
                     <i className="icon icon-info-circle"></i> For best printing, choose "Landscape" for layout, 50% for Scale, "Minimum" for Margins, and select "Background graphics".
                 </p>
                 <div className="pdf-download-wrapper">
                     <button className="btn btn-default btn-inline-spacer" onClick={this.handleWindowClose}><i className="icon icon-close"></i> Close</button>
+                    <button className="btn btn-primary btn-inline-spacer" onClick={this.handleViewJSON}>{jsonButtonText}</button>
                     <button className="btn btn-primary btn-inline-spacer pull-right" onClick={this.handlePrintPDF}>Print PDF</button>
                 </div>
             </div>

src/clincoded/static/components/view_json.js

@@ -0,0 +1,22 @@
+'use strict';
+import React from 'react';
+
+const divStyle = {
+  WebkitUserSelect: 'all',
+  MozUserSelect: 'all',
+  userSelect: 'all',
+  overflowY: 'scroll', 
+  maxHeight: '500px',
+}
+
+const ViewJson = props => {
+  return (
+    <div style={divStyle}>
+      <pre>
+        <code>{props.data}</code>
+      </pre>
+    </div>
+  )
+}
+
+export default ViewJson;