Fix issue #13699: fix response tooltip misplaced and image doesn't show up #20147

ana-mc-almeida · 2024-04-10T12:46:55Z

Overview

This PR fixes Full interaction response tooltip misplaced for graph input interaction (and the image doesn't show up) #13699.
This PR does the following: The tooltip is now aligned with the short interaction response that the user clicks on to show the tooltip, and it fixes the issue of the graph not appearing within that tooltip.
The original bug occurred because: The tooltip was being called within the parent div of the short interaction response.

Essential Checklist

Please follow the instructions for making a code change.

I have linked the issue that this PR fixes in the "Development" section of the sidebar.
I have checked the "Files Changed" tab and confirmed that the changes are what I want to make.
I have written tests for my code.
The PR title starts with "Fix #bugnum: " or "Fix part of #bugnum: ...", followed by a short, clear summary of the changes.
I have assigned the correct reviewers to this PR (or will leave a comment with the phrase "@{{reviewer_username}} PTAL" if I can't assign them directly).

Proof that changes are correct

Before:

After:
Screencast_20240410_132208.webm
As requested by @seanlip in the discussion of issue #13699, the video also includes proof that other types of interactions (such as drag-and-drop) are functioning properly.

Proof of changes in Arabic language

PR Pointers

Never force push! If you do, your PR will be closed.
To reply to reviewers, follow these instructions: https://github.com/oppia/oppia/wiki/Make-a-pull-request#step-5-address-review-comments-until-all-reviewers-approve
Some e2e tests are flaky, and can fail for reasons unrelated to your PR. We are working on fixing this, but in the meantime, if you need to restart the tests, please check the "If your build fails" wiki page.
See the Code Owner's wiki page for what code owners will expect.

oppiabot · 2024-04-10T12:47:07Z

Assigning @Lawful2002 for the first pass review of this PR. Thanks!

github-actions · 2024-04-10T12:47:14Z

Hi! @ana-mc-almeida Welcome to Oppia! Could you please follow the instructions here and sign the CLA Sheet to get started? You'll need to do this before we can accept your PR. Thanks!

ana-mc-almeida · 2024-04-10T12:47:59Z

@seanlip PTAL

seanlip

Thanks @ana-mc-almeida! Left a couple of notes. Also could you please look at the failing CI checks?

...lates/pages/exploration-player-page/learner-experience/input-response-pair.component.spec.ts

extensions/interactions/GraphInput/directives/oppia-response-graph-input.component.spec.ts

seanlip · 2024-04-12T19:03:21Z

Also @ana-mc-almeida one other question. Could you avoid the reader having to scroll the graph in the response? (I looked at your video.)

Also how does the behaviour on mobile look like?

Thanks!

ana-mc-almeida · 2024-04-14T14:38:37Z

Hi @seanlip, thanks for your reply!

Also @ana-mc-almeida one other question. Could you avoid the reader having to scroll the graph in the response? (I looked at your video.)

I had also thought about this and even commented a proposed solution in the issue, but after testing the interactions, I noticed that it couldn't be done because it would affect the lessons already created since it depends on the position where the graph starts to be drawn.
Example:

with GRAPH_INPUT_LEFT_MARGIN: 120
with GRAPH_INPUT_LEFT_MARGIN: 200

Let me know if you think there's any other way to do this.

Also how does the behavior on mobile look like?

Thank you in advance for your time.

seanlip · 2024-04-16T17:20:31Z

@ana-mc-almeida Some thoughts -- perhaps you could determine the bounding box for the graph by looking at the coordinates of the vertices in it, and that will tell you what to show. Another option could be to show the full size of the graph canvas but "zoomed out" so that it's smaller (but still rectangular). I think both of those approaches would generalize for all the graphs, would any of the approaches work?

ana-mc-almeida · 2024-04-20T12:39:25Z

Hi @seanlip, sorry for the late reply and thanks for your help.

I think I have found a solution to remove the unnecessary whitespace that was causing users to have to scroll on the graph, but I would like to have your opinion on the way I'm doing it before committing the changes.

I followed your suggestion to check the coordinates of the graph vertices, and thus I am finding the vertex with the smallest X and only drawing from there. In the case of a labeled graph, it is also necessary to consider the labels. Below are screenshots of the changes:

This way, we end up with these graphs:

Proof of changes in Mobile
Proof of changes in Arabic language:

Please let me know if this is the result you were expecting.

seanlip · 2024-04-20T13:42:36Z

@ana-mc-almeida Generally speaking, the results in the pop-ups look fine, except that the whole point of this was to remove the scrollbars in the pop-ups, either by cropping or by shrinking the image or by making the pop-up a bit bigger. Could that be fixed?

Also, for drag-and-drop, you might want to remove the whitespace on the left in the pop-up. Otherwise it would not look great if the choices were longer.

Thanks!

ana-mc-almeida · 2024-04-20T15:03:38Z

@seanlip, sorry for misunderstanding.

However, I'm not understanding the goal of removing the scrollbars: increasing the size of the popup may lead to other problems, especially on mobile, and reducing the graph could make it illegible.

In your opinion, how should the popup look for the following graph?

Screencast_20240420_154402.online-video-cutter.com.mp4

I apologize deeply for this confusion.

seanlip · 2024-04-20T15:31:38Z

@ana-mc-almeida In my opinion, the graph should be zoomed out so that a smaller version shows in the popup without scrollbars. Or the popup should be bigger so that it doesn't have scrollbars.

oppiabot · 2024-04-27T15:53:24Z

Hi @ana-mc-almeida, I'm going to mark this PR as stale because it hasn't had any updates for 7 days. If no further activity occurs within 4 days, it will be automatically closed so that others can take up the issue.
If you are still working on this PR, please make a follow-up commit within 4 days (and submit it for review, if applicable). Please also let us know if you are stuck so we can help you!

ana-mc-almeida · 2024-04-28T15:07:40Z

@seanlip apologies for the delayed response, I was facing some difficulties, but I believe I've managed to sort them out.
Take a look and let me know what you think:

Labeled graph
Unlabeled graph that doesn't need resizing
Unlabeled graph that needs resizing
Mobile:
Arabic language:

seanlip · 2024-04-28T18:55:41Z

@ana-mc-almeida Your screenshots look good to me. Thanks for checking!

ana-mc-almeida · 2024-05-27T11:34:35Z

Hi @seanlip I'm failing an end-to-end test and I think it's a known flake: #19732 . I already commented here, could you PTAL and re-run the test? Thanks!

oppiabot · 2024-05-27T11:37:39Z

Unassigning @ana-mc-almeida since a re-review was requested. @ana-mc-almeida, please make sure you have addressed all review comments. Thanks!

seanlip

Thanks @ana-mc-almeida! Looks awesome :) Just trivial comment fixes and then it's good to go!

seanlip · 2024-05-27T13:39:18Z

extensions/interactions/GraphInput/directives/graph-detail.service.ts

+  // The minimum margin to the left and top of the display.
+  // The first vertex should be at (MIN_MARGIN, MIN_MARGIN).
+  // This value should not be 0 because only half of the vertex will be shown.
+  MIN_MARGIN: number = 10;


Can you make this MIN_MARGIN_PX (or whatever units it is)?

seanlip · 2024-05-27T13:39:30Z

extensions/interactions/GraphInput/directives/graph-detail.service.ts

+      return this.MIN_MARGIN;
+    }
+    // If the graph is labeled, the labels size should be taken into account
+    // because in arabic, the labels will be shown on the left side of the vertex.


Capitalize "Arabic".

seanlip · 2024-05-27T13:39:51Z

extensions/interactions/GraphInput/directives/graph-detail.service.ts

+    if (!graph.isLabeled) {
+      return this.MIN_MARGIN;
+    }
+    // If the graph is labeled, the labels size should be taken into account


labels size --> "label's size" or "label sizes"

seanlip · 2024-05-27T13:40:26Z

extensions/interactions/GraphInput/directives/oppia-response-graph-input.component.ts

@@ -58,6 +64,73 @@ export class ResponseGraphInput {
    ) as GraphAnswer;
    this.VERTEX_RADIUS = this.graphDetailService.VERTEX_RADIUS;
    this.EDGE_WIDTH = this.graphDetailService.EDGE_WIDTH;
+
+    this.MIN_MARGIN = this.graphDetailService.getMinMargin(this.graph);


Prefer MIN_MARGIN_PX

(probably should do it for the other constants above too, but OK to skip if you don't want to)

Done. I also changed the variables VERTEX_RADIUS and EDGE_WIDTH to VERTEX_RADIUS_PX and EDGE_WIDTH_PX, respectively.

seanlip · 2024-05-27T13:40:49Z

extensions/interactions/GraphInput/directives/oppia-response-graph-input.component.ts

+    return Math.max(...this.graph.vertices.map(vertex => vertex.y));
+  }
+
+  // This function calculates the scale factor required to fit the graph.


...to fit the graph within the display area.

oppiabot · 2024-05-27T13:44:46Z

Unassigning @seanlip since the review is done.

oppiabot · 2024-05-27T13:44:49Z

Hi @ana-mc-almeida, it looks like some changes were requested on this pull request by @seanlip. PTAL. Thanks!

ana-mc-almeida · 2024-05-29T15:12:07Z

Hi @seanlip PTAL

oppiabot · 2024-05-29T15:15:12Z

Unassigning @ana-mc-almeida since a re-review was requested. @ana-mc-almeida, please make sure you have addressed all review comments. Thanks!

seanlip

HI @ana-mc-almeida, could you please respond to all review comments, as explained in the PR guidelines? Please don't resolve comments directly, it makes it hard for reviewers because they have to open each comment to get the context.

Please fix this and then request review again. Thanks!

ana-mc-almeida · 2024-05-29T23:00:41Z

Sorry @seanlip, I've already unresolved and responded to all comments. Could you PTAL? Thanks!

oppiabot · 2024-05-29T23:03:46Z

Unassigning @ana-mc-almeida since a re-review was requested. @ana-mc-almeida, please make sure you have addressed all review comments. Thanks!

seanlip

LGTM. Thanks @ana-mc-almeida !

seanlip · 2024-05-30T17:11:33Z

@Lawful2002 @lkbhitesh07 PTAL for codeowners, thanks.

Fix response tooltip misplaced and image doesn't show up

77c9cb8

ana-mc-almeida requested review from a team as code owners April 10, 2024 12:46

ana-mc-almeida requested review from Lawful2002 and lkbhitesh07 April 10, 2024 12:46

oppiabot bot assigned Lawful2002 Apr 10, 2024

oppiabot bot assigned seanlip Apr 10, 2024

seanlip requested changes Apr 12, 2024

View reviewed changes

...lates/pages/exploration-player-page/learner-experience/input-response-pair.component.spec.ts Outdated Show resolved Hide resolved

extensions/interactions/GraphInput/directives/oppia-response-graph-input.component.spec.ts Outdated Show resolved Hide resolved

seanlip assigned ana-mc-almeida and unassigned seanlip Apr 12, 2024

Fix typo in test title and format

fc34ac8

ana-mc-almeida requested a review from seanlip April 14, 2024 14:39

oppiabot bot added the stale label Apr 27, 2024

oppiabot bot removed the stale label Apr 28, 2024

ana-mc-almeida added 3 commits April 28, 2024 20:22

Remove scrollbars in the popup and zoom out graph

e3f0fe4

Update tests

aa1f3f8

Add tests to graph resize

af89932

ana-mc-almeida added 2 commits May 26, 2024 23:52

Add comments

9e518b3

Update tests

d9e103c

oppiabot bot assigned seanlip and unassigned ana-mc-almeida May 27, 2024

seanlip requested changes May 27, 2024

View reviewed changes

oppiabot bot unassigned seanlip May 27, 2024

oppiabot bot assigned ana-mc-almeida May 27, 2024

ana-mc-almeida added 3 commits May 29, 2024 12:36

Comment fixes and update variable names

b3cd7f5

Revert combined-tests.spec.ts changes

7970d7a

Format with prettier

128ca1b

oppiabot bot assigned seanlip and unassigned ana-mc-almeida May 29, 2024

seanlip requested changes May 29, 2024

View reviewed changes

seanlip assigned ana-mc-almeida and unassigned seanlip May 29, 2024

oppiabot bot assigned seanlip and unassigned ana-mc-almeida May 29, 2024

seanlip approved these changes May 30, 2024

View reviewed changes

seanlip enabled auto-merge May 30, 2024 17:10

seanlip assigned lkbhitesh07 and unassigned seanlip May 30, 2024

Fix issue #13699: fix response tooltip misplaced and image doesn't show up #20147

Are you sure you want to change the base?

Fix issue #13699: fix response tooltip misplaced and image doesn't show up #20147

Conversation

ana-mc-almeida commented Apr 10, 2024 • edited

Overview

Essential Checklist

Proof that changes are correct

Proof of changes in Arabic language

PR Pointers

oppiabot bot commented Apr 10, 2024

github-actions bot commented Apr 10, 2024

ana-mc-almeida commented Apr 10, 2024

seanlip left a comment

Choose a reason for hiding this comment

seanlip commented Apr 12, 2024 • edited

ana-mc-almeida commented Apr 14, 2024 • edited

seanlip commented Apr 16, 2024

ana-mc-almeida commented Apr 20, 2024

seanlip commented Apr 20, 2024

ana-mc-almeida commented Apr 20, 2024

seanlip commented Apr 20, 2024

oppiabot bot commented Apr 27, 2024

ana-mc-almeida commented Apr 28, 2024

seanlip commented Apr 28, 2024

ana-mc-almeida commented May 27, 2024 • edited

oppiabot bot commented May 27, 2024

seanlip 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

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

oppiabot bot commented May 27, 2024

oppiabot bot commented May 27, 2024

ana-mc-almeida commented May 29, 2024

oppiabot bot commented May 29, 2024

seanlip left a comment

Choose a reason for hiding this comment

ana-mc-almeida commented May 29, 2024

oppiabot bot commented May 29, 2024

seanlip left a comment

Choose a reason for hiding this comment

seanlip commented May 30, 2024

ana-mc-almeida commented Apr 10, 2024 •

edited

seanlip commented Apr 12, 2024 •

edited

ana-mc-almeida commented Apr 14, 2024 •

edited

ana-mc-almeida commented May 27, 2024 •

edited