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 ( +
+
+        {props.data}
+      
+
+ ) +} + +export default ViewJson; \ No newline at end of file