search: Add jump to date feature. #25014

lakshaykananiya · 2023-04-06T08:53:10Z

We currently do not have support for jumping to messages sent on a specific date for a particular stream or topic.

The approach here is to add a flatpickr popup when we click on the recipient_row_date which will make the view jump to the messages sent on the selected date when confirmed.

Used date.sent column of zerver_message table to compare the date to the selected date which comes in through anchor_date parameter that is added to /json/messages endpoint.

Continues the work of: #24357.
Fixes: #23995.

Update # 1:
Added a button in the flatpickr that pops up when we click
on the date in recipient_row_date.

A dependency is added for this: shortcut-buttons-flatpickr.

The approach is to add the plugin this dependency contains in
the flatpickr and then whenever onClose is called,
the required behavior will take place as we're passing the
beginning of the time "1970-01-01" as date through null.

Update # 2
The current version only shows the complete date in tippy.
The updated version will show a (Click to jump dates) along
with that full date to inform users about this feature.

Update # 3
Addressed feedback,

Disabled future dates.
Updated tippy to better represent function.
Added required class to Scroll to top button.
Centralised Scroll to top` button.
Fixed corners poking out of the dialog.

Completed:

Jump to a specific date on streams/topics.
Jump to a specific date on all messages.
Functionality to jump to the top of the topic.
Updated tippy.
Frontend tests.
Backend tests.

Info: This PR solves one issue that is part of my GSoC proposal.

Screenshots and screen captures:

Latest screenshots

Self-review checklist

Self-reviewed the changes for clarity and maintainability
(variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

Explains differences from previous plans (e.g., issue description).
Highlights technical choices and bugs encountered.
Calls out remaining decisions and concerns.
Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

Each commit is a coherent idea.
Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

Visual appearance of the changes.
Responsiveness and internationalization.
Strings and tooltips.
End-to-end functionality of buttons, interactions and flows.
Corner cases, error conditions, and easily imagined bugs.

zulipbot · 2023-04-06T08:53:19Z

Hello @zulip/server-search members, this pull request was labeled with the "area: search" label, so you may want to check it out!

lakshaykananiya · 2023-04-16T13:30:18Z

Updated version:

alya · 2023-04-20T16:53:25Z

Thanks! A few thoughts:

Can we add a title and some explanatory text to the top of the widget? Something like:

Jump to date

Click on any date to scroll your view.

Can we disable future dates?
Let's make the tooltip 2 lines:

[i.e., current tooltip]
Jump to any date

alya · 2023-04-20T16:57:27Z

I think we'll also want to fiddle with the visuals for the "Scroll to top" button. I would try:

Putting "or" and the button on separate lines, and centering both.
If possible, making it look the same as other action buttons (e.g., "Send" or "Confirm" in modals).
Changing the text to: "Jump to oldest message". We can play with it more, but we should try to keep the terminology consistent throughout.

lakshaykananiya · 2023-04-21T18:55:50Z

Addressing your first feedback,

Yes, it is possible to add a heading to the top but I think that it will be a distraction more than help since the user is most probably going to know already what the dialog does and even if he doesn't, it will be easy to guess. Plus, there will be a tippy. I think it would be better to keep the dialog clean.
Yes, we can. Done.
Done.

lakshaykananiya · 2023-04-21T19:13:39Z

As for your second feedback,

Does this look good? I prefer the previous one more though.

2. Done. 3. Actually, we use `Scroll to bottom` in the bottom arrow that appears when we scroll. So, maybe `Scroll to top` is right?

lakshaykananiya · 2023-04-21T19:16:56Z

@alya I've addressed your feedback.

alya · 2023-04-21T19:52:04Z

If possible, making it look the same as other action buttons (e.g., "Send" or "Confirm" in modals).

Hmm, did you change the shape? The color is certainly not the same in your latest screenshot.

alya · 2023-04-21T19:52:29Z

Yes, it is possible to add a heading to the top but I think that it will be a distraction more than help since the user is most probably going to know already what the dialog does and even if he doesn't, it will be easy to guess. Plus, there will be a tippy. I think it would be better to keep the dialog clean.

You can post in #design for more feedback.

alya · 2023-04-21T19:52:51Z

Actually, we use Scroll to bottom in the bottom arrow that appears when we scroll. So, maybe Scroll to top is right?

This is also a fine #design topic.

lakshaykananiya · 2023-04-21T20:02:31Z

Hmm, did you change the shape? The color is certainly not the same as in your latest screenshot.

I changed the color after that screenshot. Sorry for the confusion.

Here's the latest screenshot,

alya · 2023-04-21T20:11:26Z

OK, cool, you can post that vs. the centered button for general feedback as well.

lakshaykananiya · 2023-04-24T06:11:16Z

Addressed feedback and updated the PR description with latest screenshots!

We currently do not have support for jumping to messages sent on a specific date for a particular stream or topic. The approach here is to add a `flatpickr` popup when we click on the `recipient_row_date` which will make the view jump to the messages sent on the selected date when confirmed. Used `date.sent` column of `zerver_message` table to compare the date to the selected date which comes in through `anchor_date` parameter that is added to `/json/messages` endpoint. Also, added frontend and backend test along with modifying the existing ones. Continues the work of zulip#24357. Fixes zulip#23995. Co-authored-by: Lakshay Mittal <lakshaymittal225@gmail.com> Co-authored-by: baris <e253436@metu.edu.tr>

We might want to scroll to the top of a topic or stream or all messages but we do not have any option but to scroll right now. Added a button in the `flatpickr` that pops up when we click on the date in `recipient_row_date`. A dependency is added for this: `shortcut-buttons-flatpickr`. The appoach is to add the plugin this dependency contains in the `flatpickr` and then whenever `onClick` is called, the required behavior will take place as we're passing the beginning of the time "1970-01-01" as date through `null`.

The current version only shows the complete date in tippy. Updated version will show a `(Click to jump dates)` along with that full date to inform users about this feature.

Disable all future dates for flatpickr to jump to messages of a particular date.

The top corners were poking out of the dialog in dark theme because of an explicit background color (for dark theme only). Added a "border-radius" for the concerned element.

zulipbot · 2023-05-09T20:21:09Z

Heads up @lakshaykananiya, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.

akshatdalton

Please address the feedback. @lakshaykananiya

akshatdalton · 2023-05-12T06:10:03Z

zerver/lib/narrow.py

+    query: Union[SelectBase, Tuple[SelectBase, SelectBase]]
    query, inner_msg_id_col = get_base_query_for_search(
        user_profile=user_profile,
        need_message=need_message,
        need_user_message=need_user_message,
+        anchor_date=anchor_date,


Why do you need to change the base query? Just add another mapping for operator and it's method in by_method_map (check NarrowBuilder). And then you can send a query with a new operator type: near-date.

zulipbot added size: XL area: message feed (UI) Buttons/UI directly in the message feed (not popovers, etc.) area: search difficult Issues which we expect to be quite difficult priority: high UX UX improvements to an existing workflow. labels Apr 6, 2023

lakshaykananiya force-pushed the jump-to-date branch 4 times, most recently from 8167b88 to 814529e Compare April 7, 2023 07:24

zulipbot added the has conflicts label Apr 10, 2023

lakshaykananiya force-pushed the jump-to-date branch from 814529e to 63a7e24 Compare April 12, 2023 19:42

zulipbot removed the has conflicts label Apr 12, 2023

lakshaykananiya force-pushed the jump-to-date branch 3 times, most recently from 8672e16 to 3c07812 Compare April 15, 2023 16:04

lakshaykananiya marked this pull request as ready for review April 16, 2023 13:30

lakshaykananiya force-pushed the jump-to-date branch from e793598 to a899443 Compare April 17, 2023 20:15

zulipbot added the has conflicts label Apr 19, 2023

lakshaykananiya force-pushed the jump-to-date branch from a899443 to 6ba65a9 Compare April 20, 2023 16:31

zulipbot removed the has conflicts label Apr 20, 2023

lakshaykananiya force-pushed the jump-to-date branch from 6ba65a9 to 362dca7 Compare April 20, 2023 16:35

timabbott mentioned this pull request Apr 25, 2023

Add date pick option for narrow #24357

Closed

zulipbot added the has conflicts label Apr 26, 2023

lakshaykananiya force-pushed the jump-to-date branch from 7d447d5 to 973c8c7 Compare May 7, 2023 11:15

zulipbot removed the has conflicts label May 7, 2023

baris and others added 8 commits May 8, 2023 12:04

search: Update tippy of recipient_row_date for date selection.

2cecabe

The current version only shows the complete date in tippy. Updated version will show a `(Click to jump dates)` along with that full date to inform users about this feature.

search: Fix jump to date flatpickr allowing future dates.

7a75018

Disable all future dates for flatpickr to jump to messages of a particular date.

search: Update receipient_row_date tippy to better represent function.

eedeab3

style: Add animated-purple-button class to button in flatpickr.

77470af

style: Align Scroll to top button to center of flatpickr.

060875d

style: Fix flatpickr dialog's top corners poking out.

9e726ea

The top corners were poking out of the dialog in dark theme because of an explicit background color (for dark theme only). Added a "border-radius" for the concerned element.

lakshaykananiya force-pushed the jump-to-date branch from 973c8c7 to 9e726ea Compare May 8, 2023 06:34

zulipbot added the has conflicts label May 9, 2023

akshatdalton reviewed May 12, 2023

View reviewed changes

timabbott force-pushed the main branch 2 times, most recently from 4ec3636 to 88b200c Compare August 18, 2023 23:51

timabbott added the completion candidate PRs with reviews that may unblock merging label Sep 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

search: Add jump to date feature. #25014

search: Add jump to date feature. #25014

lakshaykananiya commented Apr 6, 2023 •

edited

zulipbot commented Apr 6, 2023

lakshaykananiya commented Apr 16, 2023 •

edited

alya commented Apr 20, 2023

alya commented Apr 20, 2023

lakshaykananiya commented Apr 21, 2023

lakshaykananiya commented Apr 21, 2023

lakshaykananiya commented Apr 21, 2023

alya commented Apr 21, 2023

alya commented Apr 21, 2023

alya commented Apr 21, 2023

lakshaykananiya commented Apr 21, 2023 •

edited

alya commented Apr 21, 2023

lakshaykananiya commented Apr 24, 2023

zulipbot commented May 9, 2023

akshatdalton left a comment

akshatdalton May 12, 2023

search: Add jump to date feature. #25014

Are you sure you want to change the base?

search: Add jump to date feature. #25014

Conversation

lakshaykananiya commented Apr 6, 2023 • edited

zulipbot commented Apr 6, 2023

lakshaykananiya commented Apr 16, 2023 • edited

alya commented Apr 20, 2023

Jump to date

alya commented Apr 20, 2023

lakshaykananiya commented Apr 21, 2023

lakshaykananiya commented Apr 21, 2023

lakshaykananiya commented Apr 21, 2023

alya commented Apr 21, 2023

alya commented Apr 21, 2023

alya commented Apr 21, 2023

lakshaykananiya commented Apr 21, 2023 • edited

alya commented Apr 21, 2023

lakshaykananiya commented Apr 24, 2023

zulipbot commented May 9, 2023

akshatdalton left a comment

Choose a reason for hiding this comment

akshatdalton May 12, 2023

Choose a reason for hiding this comment

lakshaykananiya commented Apr 6, 2023 •

edited

lakshaykananiya commented Apr 16, 2023 •

edited

lakshaykananiya commented Apr 21, 2023 •

edited