fixup(frontend): reword buttons, add help topic and ? button

broadinstitute · May 30, 2024 · 42a8a5a · 42a8a5a
1 parent 7f6847c
commit 42a8a5a
Show file tree

Hide file tree

Showing 4 changed files with 3,943 additions and 1,355 deletions.
diff --git a/browser/help/topics/hidden-reads-visualizations.md b/browser/help/topics/hidden-reads-visualizations.md
@@ -0,0 +1,8 @@
+---
+id: hidden-reads-visualization
+title: 'Reads visualization hidden by default'
+---
+
+Visualizations of reads data is hidden by default. This helps to save cost on egress fees.
+
+Users can opt into loading the reads data for a variant once by clicking the "Load read data" button, and can opt to have the read data always load on variant pages by checking the "Always load read data" box.
diff --git a/browser/src/ReadData/ReadData.tsx b/browser/src/ReadData/ReadData.tsx
@@ -18,6 +18,7 @@ import { BaseQuery } from '../Query'
 import StatusMessage from '../StatusMessage'
 import { CheckboxInput } from '../ChartStyles'
 import { logButtonClick } from '../analytics'
+import InfoButton from '../help/InfoButton'
 
 const IGVBrowser = lazy(() => import('./IGVBrowser'))
 
@@ -544,33 +545,36 @@ const ReadDataContainer = ({ datasetId, variantIds }: ReadDataContainerProps) =>
   return (
     <>
       <LoadReadsControls>
-        <Button
-          id="load-once"
-          disabled={loadOnce}
-          onClick={() => {
-            logButtonClick('User loaded readviz data once')
-            setLoadOnce(!loadOnce)
-          }}
-        >
-          Load once
-        </Button>
-        <div>
-          <br />
-          <span>
-            <CheckboxInput
-              id="always-load"
-              checked={alwaysLoad}
-              onChange={(e: any) => {
-                if (e.target.checked) {
-                  logButtonClick('User toggled option to always load readviz data on')
-                }
-                setAlwaysLoad(e.target.checked)
-                setLoadOnce(true)
-              }}
-            />
-            Always load Read data
-          </span>
-        </div>
+        <span>
+          <InfoButton topic="hidden-reads-visualization" />{' '}
+          <Button
+            id="load-once"
+            disabled={loadOnce}
+            onClick={() => {
+              logButtonClick('User loaded readviz data once')
+              setLoadOnce(!loadOnce)
+            }}
+          >
+            Load read data
+          </Button>
+          <div>
+            <br />
+            <span>
+              <CheckboxInput
+                id="always-load"
+                checked={alwaysLoad}
+                onChange={(e: any) => {
+                  if (e.target.checked) {
+                    logButtonClick('User toggled option to always load readviz data on')
+                  }
+                  setAlwaysLoad(e.target.checked)
+                  setLoadOnce(true)
+                }}
+              />
+              Always load read data
+            </span>
+          </div>
+        </span>
       </LoadReadsControls>
       {!loadOnce && !alwaysLoad && <NoReadsSpacer />}
       {(loadOnce || alwaysLoad) && (