From ccfb01b1154ce6982c10a46273829a208161bb2a Mon Sep 17 00:00:00 2001
From: Marla Schulz <marlaa.schulz@gmail.com>
Date: Tue, 2 May 2023 17:49:21 -0500
Subject: [PATCH] Finish separating out readout texts in accordionBox, see:
 https://github.com/phetsims/center-and-variability/issues/153

---
 .../view/TopRepresentationCheckboxGroup.ts    |  2 +-
 js/variability/view/IQRNode.ts                | 27 ++++++++++---------
 js/variability/view/MADNode.ts                | 24 +++++++++++++----
 js/variability/view/RangeNode.ts              |  2 +-
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/js/common/view/TopRepresentationCheckboxGroup.ts b/js/common/view/TopRepresentationCheckboxGroup.ts
index a4825c31..38622b4d 100644
--- a/js/common/view/TopRepresentationCheckboxGroup.ts
+++ b/js/common/view/TopRepresentationCheckboxGroup.ts
@@ -156,7 +156,7 @@ export default class TopRepresentationCheckboxGroup extends VerticalCheckboxGrou
     return {
       createNode: ( tandem: Tandem ) => {
         return TopRepresentationCheckboxGroup.createGridBox(
-          new Text( CenterAndVariabilityStrings.meanAbsoluteDeviationMADStringProperty, CAVConstants.CHECKBOX_TEXT_OPTIONS ),
+          new Text( CenterAndVariabilityStrings.madStringProperty, CAVConstants.CHECKBOX_TEXT_OPTIONS ),
           // TODO: Replace with MAD icon.
           new Node( {
             children: [
diff --git a/js/variability/view/IQRNode.ts b/js/variability/view/IQRNode.ts
index 94ac1301..9ba9ae8d 100644
--- a/js/variability/view/IQRNode.ts
+++ b/js/variability/view/IQRNode.ts
@@ -10,8 +10,6 @@ import CenterAndVariabilityStrings from '../../CenterAndVariabilityStrings.js';
 import CAVPlotNode, { CAVPlotOptions } from '../../common/view/CAVPlotNode.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
 import CAVColors from '../../common/CAVColors.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
-import CAVConstants from '../../common/CAVConstants.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import VariabilityReadoutText from './VariabilityReadoutText.js';
 
@@ -29,19 +27,22 @@ export default class IQRNode extends CAVPlotNode {
       dataPointFill: CAVColors.grayDataPointFill,
       ...options
     } );
-    const iqrReadoutValueProperty = new DerivedProperty( [ model.rangeValueProperty ], rangeValue => {
-      return rangeValue ? `${rangeValue}` : '?';
-    } );
+
 
     if ( providedOptions.parentContext === 'accordion' ) {
+      const iqrReadoutValueProperty = new DerivedProperty( [ model.iqrValueProperty ], iqrValue => {
+        return iqrValue ? `${iqrValue}` : '?';
+      } );
+
       // TODO: I think we need one of these in MadNode?
-      const iqrReadoutText = new VariabilityReadoutText( iqrReadoutValueProperty, CenterAndVariabilityStrings.iqrEqualsValuePatternStringProperty,
-        { fill: CAVColors.meanColorProperty, tandem: options.tandem.createTandem( 'iqrReadoutText' ), visibleProperty: model.isShowingIQRProperty } );
-      this.addChild( iqrReadoutText );
-      const iqrCheckbox = new Checkbox( model.isShowingIQRProperty, new Text( CenterAndVariabilityStrings.iqrStringProperty, CAVConstants.CHECKBOX_TEXT_OPTIONS ), {
-        tandem: options.tandem.createTandem( 'iqrCheckbox' )
+      const iqrReadoutText = new VariabilityReadoutText( iqrReadoutValueProperty, CenterAndVariabilityStrings.iqrEqualsValuePatternStringProperty, {
+        fill: CAVColors.meanColorProperty,
+        visibleProperty: model.isShowingIQRProperty,
+        right: this.left,
+        y: this.centerY,
+        tandem: options.tandem.createTandem( 'iqrReadoutText' )
       } );
-      this.addChild( iqrCheckbox );
+      this.addChild( iqrReadoutText );
     }
 
     const needAtLeastFiveKicks = new Text( CenterAndVariabilityStrings.needAtLeastFiveKicksStringProperty, {
@@ -242,6 +243,6 @@ export default class IQRNode extends CAVPlotNode {
     model.selectedVariabilityProperty.link( updateIQRNode );
     model.numberOfDataPointsProperty.link( updateIQRNode );
   }
-  }
+}
 
-    centerAndVariability.register( 'IQRNode', IQRNode );
\ No newline at end of file
+centerAndVariability.register( 'IQRNode', IQRNode );
\ No newline at end of file
diff --git a/js/variability/view/MADNode.ts b/js/variability/view/MADNode.ts
index 928820b0..b287c77d 100644
--- a/js/variability/view/MADNode.ts
+++ b/js/variability/view/MADNode.ts
@@ -11,7 +11,8 @@ import CAVPlotNode, { CAVPlotOptions } from '../../common/view/CAVPlotNode.js';
 import CAVConstants from '../../common/CAVConstants.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
 import CAVColors from '../../common/CAVColors.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
+import VariabilityReadoutText from './VariabilityReadoutText.js';
 
 type SelfOptions = {
   parentContext: 'accordion' | 'info';
@@ -28,10 +29,23 @@ export default class MADNode extends CAVPlotNode {
       ...options
     } );
 
-    const madCheckbox = new Checkbox( model.isShowingMADProperty, new Text( CenterAndVariabilityStrings.madStringProperty, CAVConstants.CHECKBOX_TEXT_OPTIONS ), {
-      tandem: options.tandem.createTandem( 'madCheckbox' )
-    } );
-    this.addChild( madCheckbox );
+    if ( options.parentContext === 'accordion' ) {
+      const madReadoutValueProperty = new DerivedProperty( [ model.meanValueProperty ], meanValue => {
+        return meanValue ? `${meanValue}` : '?';
+      } );
+
+      const madReadoutText = new VariabilityReadoutText( madReadoutValueProperty,
+        CenterAndVariabilityStrings.meanEqualsValuePatternStringProperty, {
+          fill: CAVColors.meanColorProperty,
+          visibleProperty: model.isShowingMADProperty,
+          right: this.left,
+          y: this.centerY,
+          tandem: options.tandem.createTandem( 'rangeReadoutText' )
+        } );
+
+      this.addChild( madReadoutText );
+    }
+
 
     const needAtLeastOneKickText = new Text( CenterAndVariabilityStrings.needAtLeastOneKickStringProperty, {
       fontSize: 18,
diff --git a/js/variability/view/RangeNode.ts b/js/variability/view/RangeNode.ts
index 0973400c..d8098a59 100644
--- a/js/variability/view/RangeNode.ts
+++ b/js/variability/view/RangeNode.ts
@@ -45,7 +45,7 @@ export default class RangeNode extends CAVPlotNode {
           fill: CAVColors.meanColorProperty,
           visibleProperty: model.isShowingRangeProperty,
           right: this.left,
-          y: 100, // TODO: Let's find a better way to position these.
+          y: this.centerY,
           tandem: options.tandem.createTandem( 'rangeReadoutText' )
         } );