From 53ac6e67ad463d0c2a59a658b7ffd86e84d33688 Mon Sep 17 00:00:00 2001
From: Mark Mandell <markmand@stanford.edu>
Date: Wed, 19 Jun 2019 14:59:22 -0700
Subject: [PATCH 1/5] initial commit, adds toggle json button in summaries

---
 .../components/gene_disease_summary/index.js  | 19 ++++++++++++++-
 .../variant_interpretation_summary/index.js   | 19 ++++++++++++++-
 src/clincoded/static/components/view_json.js  | 23 +++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/clincoded/static/components/view_json.js

diff --git a/src/clincoded/static/components/gene_disease_summary/index.js b/src/clincoded/static/components/gene_disease_summary/index.js
index d2d22f836..660d35d16 100644
--- a/src/clincoded/static/components/gene_disease_summary/index.js
+++ b/src/clincoded/static/components/gene_disease_summary/index.js
@@ -10,6 +10,7 @@ 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 +37,7 @@ const GeneDiseaseEvidenceSummary = createReactClass({
             caseControlEvidenceList: [],
             experimentalEvidenceList: [],
             preview: queryKeyValue('preview', this.props.href),
+            displayJson: false,
             hpoTermsCollection: {
                 caseLevel: {},
                 segregation: {},
@@ -656,15 +658,24 @@ 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 json = JSON.stringify(gdm, null, 4);
         const provisional = this.state.provisional;
         const snapshotPublishDate = this.state.snapshotPublishDate;
         const hpoTermsCollection = this.state.hpoTermsCollection;
@@ -692,8 +703,14 @@ const GeneDiseaseEvidenceSummary = createReactClass({
                 </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}>View JSON</button>
                     <button className="btn btn-primary btn-inline-spacer pull-right" onClick={this.handlePrintPDF}>Print PDF</button>
                 </div>
+                <div>
+                    {this.state.displayJson ? 
+                        <ViewJson data={json} />
+                    : null}
+                </div>
             </div>
         );
     }
diff --git a/src/clincoded/static/components/variant_interpretation_summary/index.js b/src/clincoded/static/components/variant_interpretation_summary/index.js
index 592477734..3f13cd43d 100644
--- a/src/clincoded/static/components/variant_interpretation_summary/index.js
+++ b/src/clincoded/static/components/variant_interpretation_summary/index.js
@@ -4,6 +4,7 @@ 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 ViewJson from '../view_json';
 import VariantInterpretationSummaryHeader from './header';
 import VariantInterpretationSummaryEvaluation from './evaluations';
 
@@ -21,7 +22,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,
         };
     },
 
@@ -71,9 +73,18 @@ 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 json = JSON.stringify(interpretation, null, 4);
 
         return (
             <div className="container variant-interprertation-summary-wrapper">
@@ -90,8 +101,14 @@ const VariantInterpretationSummary = createReactClass({
                 </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}>View JSON</button>
                     <button className="btn btn-primary btn-inline-spacer pull-right" onClick={this.handlePrintPDF}>Print PDF</button>
                 </div>
+                <div>
+                    {this.state.displayJson ? 
+                        <ViewJson data={json} />
+                    : null}
+                </div>
             </div>
         );
     }
diff --git a/src/clincoded/static/components/view_json.js b/src/clincoded/static/components/view_json.js
new file mode 100644
index 000000000..0c2f2dac8
--- /dev/null
+++ b/src/clincoded/static/components/view_json.js
@@ -0,0 +1,23 @@
+'use strict';
+import React from 'react';
+
+const divStyle = {
+  WebkitUserSelect: 'all',
+  MozUserSelect: 'all',
+  userSelect: 'all',
+  overflowY: 'scroll', 
+  maxHeight: '500px',
+  marginBottom: '2rem'
+}
+
+const ViewJson = props => {
+  return (
+    <div style={divStyle}>
+      <pre>
+        <code>{props.data}</code>
+      </pre>
+    </div>
+  )
+}
+
+export default ViewJson;
\ No newline at end of file

From f15d731a60d89650e7c746261d0e07e79474312e Mon Sep 17 00:00:00 2001
From: Mark Mandell <markmand@stanford.edu>
Date: Thu, 20 Jun 2019 14:09:30 -0700
Subject: [PATCH 2/5] button UI changes, scroll down when JSON is rendered

---
 .../components/gene_disease_summary/index.js   | 18 +++++++++++-------
 .../variant_interpretation_summary/index.js    | 17 +++++++++++------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/clincoded/static/components/gene_disease_summary/index.js b/src/clincoded/static/components/gene_disease_summary/index.js
index 660d35d16..275009855 100644
--- a/src/clincoded/static/components/gene_disease_summary/index.js
+++ b/src/clincoded/static/components/gene_disease_summary/index.js
@@ -58,6 +58,9 @@ const GeneDiseaseEvidenceSummary = createReactClass({
         if (affiliationUtilityBar) {
             affiliationUtilityBar.setAttribute('style', 'display:none');
         }
+        if (this.jsonView) {
+            this.jsonView.scrollIntoView({ behavior: "smooth" });
+        }
     },
 
     loadData() {
@@ -670,7 +673,7 @@ const GeneDiseaseEvidenceSummary = createReactClass({
      * @param {*} e
      */
     handleViewJSON(e) {
-        this.setState({displayJson: !this.state.displayJson})
+        this.setState({displayJson: !this.state.displayJson});
     },
 
     render() {
@@ -679,6 +682,7 @@ const GeneDiseaseEvidenceSummary = createReactClass({
         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">
@@ -698,19 +702,19 @@ 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}>View JSON</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>
-                    {this.state.displayJson ? 
-                        <ViewJson data={json} />
-                    : null}
-                </div>
             </div>
         );
     }
diff --git a/src/clincoded/static/components/variant_interpretation_summary/index.js b/src/clincoded/static/components/variant_interpretation_summary/index.js
index 3f13cd43d..2d3cd41a2 100644
--- a/src/clincoded/static/components/variant_interpretation_summary/index.js
+++ b/src/clincoded/static/components/variant_interpretation_summary/index.js
@@ -39,6 +39,9 @@ const VariantInterpretationSummary = createReactClass({
         if (affiliationUtilityBar) {
             affiliationUtilityBar.setAttribute('style', 'display:none');
         }
+        if (this.jsonView) {
+            this.jsonView.scrollIntoView({ behavior: "smooth" });
+        }
     },
 
     loadData() {
@@ -85,6 +88,8 @@ const VariantInterpretationSummary = createReactClass({
         const interpretation = this.state.interpretation;
         const classification = this.state.classification;
         const json = JSON.stringify(interpretation, null, 4);
+        let jsonButtonText = this.state.displayJson ? 'Hide JSON' : 'View JSON';
+
 
         return (
             <div className="container variant-interprertation-summary-wrapper">
@@ -96,19 +101,19 @@ 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}>View JSON</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>
-                    {this.state.displayJson ? 
-                        <ViewJson data={json} />
-                    : null}
-                </div>
             </div>
         );
     }

From b2703645c628849606b142c10c1be90910940882 Mon Sep 17 00:00:00 2001
From: Mark Mandell <markmand@stanford.edu>
Date: Mon, 24 Jun 2019 11:03:21 -0700
Subject: [PATCH 3/5] removes some unneeded properties from json

---
 src/clincoded/static/components/gene_disease_summary/index.js | 4 +++-
 .../static/components/variant_interpretation_summary/index.js | 4 +++-
 src/clincoded/static/components/view_json.js                  | 1 -
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/clincoded/static/components/gene_disease_summary/index.js b/src/clincoded/static/components/gene_disease_summary/index.js
index 275009855..891734150 100644
--- a/src/clincoded/static/components/gene_disease_summary/index.js
+++ b/src/clincoded/static/components/gene_disease_summary/index.js
@@ -4,6 +4,7 @@ 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 omit from 'lodash/omit';
 import GeneDiseaseEvidenceSummaryHeader from './header';
 import GeneDiseaseEvidenceSummaryCaseLevel from './case_level';
 import GeneDiseaseEvidenceSummarySegregation from './case_level_segregation';
@@ -678,7 +679,8 @@ const GeneDiseaseEvidenceSummary = createReactClass({
 
     render() {
         const gdm = this.state.gdm;
-        const json = JSON.stringify(gdm, null, 4);
+        const parsedJson = omit(gdm, ['@id', '@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;
diff --git a/src/clincoded/static/components/variant_interpretation_summary/index.js b/src/clincoded/static/components/variant_interpretation_summary/index.js
index 2d3cd41a2..847a67cab 100644
--- a/src/clincoded/static/components/variant_interpretation_summary/index.js
+++ b/src/clincoded/static/components/variant_interpretation_summary/index.js
@@ -4,6 +4,7 @@ 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 omit from 'lodash/omit';
 import ViewJson from '../view_json';
 import VariantInterpretationSummaryHeader from './header';
 import VariantInterpretationSummaryEvaluation from './evaluations';
@@ -87,7 +88,8 @@ const VariantInterpretationSummary = createReactClass({
     render() {
         const interpretation = this.state.interpretation;
         const classification = this.state.classification;
-        const json = JSON.stringify(interpretation, null, 4);
+        const parsedJson = omit(interpretation, ['@id', '@type', 'actions', 'active']);
+        const json = JSON.stringify(parsedJson, null, 4);
         let jsonButtonText = this.state.displayJson ? 'Hide JSON' : 'View JSON';
 
 
diff --git a/src/clincoded/static/components/view_json.js b/src/clincoded/static/components/view_json.js
index 0c2f2dac8..79d2508d4 100644
--- a/src/clincoded/static/components/view_json.js
+++ b/src/clincoded/static/components/view_json.js
@@ -7,7 +7,6 @@ const divStyle = {
   userSelect: 'all',
   overflowY: 'scroll', 
   maxHeight: '500px',
-  marginBottom: '2rem'
 }
 
 const ViewJson = props => {

From c1409ef57c5ddb1bb0c6c44e76c6b5fe249f8e9e Mon Sep 17 00:00:00 2001
From: Mark Mandell <markmand@stanford.edu>
Date: Wed, 11 Sep 2019 14:24:55 -0700
Subject: [PATCH 4/5] replaces lodash with underscore

---
 src/clincoded/static/components/gene_disease_summary/index.js | 4 ++--
 .../static/components/variant_interpretation_summary/index.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/clincoded/static/components/gene_disease_summary/index.js b/src/clincoded/static/components/gene_disease_summary/index.js
index 891734150..3f6e2a7a0 100644
--- a/src/clincoded/static/components/gene_disease_summary/index.js
+++ b/src/clincoded/static/components/gene_disease_summary/index.js
@@ -4,7 +4,7 @@ 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 omit from 'lodash/omit';
+import _ from 'underscore';
 import GeneDiseaseEvidenceSummaryHeader from './header';
 import GeneDiseaseEvidenceSummaryCaseLevel from './case_level';
 import GeneDiseaseEvidenceSummarySegregation from './case_level_segregation';
@@ -679,7 +679,7 @@ const GeneDiseaseEvidenceSummary = createReactClass({
 
     render() {
         const gdm = this.state.gdm;
-        const parsedJson = omit(gdm, ['@id', '@type', 'actions', 'active']);
+        const parsedJson = _.omit(gdm, ['@type', 'actions', 'active']);
         const json = JSON.stringify(parsedJson, null, 4);
         const provisional = this.state.provisional;
         const snapshotPublishDate = this.state.snapshotPublishDate;
diff --git a/src/clincoded/static/components/variant_interpretation_summary/index.js b/src/clincoded/static/components/variant_interpretation_summary/index.js
index 847a67cab..7282c144e 100644
--- a/src/clincoded/static/components/variant_interpretation_summary/index.js
+++ b/src/clincoded/static/components/variant_interpretation_summary/index.js
@@ -4,7 +4,7 @@ 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 omit from 'lodash/omit';
+import _ from 'underscore';
 import ViewJson from '../view_json';
 import VariantInterpretationSummaryHeader from './header';
 import VariantInterpretationSummaryEvaluation from './evaluations';
@@ -88,7 +88,7 @@ const VariantInterpretationSummary = createReactClass({
     render() {
         const interpretation = this.state.interpretation;
         const classification = this.state.classification;
-        const parsedJson = omit(interpretation, ['@id', '@type', 'actions', 'active']);
+        const parsedJson = _.omit(interpretation, ['@type', 'actions', 'active']);
         const json = JSON.stringify(parsedJson, null, 4);
         let jsonButtonText = this.state.displayJson ? 'Hide JSON' : 'View JSON';
 

From 0e38c42bd3ee5388cac5f990066988f229404b39 Mon Sep 17 00:00:00 2001
From: Mark Mandell <markmand@stanford.edu>
Date: Wed, 11 Sep 2019 14:51:42 -0700
Subject: [PATCH 5/5] merge with dev for travis tests

---
 src/clincoded/static/components/gene_disease_summary/index.js   | 2 +-
 .../static/components/variant_interpretation_summary/index.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/clincoded/static/components/gene_disease_summary/index.js b/src/clincoded/static/components/gene_disease_summary/index.js
index 797841ed7..711dfe419 100644
--- a/src/clincoded/static/components/gene_disease_summary/index.js
+++ b/src/clincoded/static/components/gene_disease_summary/index.js
@@ -60,7 +60,7 @@ const GeneDiseaseEvidenceSummary = createReactClass({
             affiliationUtilityBar.setAttribute('style', 'display:none');
         }
         if (this.jsonView) {
-            this.jsonView.scrollIntoView({ behavior: "smooth" });
+            this.jsonView.scrollIntoView({ behavior: 'smooth' });
         }
     },
 
diff --git a/src/clincoded/static/components/variant_interpretation_summary/index.js b/src/clincoded/static/components/variant_interpretation_summary/index.js
index 7282c144e..6460ba220 100644
--- a/src/clincoded/static/components/variant_interpretation_summary/index.js
+++ b/src/clincoded/static/components/variant_interpretation_summary/index.js
@@ -41,7 +41,7 @@ const VariantInterpretationSummary = createReactClass({
             affiliationUtilityBar.setAttribute('style', 'display:none');
         }
         if (this.jsonView) {
-            this.jsonView.scrollIntoView({ behavior: "smooth" });
+            this.jsonView.scrollIntoView({ behavior: 'smooth' });
         }
     },