[DUOS-2712] UI Improvements to Translator Tool Page (#2353)

* made minor stylistic changes * renamed page * Update ConsentTextGenerator.js
DataBiosphere · Oct 13, 2023 · aada29d · aada29d
1 parent 7a3c0e1
commit aada29d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/src/Routes.js b/src/Routes.js
@@ -24,7 +24,7 @@ import NIHPilotInfo from './pages/NIHPilotInfo';
 import {Status} from './pages/Status';
 import {SummaryVotes} from './pages/SummaryVotes';
 import BackgroundSignIn from './pages/BackgroundSignIn';
-import DataSharingLanguageTool from './pages/DataSharingLanguageTool';
+import ConsentTextGenerator from './pages/ConsentTextGenerator';
 import AdminManageInstitutions from './pages/AdminManageInstitutions';
 import AdminManageLC from './pages/AdminManageLC';
 import DatasetStatistics from './pages/DatasetStatistics';
@@ -63,7 +63,7 @@ const Routes = (props) => (
     <Route path="/privacy" component={PrivacyPolicy} />
     <Route path="/tos" component={TermsOfService} props={props} />
     <Route path="/tos_acceptance" component={TermsOfServiceAcceptance} props={props} />
-    <Route path="/data_sharing_language_tool" component={DataSharingLanguageTool} />
+    <Route path="/consent_text_generator" component={ConsentTextGenerator} />
     <Route path="/nih_dms_policy" component={NIHDMSPolicyInfo} />
     <Route path="/anvil_dms_policy" component={AnVILDMSPolicyInfo} />
     <AuthenticatedRoute path="/profile" component={UserProfile} props={props} rolesAllowed={[USER_ROLES.all]} />

diff --git a/src/pages/DataSharingLanguageTool.js → src/pages/ConsentTextGenerator.js b/src/pages/DataSharingLanguageTool.js → src/pages/ConsentTextGenerator.js
@@ -10,7 +10,7 @@ import {useState} from 'react';
 const buttonStyle = { marginBottom: '2rem', color: '#777' };
 const labelStyle = { fontFamily: 'Montserrat', fontSize: '15px' };
 
-export default function DataSharingLanguageTool() {
+export default function ConsentTextGenerator() {
   const [general, setGeneral] = useState(false);
   const [hmb, setHmb] = useState(false);
   const [diseases, setDiseases] = useState(false);
@@ -63,7 +63,7 @@ export default function DataSharingLanguageTool() {
   return (
     div({style: {...Styles.PAGE, color: '#1f3b50' }}, [
       div({style: {...Styles.TITLE, marginTop: '3.5rem'}}, [
-        'Standardized Data Sharing Language Tool'
+        'Consent Text Generator'
       ]),
       div({style: {...Styles.SMALL, marginTop: '1rem'}}, [
         'This tool is made publicly available by the DUOS team for anyone' +
@@ -83,9 +83,8 @@ export default function DataSharingLanguageTool() {
       ]),
       div({className: 'form-group', style: {marginTop: '1rem'}}, [
         label({style: Styles.MEDIUM}, [
-          '1. Choose the permitted data uses for your study\'s data ', br(),
-          span({style: Styles.MEDIUM_DESCRIPTION}, ['First, you must determine what type of secondary use is permitted for you study\'s data.' +
-          ' You do this by selecting one of the options in the following section:']),
+          '1. Permitted data uses', br(),
+          span({style: Styles.MEDIUM_DESCRIPTION}, ['Determine what type of secondary use is permitted for you study\'s data.']),
         ]),
         div({}, [
           RadioButton({
@@ -94,7 +93,7 @@ export default function DataSharingLanguageTool() {
             onClick: () => {
               setGeneral(true), setHmb(false), setDiseases(false), setOther(false), setOntologies([]), clearOtherTextBox();
             },
-            label: 'General Research Use: ',
+            label: 'General Research Use (GRU): ',
             description: 'use is permitted for any research purpose',
             style: { fontFamily: 'Montserrat', color: '#1f3b50'}
           }),
@@ -105,7 +104,7 @@ export default function DataSharingLanguageTool() {
             onClick: () => {
               setHmb(true), setGeneral(false), setDiseases(false), setOther(false), setOntologies([]), clearOtherTextBox();
             },
-            label: 'Health/Medical/Biomedical Use: ',
+            label: 'Health/Medical/Biomedical Use (HMB): ',
             description: 'use is permitted for any health, medical, or biomedical purpose',
             style: { fontFamily: 'Montserrat', color: '#1f3b50'}
           }),
@@ -116,7 +115,7 @@ export default function DataSharingLanguageTool() {
             onClick: () => {
               setDiseases(true), setHmb(false), setGeneral(false), setOther(false), clearOtherTextBox();
             },
-            label: 'Disease-related studies: ',
+            label: 'Disease-related studies (DS): ',
             description: 'use is permitted for research on the specified disease',
             style: { fontFamily: 'Montserrat', color: '#1f3b50'}
           }),
@@ -161,8 +160,8 @@ export default function DataSharingLanguageTool() {
 
       div({className: 'form-group', style: {marginTop: '2rem'}}, [
         label({style: {...Styles.MEDIUM, marginBottom: '5px'}}, [
-          '2. Choose any additional constraints you need to put on future uses of your data', br(),
-          span({style: Styles.MEDIUM_DESCRIPTION}, ['Then if necessary, you may choose additional terms on your study\'s data to govern it\'s use by adding requirements or limitations.']),
+          '2. Additional constraints', br(),
+          span({style: Styles.MEDIUM_DESCRIPTION}, ['If necessary, choose any additional terms on your study\'s data to govern its use.']),
         ]),
 
         div({}, [
@@ -266,26 +265,23 @@ export default function DataSharingLanguageTool() {
         ])
       ]),
 
-      div({className: 'form-group'}, [
-        label({style: Styles.MEDIUM}, [
-          '3. Generate your suggested Standardized Data Sharing Language below', br(),
-          span({style: Styles.MEDIUM_DESCRIPTION}, ['If your selections above are complete, press generate and the suggested consent form text ' +
-          'based on the GA4GH Data Use Ontology and Machine Readable Consent Guidance will appear below.']),
-          button({
-            style: {...Styles.TABLE.TABLE_TEXT_BUTTON, marginBottom: '2rem'},
-            className: 'button',
-            onClick: () => generate(),
-          }, ['Generate Standardized Data Sharing Language']),
-          textarea({
-            defaultValue: sdsl,
-            className: 'form-control',
-            rows: '12',
-            required: false,
-            readOnly: true,
-            style: {backgroundColor: '#fff'}
-          })
-        ]),
-      ])
+      button({
+        style: {...Styles.TABLE.TABLE_TEXT_BUTTON, marginBottom: '2rem'},
+        className: 'button',
+        onClick: () => generate(),
+      }, ['Generate']),
+
+      textarea({
+        defaultValue: sdsl,
+        className: 'form-control',
+        rows: '12',
+        required: false,
+        readOnly: true,
+        style: {backgroundColor: '#fff'}
+      }),
+
+      div({style: {marginBottom: '2rem'}})
+
     ])
   );
 }