[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Page MenuHomePhabricator

[M] Add table of contents to special:search page quickview panel
Closed, ResolvedPublic

Description

As a reader, I want to understand when a relevant section is within a search result article, and have the ability to go directly to that section, so that I don’t overlook a relevant search result or have to move through irrelevant sections of a long article after clicking through.

Providing a table of contents for an article in the results list helps readers verify that the relevant content they are looking for is within a large article, and allows them to go directly to that section. This is part of the quickview panel epic https://phabricator.wikimedia.org/T306341

Note: this does not include determining the relevance of sections.

Proposed Design
Desktop

sections in quick view.png (1×1 px, 146 KB)

Link to design in Figma
Desktop

Acceptance criteria (Applicable to mobile and tablet)

  • Show the header "Sections in the article" above the sections.
  • Show all section levels starting from top i.e. include sub sections.
  • Show as many sections as can be fit in three rows. (We can revisit this once we see how it works with actual data and increase the rows if needed)
  • If the section name does not fit in a single row then crop the title with ellipsis at the end.
  • If the section name is too long to fit in a row (with other section) have a line break and show that section in the second row.
  • Clicking/tapping on section name will navigate users to that section of the article in the same tab.
  • The quick view panel (if it was previously open before navigating to an article) should stay open when user return to search results using browser back button. (This applies to all links and not just sections)
  • Show "+ n sections" indicating the number of sections that are not shown in the quick view.
  • If there is only 1 more section to show then show that section on the fourth row
  • Clicking/Tapping on the "+ n sections" will navigate to the first of the remaining number of sections in the article.
  • Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this mock.
  • Where no sections are available, do not display feature
  • Information are retrieved using cirrusdoc

Technical notes

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
AUgolnikova-WMF renamed this task from [EPIC] Readers see table of contents on the special:search page to Readers see a table of contents on the special:search page in the quickview panel.Apr 25 2022, 4:59 PM
AUgolnikova-WMF removed a project: Epic.

Technical note: Retrieve sections for a given page via sections property:

https://en.wikipedia.org/w/api.php?action=parse&format=json&page=Pet&prop=sections

Example API response
{"parse":{"title":"Pet","pageid":25079,"sections":[{"toclevel":1,"level":"2","line":"Pet popularity","number":"1","index":"1","fromtitle":"Pet","byteoffset":4074,"anchor":"Pet_popularity"},{"toclevel":2,"level":"3","line":"China","number":"1.1","index":"2","fromtitle":"Pet","byteoffset":4093,"anchor":"China"},{"toclevel":2,"level":"3","line":"Italy","number":"1.2","index":"3","fromtitle":"Pet","byteoffset":4952,"anchor":"Italy"},{"toclevel":2,"level":"3","line":"United Kingdom","number":"1.3","index":"4","fromtitle":"Pet","byteoffset":5800,"anchor":"United_Kingdom"},{"toclevel":2,"level":"3","line":"United States","number":"1.4","index":"5","fromtitle":"Pet","byteoffset":6551,"anchor":"United_States"},{"toclevel":1,"level":"2","line":"Effects on pets' health","number":"2","index":"6","fromtitle":"Pet","byteoffset":10160,"anchor":"Effects_on_pets'_health"},{"toclevel":1,"level":"2","line":"Effects of pets on their caregiver's health","number":"3","index":"7","fromtitle":"Pet","byteoffset":13081,"anchor":"Effects_of_pets_on_their_caregiver's_health"},{"toclevel":2,"level":"3","line":"Health benefits","number":"3.1","index":"8","fromtitle":"Pet","byteoffset":13339,"anchor":"Health_benefits"},{"toclevel":3,"level":"4","line":"Observed correlations","number":"3.1.1","index":"9","fromtitle":"Pet","byteoffset":14973,"anchor":"Observed_correlations"},{"toclevel":2,"level":"3","line":"Pets in long-term care institutions","number":"3.2","index":"10","fromtitle":"Pet","byteoffset":21589,"anchor":"Pets_in_long-term_care_institutions"},{"toclevel":2,"level":"3","line":"Connection with community","number":"3.3","index":"11","fromtitle":"Pet","byteoffset":23703,"anchor":"Connection_with_community"},{"toclevel":2,"level":"3","line":"Health risks","number":"3.4","index":"12","fromtitle":"Pet","byteoffset":25013,"anchor":"Health_risks"},{"toclevel":1,"level":"2","line":"Legislation","number":"4","index":"13","fromtitle":"Pet","byteoffset":26019,"anchor":"Legislation"},{"toclevel":2,"level":"3","line":"Treaties","number":"4.1","index":"14","fromtitle":"Pet","byteoffset":26037,"anchor":"Treaties"},{"toclevel":2,"level":"3","line":"National and local laws","number":"4.2","index":"15","fromtitle":"Pet","byteoffset":26786,"anchor":"National_and_local_laws"},{"toclevel":3,"level":"4","line":"Ownership or guardianship","number":"4.2.1","index":"16","fromtitle":"Pet","byteoffset":27690,"anchor":"Ownership_or_guardianship"},{"toclevel":3,"level":"4","line":"Limitations on species","number":"4.2.2","index":"17","fromtitle":"Pet","byteoffset":30758,"anchor":"Limitations_on_species"},{"toclevel":3,"level":"4","line":"Killing and eating pets","number":"4.2.3","index":"18","fromtitle":"Pet","byteoffset":33592,"anchor":"Killing_and_eating_pets"},{"toclevel":1,"level":"2","line":"Environmental impact","number":"5","index":"19","fromtitle":"Pet","byteoffset":34794,"anchor":"Environmental_impact"},{"toclevel":1,"level":"2","line":"Types","number":"6","index":"20","fromtitle":"Pet","byteoffset":36089,"anchor":"Types"},{"toclevel":2,"level":"3","line":"Domesticated","number":"6.1","index":"21","fromtitle":"Pet","byteoffset":36838,"anchor":"Domesticated"},{"toclevel":3,"level":"4","line":"Mammals","number":"6.1.1","index":"22","fromtitle":"Pet","byteoffset":37513,"anchor":"Mammals"},{"toclevel":3,"level":"4","line":"Birds","number":"6.1.2","index":"23","fromtitle":"Pet","byteoffset":38355,"anchor":"Birds"},{"toclevel":3,"level":"4","line":"Fish","number":"6.1.3","index":"24","fromtitle":"Pet","byteoffset":38765,"anchor":"Fish"},{"toclevel":3,"level":"4","line":"Arthropods","number":"6.1.4","index":"25","fromtitle":"Pet","byteoffset":38963,"anchor":"Arthropods"},{"toclevel":3,"level":"4","line":"Reptiles, Salamanders","number":"6.1.5","index":"26","fromtitle":"Pet","byteoffset":39107,"anchor":"Reptiles,_Salamanders"},{"toclevel":3,"level":"4","line":"Digital","number":"6.1.6","index":"27","fromtitle":"Pet","byteoffset":39154,"anchor":"Digital"},{"toclevel":2,"level":"3","line":"Wild animals","number":"6.2","index":"28","fromtitle":"Pet","byteoffset":39190,"anchor":"Wild_animals"},{"toclevel":1,"level":"2","line":"History","number":"7","index":"29","fromtitle":"Pet","byteoffset":40449,"anchor":"History"},{"toclevel":2,"level":"3","line":"Prehistory","number":"7.1","index":"30","fromtitle":"Pet","byteoffset":40463,"anchor":"Prehistory"},{"toclevel":2,"level":"3","line":"Ancient history","number":"7.2","index":"31","fromtitle":"Pet","byteoffset":41128,"anchor":"Ancient_history"},{"toclevel":2,"level":"3","line":"Victorian era: the rise of modern pet keeping","number":"7.3","index":"32","fromtitle":"Pet","byteoffset":42536,"anchor":"Victorian_era:_the_rise_of_modern_pet_keeping"},{"toclevel":3,"level":"4","line":"Economy","number":"7.3.1","index":"33","fromtitle":"Pet","byteoffset":43230,"anchor":"Economy"},{"toclevel":3,"level":"4","line":"Social","number":"7.3.2","index":"34","fromtitle":"Pet","byteoffset":45062,"anchor":"Social"},{"toclevel":3,"level":"4","line":"Entertainment","number":"7.3.3","index":"35","fromtitle":"Pet","byteoffset":46350,"anchor":"Entertainment"},{"toclevel":1,"level":"2","line":"Pet ownership by non-humans","number":"8","index":"36","fromtitle":"Pet","byteoffset":48016,"anchor":"Pet_ownership_by_non-humans"},{"toclevel":1,"level":"2","line":"Pets in art","number":"9","index":"37","fromtitle":"Pet","byteoffset":52259,"anchor":"Pets_in_art"},{"toclevel":1,"level":"2","line":"See also","number":"10","index":"38","fromtitle":"Pet","byteoffset":53870,"anchor":"See_also"},{"toclevel":1,"level":"2","line":"References","number":"11","index":"39","fromtitle":"Pet","byteoffset":54737,"anchor":"References"},{"toclevel":1,"level":"2","line":"Further reading","number":"12","index":"40","fromtitle":"Pet","byteoffset":54765,"anchor":"Further_reading"},{"toclevel":1,"level":"2","line":"External links","number":"13","index":"41","fromtitle":"Pet","byteoffset":54948,"anchor":"External_links"}]}}

We will want to think about how we might handle possible edge cases such as pages with excessively large numbers of headers at various levels.

Seddon updated the task description. (Show Details)
Seddon updated the task description. (Show Details)
Seddon renamed this task from Readers see a table of contents on the special:search page in the quickview panel to Add table of contents to special:search page quickview panel.Apr 27 2022, 11:44 PM

Noting that development can begin, but nothing should be merged until we've had the chance to get feedback from the communities (in progress).

CBogen renamed this task from Add table of contents to special:search page quickview panel to [M] Add table of contents to special:search page quickview panel.Jun 1 2022, 4:29 PM

Blocked by T307053

Sneha updated the task description. (Show Details)

Note that we are keeping this in Milestone 2 for now, but there might be some unexpected complexity. If this turns out to be more difficult or time consuming than anticipated, we should move this to Milestone 4. If we do move this to Milestone 4, we should replace it in Milestone 2 with T307085 to ensure there's enough value in MVP.

@Sneha would you be able to provide more information regarding this point please:

"Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this mock."

@Sneha would you be able to provide more information regarding this point please:

"Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this mock."

@Sneha is on vacation, so in the meantime I'd move forward ignoring that AC. I think it was based on an old design that is no longer valid. When she's back she can confirm if that's the case.

Change 830787 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/SearchVue@master] Add table of contents to special:search page quickview panel

https://gerrit.wikimedia.org/r/830787

@SimoneThisDot Yes to what @CBogen said. That AC was based on old design when we were going to show the section name if the snippet was from a particular section and not the intro paragraph. But since we are not doing that we can ignore it.

@SimoneThisDot I've had to add another AC, apologies.

When there are no sections in the article, we should not display this particular component.

@SimoneThisDot Some other notes:

  • one byproduct of switching to an article with sections to one without is that the sections don't update. Might be worth having some general graceful error handling so that if we get bad or malformed responses we also suppress the component
  • I'm wondering if there is a better way to handle when changing between sections when we are waiting for the api responses? It needs be we can create a separate task for that

Hei Seddon, I have already contacted Sneha and I am hoping to have a session with her on her return to discuss how best to work on Loading and transition.

There are lots of parts loading and changing state and your comment is just one of the few possible issues that this component is encountering. My plan is to create a new ticket that really goes into detail to how to load the different sections and what to do while transitioning between articles.

I am going to work on ensuring the component updates between articles.

Need to change the way we fetch sections after discussion on cirrusdot props

To simplify the flow of the ticket we are going to merge the initial patch above that is going to take care of most of the Ac and then work on the following one:

  • Ensure the API request is completed using Cirrusdoc

Change 830787 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Add table of contents to special:search page quickview panel

https://gerrit.wikimedia.org/r/830787

@Seddon can you note what this is blocked on? thanks!

I guess it was blocked due to "searchVue" not being deployed yet (as all the other SearchVue related tickets.

I am going to move this into doing, as we have decided (last week during Wednesday meeting) to change the way we fetch sections using CirrusDoc. This will remove an API call and will make the app more performant.

Change 837663 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/SearchVue@master] Retrieve Sections uisng "action" api

https://gerrit.wikimedia.org/r/837663

Change 837663 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Retrieve Sections uisng "action" api

https://gerrit.wikimedia.org/r/837663

Blocked pending deployment to beta cluster for testing

Etonkovidova subscribed.

Checked on enwiki betalabs - all AC are in place (the AC status is updated in the task).

Below screenshots are for illustration/reference - no issues were found:

Show as many sections as can be fit in three rows.

Screen Shot 2022-10-23 at 2.09.52 PM.png (1×1 px, 174 KB)

If the section name does not fit in a single row then crop the title with ellipsis at the end.

If the section name is too long to fit in a row (with other section) have a line break and show that section in the second row.

If there is only 1 more section to show then show that section on the fourth row

Screen Shot 2022-10-23 at 2.08.13 PM.png (1×2 px, 1 MB)

Where no sections are available, do not display feature

Screen Shot 2023-01-05 at 4.10.46 PM.png (1×876 px, 629 KB)

Checked after deployment (wmf.17) to ruwiki, ptwiki, and idwiki - all works/looks according to the specs.

Some examples:

many section titlesno section titleslong section title with ellipsis
Screen Shot 2023-01-05 at 4.16.24 PM.png (1×796 px, 244 KB)
Screen Shot 2023-01-05 at 4.16.02 PM.png (1×778 px, 865 KB)
Screen Shot 2023-01-05 at 4.12.22 PM.png (1×2 px, 559 KB)