Description
The structured data team is making some UI/UX improvements to the Special:Search page on the Wikipedias. As part of those improvements, we are adding a new vue.js app as part of the SearchVue extension in order to create a "QuickView" panel that displays more information about the search results. Here is the MediaWiki page describing the project. T306341 is the Epic describing the feature and the user experience we are aiming for.
To achieve the experience we are after and to align ourselves with the work of the design systems and WMDE teams, we are creating the new result QuickView using vue.js.
Vue.js was selected as the new javascript framework for use with MediaWiki ( T241180 ) and is now served as part of core. MediaSearch was the first production extension to leverage vue.js and has now been followed by machinevision, globalwatchlist, and the nearby pages extension.
This extension will add some JS code & JS config vars to Special:Search. JS will pick up clicks on (NS_MAIN) results and open a side panel with additional information about the result (much like Quick View on Special:MediaSearch)
For the first few months of the extension being release, we are also going to show a tutorial to the users to make sure that they know how the new feature work.
Preview environment
The changes will be made on Special:Search on the Wikipedias, starting with RU, PT, and ID wikis, and a link to the feature on beta cluster will be made available when ready.
Which code to review
(Provide links to all proposed changes and/or repositories. It should also describe changes which have not yet been merged or deployed but are planned prior to deployment. E.g. production Puppet, wmf config, or in-flight features expected to complete prior to launch date, etc.).
The code doesn't exist yet, but here is the ticket where we will be investigating the specifics of adding vue.js for Special:Search: T307560
Here is the ticket where we will actually be adding the app: T307053
Here is the epic for all of the UI/UX changes related to this feature: T306341
Performance assessment
Please initiate the performance assessment by answering the below:
- What work has been done to ensure the best possible performance of the feature?
- As mentioned above, vue.js was selected as the new javascript framework for use with MediaWiki ( T241180 ) and is now served as part of core. Several extensions already use vue.js with good performance results. We will also make sure that there is a fallback version of the experience that does not rely on javascript.
- What are likely to be the weak areas (e.g. bottlenecks) of the code in terms of performance?
- API calls to fetch the additional information to display in the side panel (once a search result has been clicked). This includes:
- Article description (via action api, prop=pageprops -> wikibase-shortdesc)
- Associated Wikidata ID (via action api, prop=pageprops -> wikibase_item)
- Article thumbnail with max width of 420px (via action api, prop=pageimages -> thumbnail -> source)
- Larger search snippet (via action api, prop=cirrusdoc)
- TOC/list of sections (via action api, prop=cirrusdoc -> headings)
- Links to interwiki results based on same related Wikidata ID (source TBD)
- Commons request to fetch images (via Commons' action api, generator=search&gsrsearch= filetype:bitmap|drawing%20custommatch:depicts_or_linked_from=QXXX&gsrnamespace=6&prop=imaginfo&...)
- API calls to fetch the additional information to display in the side panel (once a search result has been clicked). This includes:
- Are there potential optimisations that haven't been performed yet?
- /
- Please list which performance measurements are in place for the feature and/or what you've measured ad-hoc so far. If you are unsure what to measure, ask the Performance Team for advice: performance-team@wikimedia.org.
- We're talking to Search team WRT additional load on their end (additional calls for Commons results + fetching indexed content for larger snippets) and will adjust as needed based on their input.
- No other measurements at this point - any advice is most welcome!
Additional details on API call parameters
Action: Query request to include the following parameters:
action: 'query', format: 'json', titles: title, prop: 'pageimages|pageprops|cirrusdoc', formatversion: 2, pithumbsize: 420, piprop: 'thumbnail|name|original' cdincludes: 'heading'
Commons API:
action: 'query', format: 'json', generator: 'search', gsrsearch: 'filetype:bitmap|drawing custommatch:depicts_or_linked_from=QXXX', gsrnamespace: 6, gsrlimit: 6, prop: 'imageinfo', iiprop: 'url', iiurlheight: 364
Interwiki: TBC (in the future; not part of initial release)
Data interaction diagram