Begin framework for IQRInfoNode.ts - see #160

phetsims · May 1, 2023 · 74c7644 · 74c7644
1 parent 83aab56
commit 74c7644
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/js/variability/view/IQRInfoNode.ts b/js/variability/view/IQRInfoNode.ts
@@ -1,40 +1,43 @@
 // Copyright 2023, University of Colorado Boulder
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
-import { Text, VBox, VStrut } from '../../../../scenery/js/imports.js';
+import { Text, VBox } from '../../../../scenery/js/imports.js';
 import CenterAndVariabilityStrings from '../../CenterAndVariabilityStrings.js';
 import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
 import VariabilityModel from '../model/VariabilityModel.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import PhetioObject from '../../../../tandem/js/PhetioObject.js';
 import centerAndVariability from '../../centerAndVariability.js';
-import IQRNode from './IQRNode.js';
+import RangeNode from './RangeNode.js';
+import CAVConstants from '../../common/CAVConstants.js';
 
 export default class IQRInfoNode extends VBox {
-  public constructor( model: VariabilityModel, chartViewWidth: number, options: PickRequired<PhetioObject, 'tandem'> ) {
+  public constructor( model: VariabilityModel, options: PickRequired<PhetioObject, 'tandem'> ) {
 
     const hasEnoughDataProperty = new DerivedProperty( [ model.numberOfDataPointsProperty ], numberOfDataPoints => numberOfDataPoints >= 1 );
     super( {
       align: 'left',
       spacing: 5,
       children: [
-        new Text( CenterAndVariabilityStrings.rangeStringProperty, { fontSize: 25 } ),
-        new VStrut( 10 ),
-        new Text( CenterAndVariabilityStrings.rangeDescriptionStringProperty, { fontSize: 18 } ),
+        new Text( CenterAndVariabilityStrings.iqrStringProperty, {
+          fontSize: 25,
+          maxWidth: CAVConstants.INFO_DIALOG_MAX_TEXT_WIDTH,
+          layoutOptions: { bottomMargin: 10 }
+        } ),
+        new Text( CenterAndVariabilityStrings.rangeDescriptionStringProperty, { fontSize: 18, maxWidth: CAVConstants.INFO_DIALOG_MAX_TEXT_WIDTH } ),
 
         // TODO: String key name
         new Text( new PatternStringProperty( CenterAndVariabilityStrings.rangeCalculationPatternStringProperty, {
           max: model.maxValueProperty,
           min: model.minValueProperty
-        } ), { fontSize: 18, visibleProperty: hasEnoughDataProperty } ),
+        } ), { fontSize: 18, visibleProperty: hasEnoughDataProperty, maxWidth: CAVConstants.INFO_DIALOG_MAX_TEXT_WIDTH } ),
         new Text( new PatternStringProperty( CenterAndVariabilityStrings.rangeCalculationResultPatternStringProperty, {
           range: model.rangeValueProperty
-        } ), { fontSize: 18, visibleProperty: hasEnoughDataProperty } ),
-        new VStrut( 10 ),
+        } ), { fontSize: 18, visibleProperty: hasEnoughDataProperty, maxWidth: CAVConstants.INFO_DIALOG_MAX_TEXT_WIDTH, layoutOptions: { bottomMargin: 10 } } ),
 
-        new IQRNode( model, {
+        new RangeNode( model, {
           parentContext: 'info',
-          tandem: options.tandem.createTandem( 'iqrNode' )
+          tandem: options.tandem.createTandem( 'rangeNode' )
         } )
       ]
     } );

diff --git a/js/variability/view/IQRNode.ts b/js/variability/view/IQRNode.ts
@@ -101,16 +101,16 @@ export default class IQRNode extends CAVPlotNode {
       lineWidth: BOX_STROKE_WIDTH
     } );
 
+    boxWhiskerNode.addChild( iqrTextReadout );
+    boxWhiskerNode.addChild( iqrBar );
     boxWhiskerNode.addChild( boxWhiskerMedianLine );
     boxWhiskerNode.addChild( boxWhiskerBox );
     boxWhiskerNode.addChild( boxWhiskerLineLeft );
     boxWhiskerNode.addChild( boxWhiskerLineRight );
     boxWhiskerNode.addChild( boxWhiskerEndCapLeft );
     boxWhiskerNode.addChild( boxWhiskerEndCapRight );
 
-    this.addChild( iqrBar );
     this.addChild( iqrRectangle );
-    this.addChild( iqrTextReadout );
     this.addChild( boxWhiskerNode );
 
     iqrRectangle.moveToBack();
@@ -146,8 +146,8 @@ export default class IQRNode extends CAVPlotNode {
 
       const enoughData = model.numberOfDataPointsProperty.value >= 5;
 
-      const iqrVisibility = true;// ( options.parentContext === 'info' && enoughData ) ||
-      // ( options.parentContext === 'accordion' && enoughData && model.isShowingIQRProperty.value );
+      const iqrVisibility = ( options.parentContext === 'info' && enoughData ) ||
+                            ( options.parentContext === 'accordion' && enoughData && model.isShowingIQRProperty.value );
 
       iqrRectangle.visible = iqrVisibility;
       iqrBar.visible = iqrVisibility;

diff --git a/js/variability/view/InfoDialog.ts b/js/variability/view/InfoDialog.ts
@@ -1,12 +1,12 @@
 // Copyright 2023, University of Colorado Boulder
 
-import { Text } from '../../../../scenery/js/imports.js';
 import centerAndVariability from '../../centerAndVariability.js';
 import VariabilityModel from '../model/VariabilityModel.js';
 import Dialog from '../../../../sun/js/Dialog.js';
 import ToggleNode from '../../../../sun/js/ToggleNode.js';
 import VariabilityMeasure from '../model/VariabilityMeasure.js';
 import RangeInfoNode from './RangeInfoNode.js';
+import IQRInfoNode from './IQRInfoNode.js';
 import MADInfoNode from './MADInfoNode.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import PhetioObject from '../../../../tandem/js/PhetioObject.js';
@@ -20,7 +20,7 @@ export default class InfoDialog extends Dialog {
       tandemName: 'rangeInfoNode'
     }, {
       value: VariabilityMeasure.IQR,
-      createNode: tandem => new Text( 'IQR' ),
+      createNode: tandem => new IQRInfoNode( model, { tandem: tandem } ),
       tandemName: 'iqrInfoNode'
     }, {
       value: VariabilityMeasure.MAD,