With some string tests moving Reference Line causes buttons/graphs to move

[Nancy-Salpepi]

Test device
MacBook Air (m1 chip)

Operating System
13.2.1

Browser
safari/chrome

Problem description
For phetsims/qa#921, with stringTest=long and stringTest=rtl:
When the Reference Line is moved to the left, the graph/buttons on the left side of the screen also move.

Steps to reproduce
On the Derivative and Integral Screens:

1. Check Tangent/Area Under Curve and Reference Line Checkboxes
2. Drag the Reference Line to the left

On the Advanced and Lab Screens:

1. Check the Reference Line Checkbox
2. Drag the Reference Line to the left

Visuals

thingsmove.mp4

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: 12345678901234567890123456789012345678901234567890 URL: https://phet-dev.colorado.edu/html/calculus-grapher/1.0.0-dev.25/phet/calculus-grapher_all_phet.html?stringTest=long Version: 1.0.0-dev.25 2023-03-20 03:37:03 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Language: en-US Window: 1375x773 Pixel Ratio: 1.7999999523162842/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

Wow, good find -- and incredibly weird. I thought it might have something to do with the scrubber's pointer areas, but they look OK with ?stringTest=long&showPointerAreas:

[pixelzoom]

Identical weirdness occurs with the Reference Line scrubber and the "Net Signed Area" accordion box in the Integral screen. Only the Reference Line scrubber causes this; no such weirdness occurs with the other scrubbers.

"Slope of Tangent" accordion box is positioned dynamically in DerivativeScreenView.ts:

    // Center slopeOfTangentAccordionBox in the negative space to the left of graphNode, top-aligned with graphNode.y.
    this.graphsNode.boundsProperty.link( () => {
      slopeOfTangentAccordionBox.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
      slopeOfTangentAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
    } );

"Net Signed Area" accordion box is positioned dynamically in IntegralScreenView.ts:

    // Center netSignedAreaAccordionBox in the negative space to the left of graphNode, top-aligned with graphNode.y.
    this.graphsNode.boundsProperty.link( () => {
      netSignedAreaAccordionBox.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
      netSignedAreaAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
    } );

[pixelzoom]

Adding this to DerivativeScreenView.ts:

    this.graphsNode.boundsProperty.link( () => {
+     console.log( `this.graphsNode.left=${this.graphsNode.left}` );
      slopeOfTangentAccordionBox.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
      slopeOfTangentAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
    } );

... I can see that graphsNode.left is changing as the Reference Line scrubber is dragged to the left. Running with "Values" preference on reveals the culprit. It's the x value that's shown at the top of the Reference Line:

[pixelzoom]

Fixed in the above commits by setting a maxWidth for the "x = {{number}}" value that the Reference Line displays. Screenshot below is with ?stringTest=long&valuesVisible=true.

@Nancy-Salpepi please verify in master, close if OK.

[Nancy-Salpepi]

@pixelzoom things are much improved! There is still a teeny tiny bit of movement. It is easier to see with rtl --looking at the title text:

slightmovement.mp4

[Nancy-Salpepi]

I also noticed something odd happening on the right side of the screen with stringTest=long. I am including it here because I think it might be the same issue:

1. Decrease your window size so that it is about half the size of your screen
2. On any screen, Check the Reference Line Checkbox
3. Move the Reference Line all the way to the right side
4. In the Simulation Tab, turn on Predict Mode --the right panel moves slightly off screen

sideofpanel.mp4

[pixelzoom]

I'll have a look. I made a maxWidth a very generous value, and can definitely reduce it.

[pixelzoom]

Reducing maxWidth isn't going to resolve this.

The scenario that @Nancy-Salpepi described in #304 (comment) is a problem even without stringTest=long. Following the same steps with ?valuesVisible=true&dev, results in the screenshot below. I'll need to change the layout strategy for both the accordion box (on left) and control panel (on right).

Relevant code in CalculusGrapherScreenView.ts:

    // Put control panel in the negative space to the right of graphsNode, top-aligned with graphsNode.y.
    rightVBox.boundsProperty.link( () => {
      rightVBox.centerX = this.layoutBounds.right - ( this.layoutBounds.right - this.graphsNode.right ) / 2;
      rightVBox.top = this.graphsNode.y;
    } );

[pixelzoom]

This can also affect the positioning of the radio buttons in the Advanced and Lab screens.

In CalculusGrapherScreenView.ts:

      this.graphsNode.boundsProperty.link( () => {
        graphSetRadioButtonGroup.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
      } );

[pixelzoom]

In the above commits, I fixed dynamic positioning of the following things:

• "Slope of Tangent" accordion box (Derivative screen)
• "Net Signed Area" accordion box (Intergral screen)
• Radio button group to the left of the graphs (Advanced and Lab screens)
• Control panel and checkbox group to the right of the graphs (all screens)

Please test with stringTest=long, stringTest=rtl, and no stringTest. Turn on "Reference Line" checkbox, and drag the Reference Line to its far left and right positions. Also check with and without "Values" preference.

Over to @Nancy-Salpepi for verification, close if OK. And thanks for discovering this!

[Nancy-Salpepi]

This looks good with stringTest=long, stringTest=rtl, and no stringTest. Closing!