Page MenuHomePhabricator

[Spike] Explore using Vue.js for UI of new Media Search feature
Closed, ResolvedPublicSpike


Per T248405 we are close to releasing our first feature written using Vue.js, a port of the MachineVision extension.

@AnneT and I both feel that there are a lot of advantages to working this way, including:

  • Faster development
  • Easier to write tests for UI components
  • Cleaner and more readable code (esp. when using Vuex, which allows you to separate UI state and business logic from presentational components); this should make it easier to re-design interface elements where necessary, something that seems relevant as we prototype new features without being 100% sure of where we'll end up

Now that the MachineVision port has been launched, it seems like a good time to return to this project.

Component List

In order to replicate the capabilities that currently exist on Special:MediaSearch, it seems like we would need the following set of components:

  • Search Input
  • Basic "search" Button
  • "X" button to clear
  • Loading Indicator
  • Tabs/IndexLayout
  • A "Results Grid" that could accommodate different styles (image grid, list for audio/video/categories); each tab would have a different instance of this component
  • One or more "Results Item" components (image, video, audio, category, etc)


In addition to the components, we'd need to implement the following features:

  • Parse URL params on page load and watch them for changes
  • Replace server-generated search UI with client-rendered one (server-side stuff will probably stay in OOUI PHP for now)
  • Each tab needs to be able to hang on to its own results as the user moves between. This probably means each ResultsGrid can make its own API requests
  • Clear all results in all tabs when the user clicks the "X" button
  • Load more results on scroll and when the user returns to a tab that has more results to display. Eventually we probably want to paginate some how like how Google does
  • Ensure things continue to work at a basic level with JS disabled (we have this now, so just ensure we don't break it)

Vuex is used to store results, but local state will be used in places where additional data needs to be requested from the API for an individual file (in the upcoming Quickview feature).

Design QA (taken from

  • We need to make sure we have a hover state that indicates that the search result unit, card, etc. is clickable.
  • Can we somehow remove File: and Category: from the names and categories we are showing?
  • In the current state, the video grid has about 5 videos per row at that viewport size, Could we try 4 (3?) to allow the filename to not wrap into so many lines so it's easier to read quickly?

Updates 7/14/20

Below are updated screenshots of the UI as it currently stands the initial Vue.js patch: The UI includes some updated designs for individual result elements, but QuickView will be left for a follow-up patch. Autocomplete and filter tools have been removed for the time being but will be re-introduced in a later patch.

Screen Shot 2020-07-14 at 2.18.00 PM.png (1×2 px, 3 MB)

Screen Shot 2020-07-14 at 2.18.07 PM.png (1×2 px, 2 MB)

Screen Shot 2020-07-14 at 2.18.04 PM.png (1×2 px, 879 KB)

Screen Shot 2020-07-14 at 2.18.09 PM.png (1×2 px, 635 KB)

Event Timeline

Update, based on conversations on June 29:

  • The vue.js version will be merged to master as soon as we're at feature parity with the current MediaSearch - with the exception of the autocomplete and the media size filter, which will be handled in new tickets. I've removed these from the acceptance criteria in the description of this task.
    • The estimate for this is approximately two more weeks.
    • This means that the version on production will temporarily not have autocomplete or a filter.
    • The new ticket for autocomplete is T256673
    • The new ticket for filters is T256160

Noting here that QuickView will be a separate patch and pulled out of this one; it should be tracked in T256158. Also noting that it's okay that there will be no way to play audio or video from within the search results until T256158 is complete.

Also noting that this can be merged independently of moving to the CirrusSearch-based MediaSearch backend (T257295 and T252685).

Change 610918 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Vue.js MediaSearch UI

@mwilliams I've attached some updated screenshots based on the current state of this patch. Hover state has been fixed as well but it's hard to convey this way. It will be a lot easier to refine the design once we get a basic version of this up on commons for you to interact with. Let me know if there's anything else that should be changed now.

This looks good to me for this ticket. We can add any subsequent changes to new ones in the future.

Change 610918 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Vue.js MediaSearch UI