feat(app): improve report styling

hpi-dhc · Nov 29, 2024 · 51ef166 · 51ef166
1 parent e2aae73
commit 51ef166
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 27 deletions.
diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -260,8 +260,6 @@
 
   "report_content_explanation": "This is your PGx test report. Tap on a gene name for more details on your results and a list of implicated medications.",
   "@report_content_explanation": {},
-  "report_page_dropdown_text": "Having trouble finding a gene? Use the ▾ button above to change between showing only genes associated with your current medications or showing all genes with known medication interactions.",
-  "@report_page_dropdown_text": {},
   "report_page_faq_tooltip": "To learn more about genetics in general, please refer to the FAQ",
   "@report_page_faq_tooltip": {},
   "report_page_indicator_explanation": "Phenotypes followed by an {indicatorName} ({indicator}) might be adjusted based on interactions with medications you are currently taking",
@@ -277,9 +275,11 @@
       }
     }
   },
-  "report_current_medications": "Gene report for current medication interactions",
+  "report_description_prefix": "Gene report for",
+  "@report_description_prefix": {},
+  "report_current_medications": "current medication interactions",
   "@report_current_medications": {},
-  "report_all_medications": "Gene report for all known medication interactions",
+  "report_all_medications": "all known medication interactions",
   "@report_all_medications": {},
   "report_gene_number": " ({geneNumber} genes)",
   "@report_gene_number": {
@@ -290,6 +290,21 @@
       }
     }
   },
+  "show_all_dropdown_text": "Having trouble finding a {item}? Use the ▾ button above to show all {items}.",
+  "@show_all_dropdown_text": {
+    "placeholders": {
+      "item": {
+        "type": "String",
+        "example": "gene"
+      },
+      "items": {
+        "type": "String",
+        "example": "genes with known medication interactions"
+      }
+    }
+  },
+  "report_show_all_dropdown_item": "gene",
+  "report_show_all_dropdown_items": "genes with known medication interactions",
 
   "gene_page_headline": "{gene} report",
   "@gene_page_headline": {

diff --git a/app/lib/report/pages/report.dart b/app/lib/report/pages/report.dart
@@ -11,6 +11,8 @@ class ListOption {
       style: PharMeTheme.textTheme.labelLarge,
       TextSpan(
         children: [
+          TextSpan(text: context.l10n.report_description_prefix),
+          TextSpan(text: ' '),
           TextSpan(text: label, style: TextStyle(fontWeight: FontWeight.bold)),
           TextSpan(
             text: context.l10n.report_gene_number(geneNumber),
@@ -115,6 +117,37 @@ class ReportPage extends HookWidget {
     ).toList();
   }
 
+  Widget _maybeBuildPageIndicators(
+    BuildContext context,
+    Iterable<GenotypeResult> relevantGenes,
+    ActiveDrugs activeDrugs,
+    ListOption currentListOption,
+  ) {
+    final hasActiveInhibitors = relevantGenes.any(
+      (genotypeResult) => activeDrugs.names.any(
+        (drug) => isInhibited(genotypeResult, drug: drug)
+      )
+    );
+    if (!hasActiveInhibitors && currentListOption.drugSubset == null) {
+      return SizedBox.shrink();
+    }
+    var indicatorText = '';
+    if (hasActiveInhibitors) {
+      indicatorText = context.l10n.report_page_indicator_explanation(
+        drugInteractionIndicatorName,
+        drugInteractionIndicator
+      );
+    }
+    if (currentListOption.drugSubset != null) {
+      indicatorText = '$indicatorText\n\n'
+        '${context.l10n.show_all_dropdown_text(
+            context.l10n.report_show_all_dropdown_item,
+            context.l10n.report_show_all_dropdown_items,
+          )}';
+    }
+    return PageIndicatorExplanation(indicatorText);
+  }
+
   Widget _buildReportPage(
     BuildContext context,
     ActiveDrugs activeDrugs,
@@ -134,7 +167,6 @@ class ReportPage extends HookWidget {
       drugsToFilterBy: currentListOption.drugSubset,
     );
     final relevantGenes = _getRelevantGenotypes(currentListOption.drugSubset);
-    final hasActiveInhibitors = relevantGenes.any((genotypeResult) => activeDrugs.names.any((drug) => isInhibited(genotypeResult, drug: drug)));
     return PopScope(
       canPop: false,
       child: unscrollablePageScaffold(
@@ -160,13 +192,16 @@ class ReportPage extends HookWidget {
                   value: currentListOptionIndex.value,
                   onChanged: (index) => currentListOptionIndex.value =
                     index ?? currentListOptionIndex.value,
-                  icon: ResizedIconButton(
-                    size: PharMeTheme.largeSpace,
-                    disabledBackgroundColor: PharMeTheme.buttonColor,
-                    iconWidgetBuilder: (size) => Icon(
-                      Icons.arrow_drop_down,
-                      size: size,
-                      color: PharMeTheme.surfaceColor,
+                  icon: Padding(
+                    padding: EdgeInsets.only(left: PharMeTheme.smallSpace),
+                    child: ResizedIconButton(
+                      size: PharMeTheme.largeSpace,
+                      disabledBackgroundColor: PharMeTheme.buttonColor,
+                      iconWidgetBuilder: (size) => Icon(
+                        Icons.arrow_drop_down,
+                        size: size,
+                        color: PharMeTheme.surfaceColor,
+                      ),
                     ),
                   ),
                   items: listOptions.mapIndexed(
@@ -183,21 +218,12 @@ class ReportPage extends HookWidget {
                 ),
               ),
             ),
-            scrollList([
-              ...geneCards,
-              if (currentListOption.drugSubset != null) ...[
-                SizedBox(
-                  key: Key('gene-spacer'),
-                  height: PharMeTheme.mediumSpace,
-                ),
-                PageDescription.fromText(context.l10n.report_page_dropdown_text),
-              ]
-            ]),
-            if (hasActiveInhibitors) PageIndicatorExplanation(
-              context.l10n.report_page_indicator_explanation(
-                drugInteractionIndicatorName,
-                drugInteractionIndicator
-              ),
+            scrollList(geneCards),
+            _maybeBuildPageIndicators(
+              context,
+              relevantGenes,
+              activeDrugs,
+              currentListOption,
             ),
           ]
         )