From 4874259a851fb99cf1b91ee16e214d0554490b15 Mon Sep 17 00:00:00 2001
From: jbphet <jpblanco@yahoo.com>
Date: Fri, 6 Jan 2023 17:13:19 -0700
Subject: [PATCH] remove stroke from observation window, limit flux meter
 vertical range, adjust layout, see
 https://github.com/phetsims/greenhouse-effect/issues/250 and
 https://github.com/phetsims/greenhouse-effect/issues/248

(cherry picked from commit e6581942bb40665b1eba98f9f653b8cca37bbe65)
---
 js/common/GreenhouseEffectConstants.ts              |  4 ++--
 js/common/view/FluxMeterNode.ts                     |  5 ++++-
 js/common/view/GreenhouseEffectObservationWindow.ts | 10 ++++------
 js/waves/view/WavesScreenView.ts                    |  5 ++++-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/js/common/GreenhouseEffectConstants.ts b/js/common/GreenhouseEffectConstants.ts
index 0efcbe2c..58552745 100644
--- a/js/common/GreenhouseEffectConstants.ts
+++ b/js/common/GreenhouseEffectConstants.ts
@@ -15,10 +15,10 @@ const GreenhouseEffectConstants = {
 
   // margins
   SCREEN_VIEW_X_MARGIN: 15,
-  SCREEN_VIEW_Y_MARGIN: 15,
+  SCREEN_VIEW_Y_MARGIN: 10,
 
   // spacing between observation window and UI components to its right
-  OBSERVATION_WINDOW_RIGHT_SPACING: 15,
+  OBSERVATION_WINDOW_RIGHT_SPACING: 12,
 
   // font for titles used throughout the sim in panels and sections
   TITLE_FONT: new PhetFont( { size: 16, weight: 'bold' } ),
diff --git a/js/common/view/FluxMeterNode.ts b/js/common/view/FluxMeterNode.ts
index 1815fd59..0a8eeafd 100644
--- a/js/common/view/FluxMeterNode.ts
+++ b/js/common/view/FluxMeterNode.ts
@@ -77,7 +77,10 @@ const CUE_ARROW_OPTIONS = {
 // so we use and arbitrary value that looks decent in the view.
 const SENSOR_VIEW_HEIGHT = 10;
 
-const FLUX_SENSOR_VERTICAL_RANGE = new Range( 500, LayersModel.HEIGHT_OF_ATMOSPHERE - 500 );
+// The vertical range over which the flux meter is allowed to move.  The lower end allows the sensor to get close to the
+// ground but not overlap with UI elements (see https://github.com/phetsims/greenhouse-effect/issues/248).  The upper
+// end makes sure that the sensor stays fully within the observation window.
+const FLUX_SENSOR_VERTICAL_RANGE = new Range( 750, LayersModel.HEIGHT_OF_ATMOSPHERE - 700 );
 
 type SelfOptions = {
 
diff --git a/js/common/view/GreenhouseEffectObservationWindow.ts b/js/common/view/GreenhouseEffectObservationWindow.ts
index 92e708c1..7b8adb36 100644
--- a/js/common/view/GreenhouseEffectObservationWindow.ts
+++ b/js/common/view/GreenhouseEffectObservationWindow.ts
@@ -27,6 +27,7 @@ import Easing from '../../../../twixt/js/Easing.js';
 import startSunlightChord_mp3 from '../../../sounds/startSunlightChord_mp3.js';
 import greenhouseEffect from '../../greenhouseEffect.js';
 import GreenhouseEffectStrings from '../../GreenhouseEffectStrings.js';
+import GreenhouseEffectConstants from '../GreenhouseEffectConstants.js';
 import LayersModel from '../model/LayersModel.js';
 import EnergyBalancePanel from './EnergyBalancePanel.js';
 import FluxMeterNode, { FluxMeterNodeOptions } from './FluxMeterNode.js';
@@ -75,8 +76,8 @@ class GreenhouseEffectObservationWindow extends Node {
     const options = optionize<GreenhouseEffectObservationWindowOptions, StrictOmit<SelfOptions, 'fluxMeterNodeOptions'>, NodeOptions>()( {
 
       // default position in the GreenhouseEffect sim
-      left: 5,
-      top: 10,
+      left: GreenhouseEffectConstants.SCREEN_VIEW_X_MARGIN,
+      top: GreenhouseEffectConstants.SCREEN_VIEW_Y_MARGIN,
 
       // phet-io
       tandem: Tandem.REQUIRED
@@ -106,10 +107,7 @@ class GreenhouseEffectObservationWindow extends Node {
     // TODO: 10/13/2021 - I (jbphet) am refactoring the observation window to be in subclasses.  The windowFrame needs
     //                    to be available to subclasses at this moment, but might not eventually, so check this later
     //                    and make it local if possible, or just delete this comment if not.
-    this.windowFrame = Rectangle.dimension( SIZE, {
-      lineWidth: 2,
-      stroke: 'black'
-    } );
+    this.windowFrame = Rectangle.dimension( SIZE, { lineWidth: 0 } );
     this.addChild( this.windowFrame );
 
     // Clip the root node to stay within the frame.
diff --git a/js/waves/view/WavesScreenView.ts b/js/waves/view/WavesScreenView.ts
index f7798e0b..a7a5078e 100644
--- a/js/waves/view/WavesScreenView.ts
+++ b/js/waves/view/WavesScreenView.ts
@@ -124,7 +124,10 @@ class WavesScreenView extends GreenhouseEffectScreenView {
     visibilityBox.left = this.observationWindow.left + 5;
     visibilityBox.centerY = this.timeControlNode.centerY;
 
-    concentrationControls.leftTop = this.energyLegend.leftBottom.plusXY( 0, 10 );
+    concentrationControls.leftTop = this.energyLegend.leftBottom.plusXY(
+      0,
+      GreenhouseEffectConstants.SCREEN_VIEW_Y_MARGIN
+    );
 
     this.addChild( visibilityBox );