diff --git a/src/clincoded/static/components/gene_disease_summary/index.js b/src/clincoded/static/components/gene_disease_summary/index.js
index 3b88294c4..711dfe419 100644
--- a/src/clincoded/static/components/gene_disease_summary/index.js
+++ b/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 (
@@ -689,11 +706,17 @@ const GeneDiseaseEvidenceSummary = createReactClass({
+ {this.state.displayJson ?
+ this.jsonView = ref}>
+
+
+ : null}
For best printing, choose "Landscape" for layout, 50% for Scale, "Minimum" for Margins, and select "Background graphics".
+
diff --git a/src/clincoded/static/components/variant_interpretation_summary/index.js b/src/clincoded/static/components/variant_interpretation_summary/index.js
index 592477734..6460ba220 100644
--- a/src/clincoded/static/components/variant_interpretation_summary/index.js
+++ b/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 (
@@ -85,11 +103,17 @@ const VariantInterpretationSummary = createReactClass({
+ {this.state.displayJson ?
+ this.jsonView = ref}>
+
+
+ : null}
For best printing, choose "Landscape" for layout, 50% for Scale, "Minimum" for Margins, and select "Background graphics".
+
diff --git a/src/clincoded/static/components/view_json.js b/src/clincoded/static/components/view_json.js
new file mode 100644
index 000000000..79d2508d4
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default ViewJson;
\ No newline at end of file