C3DC-2069

src/pages/inventory/sideBar/ExploreUserGuide/AnalyzingCohortsSection.js

@@ -1,6 +1,6 @@
 import React from "react";
-import figure9 from "./images/figure9.png";
 import figure10 from "./images/figure10.png";
+import figure11 from "./images/figure11.png";
 
 const AnalyzingCohortsSection = ({ classes }) => (
   <div>
@@ -31,50 +31,41 @@ const AnalyzingCohortsSection = ({ classes }) => (
         <a href="/explore">
           C3DC Explore Dashboard
         </a>{" "}
-        or{" "}
-        <a
-          href="https://ccdi.cancer.gov/explore"
-          target="_blank"
-          rel="noopener noreferrer"
-          className={classes.link}
-        >
-          CCDI Hub Explore Dashboard
-        </a>{" "}
-        for additional analysis or to find files associated with cohort.
+        or CCDI Hub Explore Dashboard for additional analysis or to find files associated with cohort.
       </p>
       <p>
-        To begin analysis, navigate to the Cohort Analyzer either via the button in the View All Cohort view in C3DC Explore Dashboard (Figure 8F) or from the link at top of C3DC Explore Dashboard page (Figure 9).
+        To begin analysis, navigate to the Cohort Analyzer either via the button in the View All Cohort view in C3DC Explore Dashboard (Figure 9F) or from the link at top of C3DC Explore Dashboard page (Figure 10).
       </p>
       <div className={classes.figureContainer}>
-        <img src={figure9} style={{ width: "75%" }} alt="Figure 9" />
+        <img src={figure10} style={{ width: "75%" }} alt="Figure 10" />
       </div>
       <div className={classes.figureText}>
-        Figure 9: Link to Cohort Analyzer
+        Figure 10: Link to Cohort Analyzer
       </div>
 
       <div className={classes.figureContainer}>
-        <img src={figure10} style={{ width: "85%" }} alt="Figure 10" />
+        <img src={figure11} style={{ width: "85%" }} alt="Figure 11" />
       </div>
-      <div className={classes.figureText}>Figure 10: C3DC Cohort Analyzer landing page</div>
+      <div className={classes.figureText}>Figure 11: C3DC Cohort Analyzer landing page</div>
 
       <p>
-        Users then select cohorts via the Cohort Selector on left hand side (Figure 10A), which dynamically updates the Venn diagram (Figure 10B) and data table (Figure 10C)
+        Users then select cohorts via the Cohort Selector on left hand side (Figure 11A), which dynamically updates the Venn diagram (Figure 11B) and data table (Figure 11C)
       </p>
 
       <p>
-        As cohorts are selected, intersections and unique data points are visually represented in the Venn Diagram, and the table reflects participant-level details. Users can click on specific Venn diagram sections (Figure 10B) to isolate and examine overlapping or unique participant data, with options to create new cohorts from selected groups (Figure 10D, 'Create New Cohort'). Users can toggle between comparisons of Participant IDs, Diagnoses and Treatment types in the Venn diagram by selecting data category radio buttons (Figure 10E).
+        As cohorts are selected, intersections and unique data points are visually represented in the Venn Diagram, and the table reflects participant-level details. Users can click on specific Venn diagram sections (Figure 11B) to isolate and examine overlapping or unique participant data, with options to create new cohorts from selected groups (Figure 11D, 'Create New Cohort'). Users can toggle between comparisons of Participant IDs, Diagnoses and Treatment types in the Venn diagram by selecting data category radio buttons (Figure 11E).
       </p>
 
       <p>
-        Users can also explore the Cohort Analyzer functionality with example cohorts that are automatically loaded to user's cohort list by selecting the 'Add Example Cohorts' button (Figure 10F). Clinical Summary bar charts (Figure 10G) provide visual comparisons of demographic and clinical properties between cohorts. These can be expanded to show categorical values beyond the six most frequent values by toggling the expand button (Figure 10H). Which clinical summary bar charts are displayed can be toggled with the check boxes above the clinical summary bar chart display (Figure 10I).
+        Users can also explore the Cohort Analyzer functionality with example cohorts that are automatically loaded to user's cohort list by selecting the 'Add Example Cohorts' button (Figure 11F). Clinical Summary bar charts (Figure 11G) provide visual comparisons of demographic and clinical properties between cohorts. These can be expanded to show categorical values beyond the six most frequent values by toggling the expand button (Figure 11H). Which clinical summary bar charts are displayed can be toggled with the check boxes above the clinical summary bar chart display (Figure 11I).
       </p>
 
       <p>
-        Users can download table results, export Venn diagram cohort selections back to the C3DC Explore Dashboard or export Venn diagram cohort selections to the CCDI Hub Explore Dashboard using buttons listed above the data table (Figure 10D). PNG images of Venn diagram (Figure 10J) and clinical summary bar charts (Figure 10H) can also be downloaded by selecting the associated download buttons.
+        Users can download table results, export Venn diagram cohort selections back to the C3DC Explore Dashboard or export Venn diagram cohort selections to the CCDI Hub Explore Dashboard using buttons listed above the data table (Figure 11D). PNG images of Venn diagram (Figure 11J) and clinical summary bar charts (Figure 11H) can also be downloaded by selecting the associated download buttons.
       </p>
 
       <p>
-        Please note that the number in parentheses by the cohort's name in the Venn diagram represents the count of unique records for that radio button selection (Figure 10B). The number inside the Venn diagram sections are the count of unique values for that radio button selection (Figure 10B). Finally, the count next to your cohort in the Cohort Selection side bar indicates the total participants in your cohort (Figure 10A).
+        Please note that the number in parentheses by the cohort's name in the Venn diagram represents the count of unique records for that radio button selection (Figure 11B). The number inside the Venn diagram sections are the count of unique values for that radio button selection (Figure 11B). Finally, the count next to your cohort in the Cohort Selection side bar indicates the total participants in your cohort (Figure 11A).
       </p>
     </div>
   </div>

src/pages/inventory/sideBar/ExploreUserGuide/CohortSection.js

@@ -1,7 +1,7 @@
 import React from "react";
-import figure6 from "./images/figure6.png";
 import figure7 from "./images/figure7.png";
 import figure8 from "./images/figure8.png";
+import figure9 from "./images/figure9.png";
 
 const CohortSection = ({ classes }) => (
   <div>
@@ -10,8 +10,7 @@ const CohortSection = ({ classes }) => (
     </div>
     <div className={classes.contentContainer}>
       <p>
-        The Cohort Selector enables users to create a cohort with a size up to 4000 and manage up to{" "}
-        <strong>20 cohorts</strong>. This feature offers flexibility in managing groups of filtered results to researchers, allowing them to create and update cohort groups according to their specific requirements.
+        The Cohort Selector enables users to create a cohort with a size of up to 4,000 and to manage up to 20 cohorts. This feature offers flexibility in managing groups of filtered results to researchers, allowing them to create and update cohort groups according to their specific requirements.
       </p>
 
       <h4>
@@ -25,59 +24,62 @@ const CohortSection = ({ classes }) => (
       </p>
       <ul>
         <li>
-          Select rows from the results table by selecting checkmark boxes in the leftmost column of results table (Figure 6A) and then select 'Selected Participants' from drop down menu (Figure 6C),
+          Select rows from the results table by selecting checkmark boxes in the leftmost column of results table (Figure 7A) and then select 'Selected Participants' from drop down menu (Figure 7C),
         </li>
         <li>
-          Toggle the "select all visible rows" checkbox in the upper left-hand corner of the table to select participants or participants from data currently displayed in table (Figure 6B) and then select 'Selected Participants' from drop down menu (Figure 6C),
+          Toggle the "select all visible rows" checkbox in the upper left-hand corner of the table to select participants or participants from data currently displayed in table (Figure 7B) and then select 'Selected Participants' from drop down menu (Figure 7C),
         </li>
         <li>
-          Or choose to add all participants returned based on the faceted results by selecting the "All Participants" option from the "Create New Cohort" button (Figure 6C). Note that a user can add up to 4,000 participants to each cohort.
+          Or choose to add all participants returned based on the faceted results by selecting the "All Participants" option from the "Create New Cohort" button (Figure 7C). Note that a user can add up to 4,000 participants to each cohort.
         </li>
       </ul>
       <div className={classes.figureContainer}>
-        <img src={figure6} style={{ width: "80%" }} alt="Figure 6" />
+        <img src={figure7} style={{ width: "80%" }} alt="Figure 7" />
       </div>
       <div className={classes.figureText}>
-        Figure 6: Cohort creation with either Selected Participants or All
+        Figure 7: Cohort creation with either Selected Participants or All
         Participants from faceted filters
       </div>
 
-    <p> Alternatively, users can add selected participants or all participants in a facet filter to an existing cohort by selecting the “Add Participants to Existing Cohort” drop down menu, then selecting the target cohort and finally selecting from “All Participants” or “Selected Participants” (Figure 7).</p> 
+      <p>Alternatively, users can add selected participants or all participants in a facet filter to an existing cohort by selecting the "Add Participants to Existing Cohort" drop down menu, then selecting the target cohort and finally selecting from "All Participants" or "Selected Participants" (Figure 8).</p>
 
       <div className={classes.figureContainer}>
-        <img src={figure7} style={{ width: "80%" }} alt="Figure 7" />
+        <img src={figure8} style={{ width: "80%" }} alt="Figure 8" />
       </div>
       <div className={classes.figureText}>
-        Figure 7: Cohort management in View of All Cohorts
+        Figure 8: Add either selected participants or all participants in a filtered query to an existing cohort.
       </div>
 
       <h4>
         <strong>View All and Update Cohorts</strong>
       </h4>
       <p>
-        Selecting the <strong>"View All Cohort"</strong> Button in the C3DC Explore Dashboard will display a pop-up window to manage saved cohorts (Figure 8):
+        Selecting the "View All Cohort" Button in the C3DC Explore Dashboard will display a pop-up window to manage saved cohorts (Figure 9):
       </p>
       <ul>
         <li>
-          <strong>Cohort ID</strong>: Create your own ID to identify saved cohorts (Figure 8A)
+          <strong>Cohort ID</strong>: Create your own ID to identify saved cohorts (Figure 9A)
         </li>
         <li>
-          <strong>Cohort Description</strong>: Create a description for saved cohorts (Figure 8A)
+          <strong>Cohort Description</strong>: Create a description for saved cohorts (Figure 9A)
         </li>
         <li>
-          Remove participants from a selected cohort by selecting trash can icon (Figure 8B)
+          Remove participants from a selected cohort by selecting trash can icon (Figure 9B)
         </li>
         <li>
-          Remove all or individual cohorts from created cohorts list by selecting trash can icon (Figure 8C)
+          Remove all or individual cohorts from created cohorts list by selecting trash can icon (Figure 9C)
         </li>
         <li>
-          <strong>Save Changes</strong>: Save the changes made to the selected cohort. This includes changes to cohort ID, cohort description, and any participants removed (Figure 8D).
+          Copy an existing cohort and add or remove participants from the copy (Figure 9C).
         </li>
         <li>
-          <strong>Participant ID Search bar</strong>: Check if a participant ID has been added to cohort (Figure 8E)
+          <strong>Save Changes</strong>: Save the changes made to the selected cohort. This includes changes to cohort ID, cohort description, and any participants removed (Figure 9D).
         </li>
         <li>
-          <strong>Download Selected Cohort</strong>: Download the selected cohort in one of two formats (Figure 8F).
+          <strong>Participant ID Search bar</strong>: Check if a participant ID has been added to cohort (Figure 9E)
+        </li>
+        <li>
+          <strong>Download Selected Cohort</strong>: Download the selected cohort in one of two formats (Figure 9F).
           <ul>
             <li>
               <strong>Manifest CSV</strong>: a list of participant IDs and high-level data.
@@ -88,17 +90,17 @@ const CohortSection = ({ classes }) => (
           </ul>
         </li>
         <li>
-          <strong>View Cohort Analyzer</strong>: Navigate to the C3DC Cohort Analyzer from the cohort list (Figure 8F).
+          <strong>View Cohort Analyzer</strong>: Navigate to the C3DC Cohort Analyzer from the cohort list (Figure 9F).
         </li>
         <li>
-          <strong>Explore in CCDI Hub</strong>: Export cohorts (up to 4000 participants each cohort) that open the CCDI Hub with pre-filtered data based on selected participants (Figure 8F)
+          <strong>Explore in CCDI Hub</strong>: Export cohorts (up to 4,000 participants each cohort) that open the CCDI Hub with pre-filtered data based on selected participants (Figure 9F).
         </li>
       </ul>
       <div className={classes.figureContainer}>
-        <img src={figure8} style={{ width: "80%" }} alt="Figure 8" />
+        <img src={figure9} style={{ width: "80%" }} alt="Figure 9" />
       </div>
       <div className={classes.figureText}>
-        Figure 8: Cohort management in View of All Cohorts
+        Figure 9: Cohort management in View of All Cohorts
       </div>
     </div>
   </div>

src/pages/inventory/sideBar/ExploreUserGuide/FindDataSection.js

@@ -3,6 +3,7 @@ import React from "react";
 import figure2 from "./images/figure2.png";
 import figure3 from "./images/figure3.png";
 import figure4 from "./images/figure4.png";
+import figure5 from "./images/figure5.png";
 
 const FindDataSection = ({ classes }) => (
   <div>
@@ -45,7 +46,7 @@ const FindDataSection = ({ classes }) => (
           Filtering your search will update the C3DC Explore Dashboard's visualizations and the results tables (Figure 3). Please note that for the Diagnosis and Anatomic Site visualizations, only the top 20 values will be displayed when there are &gt; 20 values returned from the faceted filer set. Users can easily switch between pie chart and histogram to explore the visual summaries. Each visual summary can be downloaded as PNG file with the download button. Each results table will be updated with information on the studies and participants that meet the filtered criteria. Information displayed in each table is described below:
           <ul>
             <li>
-              <strong>"Studies":</strong> The Study tab displays links for C3DC studies to their associated study page in dbGaP. Participants, diagnosis, treatment, treatment outcome and survival data all belong to a C3DC study.
+              <strong>"Studies":</strong> The Study tab displays links for C3DC studies to their associated study page in dbGaP. Participants, diagnosis, genetic analysis, treatment, treatment outcome and survival data all belong to a C3DC study.
             </li>
             <li>
               <strong>"Participants":</strong> Characteristics of a participant in the C3DC Explore Dashboard. Participants belong to a study, and they may have one or more diagnoses, treatment, treatment outcome or survival entries associated with them. Participants with mappings through the CCDI Participant Index (CPI) have a summary of these mappings available from this view. To view CPI synonym mappings, users can hover over the participant of interest, and a tooltip would appear for user to click on.
@@ -75,15 +76,25 @@ const FindDataSection = ({ classes }) => (
           </div>
         </li>
 
+        <li>
+          Visible columns in each table can be customized by clicking the "View columns" button in the upper righthand corner of the table and selecting or deselecting available columns (Figure 4). Note that some fields cannot be unselected and will always be displayed.
+          <div className={classes.figureContainer}>
+            <img src={figure4} style={{ width: "75%" }} alt="Figure 4" />
+          </div>
+          <div className={classes.figureText}>
+            Figure 4: View columns customization feature
+          </div>
+        </li>
+
         <li>
           You can show, hide, and copy the URL used to construct your filtered
           view using the toggle and copy buttons above the visualization widgets
-          (Figure 4).
+          (Figure 5).
           <div className={classes.figureContainer}>
-            <img src={figure4} style={{ width: "75%" }} alt="Figure 4" />
+            <img src={figure5} style={{ width: "75%" }} alt="Figure 5" />
           </div>
           <div className={classes.figureText}>
-            Figure 4: Toggle button, clear and copy query URL features
+            Figure 5: Toggle button, clear and copy query URL features
           </div>
         </li>
       </ol>

src/pages/inventory/sideBar/ExploreUserGuide/OverviewSection.js

@@ -16,20 +16,20 @@ const OverviewSection = ({ classes }) => (
         of childhood cancers. These data have been harmonized to standard common
         data elements (CDEs) to facilitate efficient and effective data
         integration and analysis of participant data across studies. In the C3DC
-        Explore Dashboard, users can filter the harmonized data using facets
+        Explore Dashboard users can filter the harmonized data using facets
         based on properties and values defined in the C3DC Data Model.
       </p>
       <p>
         Upon interaction with these filters (Figure 1A), users can review
         clinical information through visual summaries (Figure 1B) and browse the
         row-level data in tabs organized by studies and participants as well as
-        participant-associated diagnosis, treatment, treatment response, survival
+        participant associated diagnosis, treatment, treatment response, survival
         data, and genetic analysis (Figure 1C) to determine which data sets are
         applicable to their research questions. Users can then download tabular
         metadata in the format of CSV or JSON at the currently selected tabs in
-        the data table (Figure 1D). A statistics bar at the top reflects current
-        numbers of diagnoses, participants, and studies filtered (Figure 1E).
-        Users can also build synthetic cohort (up to 4000 participants each
+        the data table (Figure 1D).         A statistics bar at the top reflects current
+        numbers of diagnoses, participants and studies filtered (Figure 1E).
+        Users can also build synthetic cohort (up to 4,000 participants each
         cohort) and manage up to 20 cohorts. Users can further compare synthetic
         cohorts in the{" "}
         <a href="/cohortAnalyzer" className={classes.link} target="_blank" rel="noopener noreferrer">