diff --git a/js/variability/view/IQRInfoNode.ts b/js/variability/view/IQRInfoNode.ts index 84c0f8dd..11eb5325 100644 --- 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 ) { + public constructor( model: VariabilityModel, options: PickRequired ) { 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 index a1d2f20b..9a6f95bb 100644 --- a/js/variability/view/IQRNode.ts +++ b/js/variability/view/IQRNode.ts @@ -101,6 +101,8 @@ 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 ); @@ -108,9 +110,7 @@ export default class IQRNode extends CAVPlotNode { 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 index 45f11119..165c77e7 100644 --- 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,