radiasoft / sirepo

Sirepo is a framework for scientific cloud computing. Try it out!
https://sirepo.com
Apache License 2.0
63 stars 31 forks source link

provide feedback when epics value changes #5685

Closed moellep closed 1 year ago

moellep commented 1 year ago

In the accel app, when a read-only values change and is updated in the UI, it would be nice if it highlighted the field briefly.

For example, color the input background light green and fade out. The controls app did this by setting using this css:

@keyframes sr-updated {
  0% {
    background: #dff0d8;
  }
  100% {
    background: none;
  }
}

.sr-updated-cell {
  animation: sr-updated 1.5s ease;
}

and turning that class on/off with a $timeout.

For example, in the simscopy epics example, when the "Min Value" is updated, the field should flash green briefly.

This probably needs to be set via jquery, because the input element doesn't allow class overrides in the angular app. So, possibly something like this pseudocode (only more general).

$(".model-MTEST-MinValue input").addClass('sr-updated');
$timeout(() => $(".model-MTEST-MinValue input").addClass('sr-updated'), 1500);
moellep commented 1 year ago

Updating this issue with more info - we need to keep epics values separate from input values because you can set a value, but it may take a second or so before it updates, and you don’t want the UI value getting clobbered with the old value during a read. I looked at how other epics UIs handle this, and they keep the epics read-value separate from the update like this. x

So I think that makes sense - you always know the reading vs a setting. I’d still like the epics values to flash when they are updated, and we could also color the input fields when they are out-of-sync with the epics value. One use-case would be you have a bunch of settings and have saved a sirepo sim, then you visit that sim, and none of the epics values match, so you save changes, and the epics values would get updated. x2

moellep commented 1 year ago

Fixed with #5655