isi-vista / adam

Abduction to Demonstrate an Articulate Machine
MIT License
10 stars 4 forks source link

Dynamically set max value for UI scene number selector #1167

Open sidharth-sundar opened 2 years ago

sidharth-sundar commented 2 years ago

Currently, our UI has a box for accepting scene number within a curriculum, and is configured to accept any integer input and return either the associated situation information, or pass an error if no such information is available. However, the arrow buttons on the right side of the box only correctly increment and decrement the value to a minimum of 1 and a maximum of 100.

image

If manually entered into the box, the UI can accept scene numbers greater than 100 and serve the associated data. However, we would like for the range the arrows cover to match the number of available situations to display for any given curriculum. The task here is two-fold:

  1. Configure the maximum scene number value to match the number of available situations for any specific train/test configuration
  2. When we generate new data and the front end polls for changes, update the scene number span to match the newly available data

To get started, the specific UI element to fix can be found at angular_viewer/adam_angular_demo/src/app/components/selector-parent/selector-parent.component.html:

  <div class="outline box">
    <div class="number">
      Select Scene Number
      <input
        type="number"
        name="num"
        min="1"
        max="100"
        class="form-control input"
        aria-labelledby="inputSceneNum"
        name="selectSceneNumber"
        [(ngModel)]="selectedSceneNum"
      />
    </div>
  </div>