Add scale selector to AreaWindow

[bbbrandyn]

Background

1135

Why did you take this approach?

I decided to use the existing ColormapRange component to avoid redundancy.

Anything in particular that should be highlighted?

I'm not sure why the check box isn't in line with the other ones in the area settings card.

Screenshot(s)

Checks

• [ ] I ran unit tests.
• [X] I've tested the relevant changes from a user POV.
• [ ] I've formatted my Python code using black ..

Hint To run all python unit tests run the following command from the root repository directory:

bash run_python_tests.sh

[JustinElms]

Looks good so far! How does it behave when the compare dataset option is checked?

[bbbrandyn]

Looks good so far! How does it behave when the compare dataset option is checked?

It seems to work fine however I am not too familiar with expected behaviour of the compare datasets functionality

[JustinElms]

It looks like the scale defaulted to -10, 10 when compare datasets was checked. Is it possible to update the scale here to do the same thing? Perhaps it should default to "Auto" when the compare datasets checkbox is first checked and if the user then wants to adjust the scale the default values can be -10,10.If that makes sense?

[bbbrandyn]

sure I'll give that a try

[bbbrandyn]

It looks like the scale defaulted to -10, 10 when compare datasets was checked. Is it possible to update the scale here to do the same thing? Perhaps it should default to "Auto" when the compare datasets checkbox is first checked and if the user then wants to adjust the scale the default values can be -10,10.If that makes sense?

I'm not sure how to edit the state of the ColormapRange component from another function. Maybe the approach should be to hide the current ColormapRange component and show a separate one when Compare Datasets is selected?

[JustinElms]

Maybe you can add an update function in AreaWindow that gets called when the box gets checked/unchecked and sets this.state.scale appropriately. Something like this might do it:

// new update function could look something like this (add before the render/return):
compareChanged(checked) {

  if (checked) {
    // set the scale state to the compare range (-10,10)
  } else {
    // set the scale state to the variable range (-5,30, or whatever the default is for the variable)
  }

  this.props.setCompareDatasets(checked)
}

...

 <CheckBox
            id="dataset_compare"
            key="dataset_compare"
            checked={this.props.dataset_compare} 
            //onUpdate={(_, checked) => this.props.setCompareDatasets(checked)} 
            onUpdate={(_, checked) => compareChanged(checked)}
            title={_("Compare Datasets")}
          />

[bbbrandyn]

I tried that, it did set the scale however it doesn't change the values in the input fields of the ColormapRange component

[JustinElms]

After a bit of digging I realized that the problem is with the ColormapRange component. It needs a useEffect hook to update the scale values. I added a couple commits that fix that and update the scale when the variable changes (just noticed that it doesn't get updated).

Besides that there's some cleanup work we can do. Not sure if we need the scale_1 and scale_diff variables anymore. Also we should move the auto checkbox in line with the others since it'll be available all the time now. I can help out with some of that if you'd like.

[bbbrandyn]

I also think scale_1 and scale_diff are unnecessary now. Do you know why the auto checkbox is not in line?

[JustinElms]

Its probably set in Ocean-Data-Map-Project/oceannavigator/frontend/src/stylesheets/components/_ColormapRange.scss

[bbbrandyn]

added css changes