[ALS-6924] Take a Tour for PIC-SURE Demo (#289)

[ALS-6924] Take a Tour for PIC-SURE Demo [ALS-7795] Tour on Discover does not apply a filter --------- Co-authored-by: James <[email protected]>
hms-dbmi · Nov 7, 2024 · 5d882d8 · 5d882d8
1 parent 3874eeb
commit 5d882d8
Show file tree

Hide file tree

Showing 9 changed files with 290 additions and 185 deletions.
diff --git a/.env.example b/.env.example
@@ -58,4 +58,7 @@ VITE_AUTH_PROVIDER_MODULE_GOOGLE_ALT=false
 # VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS=["AC","AN"]
 
 VITE_GOOGLE_ANALYTICS_ID=someid
-VITE_GOOGLE_TAG_MANAGER_ID=someid
+VITE_GOOGLE_TAG_MANAGER_ID=someid
+
+VITE_AUTH_TOUR_NAME=NHANES-Auth
+VITE_OPEN_TOUR_NAME=BDC-Open
diff --git a/.env.test b/.env.test
@@ -66,4 +66,7 @@ VITE_VARIANT_EXPLORER_MAX_COUNT=20
 VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS='[]'
 
 VITE_GOOGLE_ANALYTICS_ID=someid
-VITE_GOOGLE_TAG_MANAGER_ID=someid
+VITE_GOOGLE_TAG_MANAGER_ID=someid
+
+VITE_AUTH_TOUR_NAME=NHANES-Auth
+VITE_OPEN_TOUR_NAME=BDC-Open
diff --git a/src/lib/assets/TourConfiguration.json b/src/lib/assets/TourConfiguration.json
@@ -0,0 +1,253 @@
+{
+  "NHANES-Auth": {
+    "searchTerm": "Age",
+    "title": "Welcome to PIC-SURE",
+    "description": "PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria. <br /><br />This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE. <br /><br />Once the tour starts, you can click anywhere to go to the next step. You can press the escape key to stop the tour at any point. You may also use the arrow keys, enter key, or the spacebar to navigate the tour.",
+    "steps": [
+      {
+        "element": "#explorer-search-box",
+        "popover": {
+          "title": "Search",
+          "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all demographics-related results. Click anywhere to continue the tour.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#facet-side-bar",
+        "popover": {
+          "title": "Refine Search",
+          "description": "Use the options displayed here to further refine your search results using facets.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table",
+        "popover": {
+          "title": "Search Results",
+          "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table #row-0",
+        "onHighlightStarted": "clickElement",
+        "popover": {
+          "title": "Variable Details",
+          "description": "To learn more about a variable, click on the row or click the information icon.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#row-0 button[title=\"Filter\"]",
+        "onHighlightStarted": "clickElement",
+        "popover": {
+          "title": "Apply Filters",
+          "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#row-0 button[title=\"Add for Analysis\"]",
+        "popover": {
+          "title": "Export Variable",
+          "description": "Click the export icon to add a variable to your export without applying a filter.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#sidebar-right",
+        "popover": {
+          "title": "Cohort Summary",
+          "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and prepare your cohort for analysis.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#nav-link-help",
+        "onDeselected": "removeHighlightClass",
+        "popover": {
+          "title": "Help Resources",
+          "description": "To learn more about PIC-SURE, please consult the <a href='https://pic-sure.gitbook.io/pic-sure' class='anchor' target='_blank'>user guide</a> and <a href='https://www.youtube.com/@pic-sure446/featured' class='anchor' target='_blank'>video</a> demonstrations. You can also find these resources on the help page.",
+          "onPrevClick": "disablePrevious"
+        }
+      }
+    ]
+  },
+  "BDC-Open": {
+    "searchTerm": "RECOVER",
+    "title": "Welcome to BioData Catalyst Powered by PIC-SURE",
+    "description": "BioData Catalyst Powered by PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria. <br /><br />This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE. This tour uses the Researching COVID to Enhance Recovery (RECOVER) dataset as an example. The RECOVER initiative is focused on understanding, diagnosing, treating, and preventing Long COVID. <br /><br />Once the tour starts, you can click “Next” or use the arrow keys to navigate the tour. You can press any other key or click anywhere on the screen to escape the tour.",
+    "steps": [
+      {
+        "element": "#explorer-search-box",
+        "popover": {
+          "title": "Search",
+          "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all {{searchTerm}}-related results.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#facet-side-bar",
+        "popover": {
+          "title": "Refine Search",
+          "description": "Use the options displayed here to further refine your search results using facets.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table",
+        "popover": {
+          "title": "Search Results",
+          "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
+          "onPrevClick": "disablePrevious",
+          "onNextClick": "findAndSetFirstNonStigmatizedAvailableFilterThenNext"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table .non-stigmatized-row",
+        "onHighlightStarted": "clickElement",
+        "popover": {
+          "title": "Variable Details",
+          "description": "To learn more about a variable, click on the row or click the information icon.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table .expandable-row",
+        "popover": {
+          "title": "Variable Details",
+          "description": "This displays information about the variable, including dataset information and study information.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table .non-stigmatized-row button[title=\"Filter\"]",
+        "onHighlightStarted": "clickElement",
+        "popover": {
+          "title": "Apply Filters",
+          "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table .expandable-row",
+        "popover": {
+          "title": "Apply Filters",
+          "description": "You can add filters by selecting different values or specifying a numeric range here, then clicking the “+” button.",
+          "onPrevClick": "disablePrevious",
+          "onNextClick": "applyFilterThenNext"
+        }
+      },
+      {
+        "element": "#sidebar-right",
+        "popover": {
+          "title": "Cohort Summary",
+          "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and counts per study. Note that this count is obfuscated to protect participant-level data.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#nav-link-help",
+        "onDeselected": "removeHighlightClass",
+        "popover": {
+          "title": "Help Resources",
+          "description": "To learn more about PIC-SURE, please consult the <a href='https://pic-sure.gitbook.io/nhlbi-biodata-catalyst-powered-by-pic-sure' class='anchor' target='_blank'>user guide</a> and <a href='https://www.youtube.com/playlist?list=PLJ6YccH8TEufZ5L-ctxzFF7vuZRLVacKw' class='anchor' target='_blank'>video</a> demonstrations. You can also find these resources on the help page.",
+          "onPrevClick": "disablePrevious"
+        }
+      }
+    ]
+  },
+  "BDC-Auth": {
+    "searchTerm": "cardiac surgery",
+    "title": "Welcome to BioData Catalyst Powered by PIC-SURE",
+    "description": "BioData Catalyst Powered by PIC-SURE allows you to explore variables, apply filters, and prepare data for analysis. When applying filters, participants are selected that meet those criteria. <br /><br />This tour demonstrates how to search, apply filters, and interpret results using PIC-SURE. <br /><br />Once the tour starts, you can click “Next” or use the arrow keys to navigate the tour. You can press any other key or click anywhere on the screen to escape the tour.",
+    "steps": [
+      {
+        "element": "#explorer-search-box",
+        "popover": {
+          "title": "Search",
+          "description": "Search clinical variables of interest. Here, the term \"{{searchTerm}}\" was used to get all results related to {{searchTerm}}.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#facet-side-bar",
+        "popover": {
+          "title": "Refine Search",
+          "description": "Use the options displayed here to further refine your search results using facets.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table",
+        "popover": {
+          "title": "Search Results",
+          "description": "The search results are displayed in this area. Each row describes a different variable that matches your search term and/or facets.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table #row-0",
+        "onHighlightStarted": "clickElement",
+        "popover": {
+          "title": "Variable Details",
+          "description": "To learn more about a variable, click on the row or click the information icon.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#ExplorerTable-table #active-row-0",
+        "popover": {
+          "title": "Variable Details",
+          "description": "This displays information about the variable, including dataset information and study information.",
+          "onPrevClick": "disablePrevious",
+          "onNextClick": "clickElementThenNext"
+        }
+      },
+      {
+        "element": "#row-0 button[title=\"Filter\"]",
+        "onHighlightStarted": "clickElement",
+        "popover": {
+          "title": "Apply Filters",
+          "description": "Click the filter icon to apply inclusion criteria to build your cohort.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#active-row-0",
+        "popover": {
+          "title": "Apply Filters",
+          "description": "You can add filters by selecting different values or specifying a numeric range here, then clicking the “+” button.",
+          "onPrevClick": "disablePrevious",
+          "onNextClick": "applyFilterThenNext"
+        }
+      },
+      {
+        "element": "#row-0 button[title=\"Add for Analysis\"]",
+        "popover": {
+          "title": "Export Variable",
+          "description": "Click the export icon to add a variable to your export without applying a filter.",
+          "onPrevClick": "disablePrevious",
+          "onNextClick": "clickElementThenNext"
+        }
+      },
+      {
+        "element": "#sidebar-right",
+        "popover": {
+          "title": "Cohort Summary",
+          "description": "You can view the summary of the filtered cohort based on the applied variable filters. Additionally, you can also view variable distributions and prepare your cohort for analysis.",
+          "onPrevClick": "disablePrevious"
+        }
+      },
+      {
+        "element": "#nav-link-help",
+        "onDeselected": "removeHighlightClass",
+        "popover": {
+          "title": "Help Resources",
+          "description": "To learn more about PIC-SURE, please consult the <a href='https://pic-sure.gitbook.io/nhlbi-biodata-catalyst-powered-by-pic-sure' class='anchor' target='_blank'>user guide</a> and <a href='https://www.youtube.com/playlist?list=PLJ6YccH8TEufZ5L-ctxzFF7vuZRLVacKw' class='anchor' target='_blank'>video</a> demonstrations. You can also find these resources on the help page.",
+          "onPrevClick": "disablePrevious"
+        }
+      }
+    ]
+  }
+}
diff --git a/src/lib/assets/authTourConfiguration.json b/src/lib/assets/authTourConfiguration.json