From b587c4038d1adcecae56fb4a4ccbb266a123a6f7 Mon Sep 17 00:00:00 2001
From: pixelzoom <cmalley@pixelzoom.com>
Date: Sat, 27 Aug 2022 11:52:32 -0600
Subject: [PATCH] make panel titles singular/plural dynamically,
 https://github.com/phetsims/natural-selection/issues/319

---
 js/common/view/AddMutationsPanel.js         | 20 ++++++++---------
 js/common/view/EnvironmentalFactorsPanel.js | 24 ++++++++++-----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/js/common/view/AddMutationsPanel.js b/js/common/view/AddMutationsPanel.js
index 9127a3b8..d2ba8673 100644
--- a/js/common/view/AddMutationsPanel.js
+++ b/js/common/view/AddMutationsPanel.js
@@ -56,8 +56,9 @@ class AddMutationsPanel extends NaturalSelectionPanel {
     // All elements in the button columns (including column headings) have the same effective width.
     const buttonColumnsAlignGroup = new AlignGroup();
 
-    // title
-    const titleNode = new Text( naturalSelectionStrings.addMutationsProperty, {
+    // title - We cannot pass naturalSelectionStrings.addMutationsProperty to new Text here, because the title
+    // is derived from the number of visible rows, which have not been created yet.
+    const titleNode = new Text( naturalSelectionStrings.addMutationsProperty.value, {
       font: NaturalSelectionConstants.TITLE_FONT,
       maxWidth: 180, // determined empirically
       tandem: options.tandem.createTandem( 'titleNode' )
@@ -104,18 +105,17 @@ class AddMutationsPanel extends NaturalSelectionPanel {
 
     // Set the panel's title to singular or plural, depending on how many rows are visible.
     // unmultilink is not necessary.
-    Multilink.multilink( _.map( rows, row => row.visibleProperty ), () => {
-
-      // If the title hasn't been changed to something entirely different via PhET-iO...
-      if ( [ naturalSelectionStrings.addMutationProperty.value, naturalSelectionStrings.addMutationsProperty.value ].includes( titleNode.text ) ) {
+    Multilink.multilink( [
+        ..._.map( rows, row => row.visibleProperty ),
+        naturalSelectionStrings.addMutationProperty,
+        naturalSelectionStrings.addMutationsProperty
+      ],
+      () => {
         const numberOfVisibleRows = _.filter( rows, row => row.visible ).length;
-
-        //TODO https://github.com/phetsims/natural-selection/issues/319 use DerivedProperty
         titleNode.text = ( numberOfVisibleRows === 1 ) ?
                          naturalSelectionStrings.addMutationProperty.value :
                          naturalSelectionStrings.addMutationsProperty.value;
-      }
-    } );
+      } );
 
     // @private {Row[]}
     this.rows = rows;
diff --git a/js/common/view/EnvironmentalFactorsPanel.js b/js/common/view/EnvironmentalFactorsPanel.js
index 715410cb..d2741d82 100644
--- a/js/common/view/EnvironmentalFactorsPanel.js
+++ b/js/common/view/EnvironmentalFactorsPanel.js
@@ -41,7 +41,9 @@ class EnvironmentalFactorsPanel extends NaturalSelectionPanel {
       tandem: Tandem.REQUIRED
     }, NaturalSelectionConstants.PANEL_OPTIONS, options );
 
-    const titleNode = new Text( naturalSelectionStrings.environmentalFactorsProperty, {
+    // title - We cannot pass naturalSelectionStrings.environmentalFactorsProperty to Text here, because the title
+    // is derived from the number of visible rows, which have not been created yet.
+    const titleNode = new Text( naturalSelectionStrings.environmentalFactorsProperty.value, {
       font: NaturalSelectionConstants.TITLE_FONT,
       maxWidth: 175, // determined empirically,
       tandem: options.tandem.createTandem( 'titleNode' )
@@ -82,17 +84,15 @@ class EnvironmentalFactorsPanel extends NaturalSelectionPanel {
 
     // Set the panel's title to singular or plural, depending on how many checkboxes are visible.
     // unlink is not necessary.
-    Multilink.multilink( _.map( checkboxes, checkbox => checkbox.visibleProperty ), () => {
-
-      // If the title hasn't been changed to something entirely different via PhET-iO...
-      if ( [ naturalSelectionStrings.environmentalFactorProperty.value, naturalSelectionStrings.environmentalFactorsProperty.value ].includes( titleNode.text ) ) {
-        const numberOfVisibleCheckboxes = _.filter( checkboxes, checkbox => checkbox.visible ).length;
-
-        //TODO https://github.com/phetsims/natural-selection/issues/319 use DerivedProperty
-        titleNode.text = ( numberOfVisibleCheckboxes === 1 ) ?
-                         naturalSelectionStrings.environmentalFactorProperty.value :
-                         naturalSelectionStrings.environmentalFactorsProperty.value;
-      }
+    Multilink.multilink( [
+      ..._.map( checkboxes, checkbox => checkbox.visibleProperty ),
+      naturalSelectionStrings.environmentalFactorProperty,
+      naturalSelectionStrings.environmentalFactorsProperty
+    ], () => {
+      const numberOfVisibleCheckboxes = _.filter( checkboxes, checkbox => checkbox.visible ).length;
+      titleNode.text = ( numberOfVisibleCheckboxes === 1 ) ?
+                       naturalSelectionStrings.environmentalFactorProperty.value :
+                       naturalSelectionStrings.environmentalFactorsProperty.value;
     } );
   }