Bug 1826962: Limit the amount a user can zoom in/out in topology #5160

jeff-phillips-18 · 2020-04-22T21:04:51Z

Fixes:
https://issues.redhat.com/browse/ODC-3490

Analysis / Root cause:
The graph scale did not include any zoom extent boundaries so the zoom buttons allowed for infinite zoom in/out.

Solution Description:
Add zoomExtents to the BaseGraph to prevent setting the scale out of the extent boundaries.

/kind bug

openshift-ci-robot · 2020-04-22T21:04:58Z

@jeff-phillips-18: This pull request references Bugzilla bug 1826962, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.5.0) matches configured target release for branch (4.5.0)
bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1826962: Limit the amount a user can zoom in/out in topology

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

andrewballantyne

/assign

andrewballantyne · 2020-04-22T21:21:15Z

frontend/packages/topology/src/elements/BaseGraph.ts

+    const zoomExtents: [number, number] = [this.zoomExtents[0], this.zoomExtents[1]];
+    let updateExtents = false;
+    if ('minZoom' in model && typeof model.minZoom === 'number') {
+      zoomExtents[0] = +model.minZoom;


Isn't +variable a cast to number? Wouldn't your if-statement typeof check and types make this check redundant?

andrewballantyne · 2020-04-22T21:27:15Z

frontend/packages/topology/src/elements/BaseGraph.ts

@@ -238,6 +248,19 @@ export default class BaseGraph<E extends GraphModel = GraphModel, D = any> exten
    if ('layout' in model) {
      this.setLayout(model.layout);
    }
+    const zoomExtents: [number, number] = [this.zoomExtents[0], this.zoomExtents[1]];
+    let updateExtents = false;
+    if ('minZoom' in model && typeof model.minZoom === 'number') {


I'm a little taken-back by the usage of the type and this check. I agree it's good to be safe, but I wonder if we are crutching at the wrong spot? Can you make the model setter a little more stable so it's either undefined or a number?

andrewballantyne · 2020-04-22T21:29:45Z

frontend/packages/topology/src/elements/BaseGraph.ts

@@ -25,6 +25,8 @@ export default class BaseGraph<E extends GraphModel = GraphModel, D = any> exten

  private currentLayout?: Layout;

+  private zoomExtents: [number, number] = [0.25, 4];


I wonder if we want to type the [number, number]... you use it frequently. Would it make sense to type it?

andrewballantyne · 2020-04-22T21:36:57Z

frontend/packages/topology/src/behavior/useDragNode.tsx

@@ -59,7 +60,7 @@ export const useDragNode = <
    React.useMemo(() => {
      const sourceSpec: DragSourceSpec<any, any, any, any, Props> = {
        item: (spec && spec.item) || { type: '#useDragNode#' },
-        operation: (monitor, p) => {
+        operation: (monitor: DragSourceMonitor, p: any) => {


I assume p is Props... you have a Props type, does that align?

jeff-phillips-18 · 2020-04-23T13:06:33Z

/retest

andrewballantyne · 2020-04-23T13:49:15Z

frontend/packages/topology/src/elements/BaseGraph.ts

@@ -25,6 +25,8 @@ export default class BaseGraph<E extends GraphModel = GraphModel, D = any> exten

  private currentLayout?: Layout;

+  private zoomExtent: [number, number] = [0.25, 4];


Is there a type here? What are the two numbers representing? Min & Max? Maybe a type of ZoomBounds?

andrewballantyne

/lgtm

Minor suggestion to shift the type to the hook.

andrewballantyne · 2020-04-23T21:49:32Z

frontend/packages/topology/src/behavior/usePanZoom.tsx

 export type PanZoomRef = (node: SVGGElement | null) => void;

 // Used to send events prevented by d3.zoom to the document allowing modals, dropdowns, etc, to close
 const propagatePanZoomMouseEvent = (e: Event): void => {
  document.dispatchEvent(new MouseEvent(e.type, e));
 };

-export const usePanZoom = (zoomExtent: [number, number] = ZOOM_EXTENT): PanZoomRef => {
+export const usePanZoom = (): PanZoomRef => {
  const element = React.useContext(ElementContext);
  if (!isGraph(element)) {
    throw new Error('usePanZoom must be used within the scope of a Graph');
  }
  const elementRef = React.useRef(element);


Not sure you need to do the as Graph on the current. You can just type the useRef and the isGraph does the type-guard.

Suggested change

const elementRef = React.useRef(element);

const elementRef = React.useRef<Graph>(element);

christianvogt · 2020-04-29T19:22:16Z

frontend/packages/topology/src/behavior/usePanZoom.tsx

+      }
+      const zoom = d3
+        .zoom()
+        .scaleExtent([elementRef.current.getMinScale(), elementRef.current.getMaxScale()])


This behavior needs to track changes to the min and max scales and ensure that the new extent is set when one of these values change.

christianvogt · 2020-04-29T19:29:00Z

frontend/packages/topology/src/elements/BaseGraph.ts

  setScale(scale: number): void {
-    this.scale = scale;
+    this.scale = Math.max(Math.min(scale, this.maxScale), this.minScale);
  }


Thought we decided that a user should be able to set the scale to anything.
Currently if we use the fit to screen option on a very spread out visualization, panning the graph will reset the scale because the behavior is using setScale.

christianvogt · 2020-04-29T19:29:32Z

frontend/packages/topology/src/elements/BaseGraph.ts

+  private minScale: number = 0.25;
+
+  private maxScale: number = 4;


These need to be observable

christianvogt · 2020-04-29T19:32:40Z

frontend/packages/topology/src/elements/BaseGraph.ts

+  setMinScale(min: number): void {
+    this.minScale = min;
+  }


Should we ensure that min < max?
Although this kind of validation may be problematic when using two separate values vs an array extent such as [number, number] because when trying to set new values, you'll have to pay attention to the order in which they are set otherwise an error can be thrown ;/

Still unsure if i prefer an array extent over individual values.

Hmmm... guess it would be better to make it an array.

christianvogt · 2020-04-30T16:11:07Z

/lgtm
/approve

openshift-ci-robot · 2020-04-30T16:11:24Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: andrewballantyne, christianvogt, jeff-phillips-18

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/packages/topology/OWNERS~~ [christianvogt]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-ci-robot · 2020-04-30T19:20:56Z

@jeff-phillips-18: All pull requests linked via external trackers have merged: openshift/console#5160. Bugzilla bug 1826962 has been moved to the MODIFIED state.

In response to this:

Bug 1826962: Limit the amount a user can zoom in/out in topology

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci-robot · 2020-04-30T20:52:51Z

@jeff-phillips-18: The following test failed, say /retest to rerun all failed tests:

Test name	Commit	Details	Rerun command
ci/prow/e2e-gcp-console	`5fa8d41`	link	`/test e2e-gcp-console`

Full PR test history. Your PR dashboard. Please help us cut down on flakes by linking to an open issue when you hit one in your PR.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here.

openshift-ci-robot added kind/bug Categorizes issue or PR as related to a bug. bugzilla/unspecified labels Apr 22, 2020

openshift-ci-robot added the bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. label Apr 22, 2020

openshift-ci-robot requested review from benjaminapetersen and zherman0 April 22, 2020 21:05

openshift-ci-robot added the component/dev-console Related to dev-console label Apr 22, 2020

andrewballantyne suggested changes Apr 22, 2020

View reviewed changes

openshift-ci-robot assigned andrewballantyne Apr 22, 2020

jeff-phillips-18 force-pushed the zoom-extents branch 2 times, most recently from 781f1bf to 0640920 Compare April 23, 2020 11:39

andrewballantyne reviewed Apr 23, 2020

View reviewed changes

jeff-phillips-18 force-pushed the zoom-extents branch from 0640920 to 8f2ae8b Compare April 23, 2020 18:43

andrewballantyne approved these changes Apr 23, 2020

View reviewed changes

openshift-ci-robot added lgtm Indicates that a PR is ready to be merged. bugzilla/severity-unspecified Referenced Bugzilla bug's severity is unspecified for the PR. and removed bugzilla/unspecified labels Apr 23, 2020

christianvogt reviewed Apr 29, 2020

View reviewed changes

Bug 1826962: Limit the amount a user can zoom in/out in topology

5fa8d41

jeff-phillips-18 force-pushed the zoom-extents branch from 8f2ae8b to 5fa8d41 Compare April 30, 2020 13:00

openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Apr 30, 2020

openshift-ci-robot assigned christianvogt Apr 30, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Apr 30, 2020

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Apr 30, 2020

openshift-merge-robot merged commit da555f1 into openshift:master Apr 30, 2020

spadgett added this to the v4.5 milestone May 1, 2020

jeff-phillips-18 deleted the zoom-extents branch December 2, 2020 13:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug 1826962: Limit the amount a user can zoom in/out in topology #5160

Bug 1826962: Limit the amount a user can zoom in/out in topology #5160

jeff-phillips-18 commented Apr 22, 2020

openshift-ci-robot commented Apr 22, 2020

andrewballantyne left a comment

andrewballantyne Apr 22, 2020

andrewballantyne Apr 22, 2020

andrewballantyne Apr 22, 2020

andrewballantyne Apr 22, 2020

jeff-phillips-18 commented Apr 23, 2020

andrewballantyne Apr 23, 2020

andrewballantyne left a comment

andrewballantyne Apr 23, 2020

christianvogt Apr 29, 2020

christianvogt Apr 29, 2020

christianvogt Apr 29, 2020

christianvogt Apr 29, 2020

jeff-phillips-18 Apr 30, 2020

christianvogt commented Apr 30, 2020

openshift-ci-robot commented Apr 30, 2020

openshift-ci-robot commented Apr 30, 2020

openshift-ci-robot commented Apr 30, 2020

		@@ -25,6 +25,8 @@ export default class BaseGraph<E extends GraphModel = GraphModel, D = any> exten

		private currentLayout?: Layout;

		private zoomExtents: [number, number] = [0.25, 4];

		@@ -25,6 +25,8 @@ export default class BaseGraph<E extends GraphModel = GraphModel, D = any> exten

		private currentLayout?: Layout;

		private zoomExtent: [number, number] = [0.25, 4];

	const elementRef = React.useRef(element);
	const elementRef = React.useRef<Graph>(element);

		private minScale: number = 0.25;

		private maxScale: number = 4;

Bug 1826962: Limit the amount a user can zoom in/out in topology #5160

Bug 1826962: Limit the amount a user can zoom in/out in topology #5160

Conversation

jeff-phillips-18 commented Apr 22, 2020

openshift-ci-robot commented Apr 22, 2020

andrewballantyne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeff-phillips-18 commented Apr 23, 2020

Choose a reason for hiding this comment

andrewballantyne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christianvogt commented Apr 30, 2020

openshift-ci-robot commented Apr 30, 2020

openshift-ci-robot commented Apr 30, 2020

openshift-ci-robot commented Apr 30, 2020