line chart: support manual extent changes #4711
Conversation
|
FYI @atishagarwala |
tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
Outdated
Show resolved
Hide resolved
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
Outdated
Show resolved
Hide resolved
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
Outdated
Show resolved
Hide resolved
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
Outdated
Show resolved
Hide resolved
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
Outdated
Show resolved
Hide resolved
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
Outdated
Show resolved
Hide resolved
| (keydown)="keydownPreventClose($event)" | ||
| > | ||
| <label>min</label> | ||
| <input #minInput tabindex="1" type="number" [value]="axisExtent[0]" /> |
There was a problem hiding this comment.
Panning the graph via alt+drag seems to set the value to extremely high precision, and by default the beginning of the number is not visible. Can we round values when the form is hydrated?
There was a problem hiding this comment.
We can optimize those UX consideration in a follow up. Depending on a value, rounding can be quite janky thus is not a simple one or two line change.
One of the requested feature in the scalars chart is being able to change the axis extent manually. For example, when plotting a probability, you want to see the chart from [0, 1] since there is absolutely no reason to look beyond that. This change gives a UI affordance to do so. Clicking on an axis, you will see a popover with controls that allows you to manually set the extents.
stephanwlee
force-pushed
the
lc_axis_change
branch
from
789a660 to
bb7ccc6
Compare
|
@psybuzz updated the PR and description according to the offline discussion. |
There was a problem hiding this comment.
Thanks for addressing the feedback! Only minor comments.
With the style encapsulation, what does that really achieve?
True, there actually isn't much real risk. A quick search shows only 3 components explicitly using ViewEncapsulation.None, but since we prefer encapsulation by default, no need to worry.
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
Outdated
Show resolved
Hide resolved
| .extent-edit-button { | ||
| background-color: mat-color($mat-gray, 200); | ||
| display: none; | ||
| font-size: 0; |
There was a problem hiding this comment.
This element has no text, and line-height is fixed. Checking: can font-size be dropped?
There was a problem hiding this comment.
I cannot fathom internals of mat-icon-button but without font-size, it pushes the mat-icon down to near ~line-height which makes me think that there is some invisible whitespace in the template causing the UI jank.
tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
Show resolved
Hide resolved
2 participants
One of the requested feature in the scalars chart is being able to
change the axis extent manually. For example, when plotting a
probability, you want to see the chart from [0, 1] since there is
absolutely no reason to look beyond that. This change gives a UI
affordance to do so.
Clicking on an axis, you will see a popover with controls that allows
you to manually set the extents.
Future UX tweaks (including how the UI control is presented) will
follow.
Something to be improved (in a follow up): when the dropdown is visible, maybe make the edit button still visible.