make panel titles singular/plural dynamically, #319

phetsims · Aug 27, 2022 · b587c40 · b587c40
1 parent a555c9c
commit b587c40
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git 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
@@ -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;
     } );
   }