Page MenuHomePhabricator

Adding row categories/tags to tables that enable filtering displayed rows
Open, Needs TriagePublicFeature

Description

The problem:

Many tables have content in columns that could be used a categories or tags. But the table-content can not be filtered by these categories or tags as it's only possible to sort columns (also that only works for the first tag). Furthermore, a lot of potential useful content is missing or not as well rehashed/structured as it could be.

Why it is a significant problem:

  • I found this to be a needed change as it would be very useful for the Events list of https://en.wikipedia.org/wiki/2020_in_science which I suggested to be converted to table on the page's talk page. This would also allow many more features and could make the article shorter for the reader and more useful. In particular what I suggested as tags/categories for rows of the table are: (scientific) "Research field", (recurrent) "Topic", "Category" and "Endeavor-type" (like "simulation" or "projection"). An exemplary table can be found here. Three exemplary use-cases of such filtering would be: only showing "Category-1" and "Category-2" items with topic "Mitochondria", or all items of the Research-field of "Ecology" or only showing "Category-1" and "Category-2" items by default with a e.g. a [show more] button below the table.
    • This is one of a series of tasks that would allow (/ improve) converting this list to a table - other issues of this series are linked under "Further issues" below. Such tags/categories would make the list/table much more useful and they could also be used in similar timeline articles/sections as well as for entirely different articles.
  • Another exemplary table where this would be useful is "Comparison of display technology" : there "Computer monitor", "TV", etc could be tags. As explained above they can be neither filtered nor sorted by as there are multiple tags instead of only one per row. One exemplary use-case would be filtering by "Mobile phone" under "Typical use". These tags could make a lot of tables a lot more useful, allow for more extensive content and enable new useful content.

Suggested solution:

Changing the internals of tables so that each row has a unique ID that has a number of categories/tags for its columns. Then make it possible to allow filtering by tags and categories by making them clickable buttons. Then also allow the editors of a table to specify (add) common/suggested and maybe also default filters for the table. These filters could be applied by clicking on some suggested filter-template above the table. Please also see the exemplary table and the 4 exemplary use-cases above. The row-categories would enable buttons for simple hiding/showing items of specific categories.

The watchlist already has filtering as well as a form of tags so this issue would only require adapting / changing these a bit for tables.

Additional suggestions/requests beyond the basic solution:

There are probably many things this would help enable such as transcluding content of tables that have specific tags set.

Further issues:

T258417: Add "add table entry" and "edit row" for the wikitext editors as well as "edit with VisualEditor" functions to tables for simplyifing editing tables
T258382: Fix the display of tables on mobile (responsive web design: when the user taps on a table rotate the screen for a fullscreen view)
T233340: Add sortability to sortable tables for readers of the mobile web site
T181452: Add sortability to tables with "sortable" class in the apps

Event Timeline

Hi @Prototyperspective, thanks for taking the time to report this! What are clear steps to reproduce the situation? Which code base is this about? Please see and follow https://www.mediawiki.org/wiki/How_to_report_a_bug - thanks!

Hi @Prototyperspective, thanks for taking the time to report this! What are clear steps to reproduce the situation? Which code base is this about? Please see and follow https://www.mediawiki.org/wiki/How_to_report_a_bug - thanks!

It is about the codebase of tables. This also applies to the other issues. I didn't find an appropriate tag or component to tag the issue with - I would have created a tag like "Tables" if it was possible. There are no steps to reproduce because it is a task/issue other than bug or at least the steps to reproduce are: try to filter table-rows via tags in a tag-column.

try to filter table-rows via tags in a tag-column.

@Prototyperspective: What would be a "category" or "tag" example on e.g. https://en.wikipedia.org/wiki/2020_in_science ?

try to filter table-rows via tags in a tag-column.

@Prototyperspective: What would be a "category" or "tag" example on e.g. https://en.wikipedia.org/wiki/2020_in_science ?

Please see:

In particular what I suggested as tags/categories for rows of the table are: (scientific) "Research field", (recurrent) "Topic", "Category" and "Endeavor-type" (like "simulation" or "projection"). An exemplary table can be found here. Three exemplary use-cases of such filtering would only showing "Category-1" and "Category-2" items with topic "Mitochondria", or all items of the Research-field of "Ecology" or only showing "Category-1" and "Category-2" items by default with a e.g. a [show more] button below the table.

and

Please also see the exemplary table and the 4 exemplary use-cases above.

More examples are listed on the talk page. Imo the best example for illustrating the use-cases here is "Research field"/"Scientific field" such as "Quantum information science", "Biotechnology" or "Ecology".

To me this sounds like you could add an additional column with that "category", and then you are able to sort the table rows by that column value.
I don't think that anyone will soon define and create an on-the-fly filtering on arbitrary values system for tables...

To me this sounds like you could add an additional column with that "category", and then you are able to sort the table rows by that column value.

It's probably good to have the most illustrative content in discussion format here so thanks for asking these questions but I already considered this option, please see:

But the table-content can not be filtered by these categories or tags as it's only possible to sort columns (also that only works for the first tag).

Or, in other words: this only works if you have only one category/tag. In the suggested 2020_in_science table this actually would apply for one column so it could indeed be used for this category. But it could not be used for other categories/tags. (And it could also not be used on mobile as table-sorting isn't possible there - see further issues.)
In addition it would not be possible to filter by tags/category. The one category for which sorting would work would be useful mostly by being used as a filter to e.g. collapse all "Category-3" items by default (or hide them with a click) so that the section is shorter and clearer. Over time there could be more features that makes the page as well as other pages more useful using this.

I don't think that anyone will soon define and create an on-the-fly filtering on arbitrary values system for tables...

Why so? This isn't really anything fancy - it's simply tags applied to tables.
It would probably be relatively simple to implement for many modern website-technologies with modern Javascript.
What do you mean by "arbitrary values system" for tables - it's tags and categories.
There can be multiple categories/tags for every column and there could be many configurable and suggested filter-presets.

Please also see the other (fourth) exemplary use-case (with "Comparison of display technology").

Aklapper changed the subtype of this task from "Task" to "Feature Request".Jul 20 2020, 9:21 PM

There can be multiple categories/tags for every column and there could be many configurable and suggested filter-presets.

This. A sane frontend UI for that (plus not sure what's needed when it comes to backend storage).

It would probably be relatively simple to implement for many modern website-technologies with modern Javascript.

https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker :)

There can be multiple categories/tags for every column and there could be many configurable and suggested filter-presets.

This. A sane frontend UI for that (plus not sure what's needed when it comes to backend storage).

Good point. I should have clarified that further. There are probably many possible designs and it's not as straight-forward as such tags themselves and their filtering and sorting-functionalities (as well as maybe highlighting or styling rows based on a category which I didn't suggested above).

I would suggest buttons displayed above the table for the preconfigured/suggested filters or a dropdown-menu for them (maybe depending on the number of filters; maybe this could be built in many ways using Wikipedia templates). Maybe the filter-presets could not be shown directly but only when clicking some sort of "show suggested filters"-buttons. It probably needs somes sketches to illustrate what I mean so maybe I'll add some images at some point.

It would probably be relatively simple to implement for many modern website-technologies with modern Javascript.

https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker :)

I'm very interested in looking into coding it and some other tasks but it could take a long while until I find time and also I'm not sure how much modern Javascript is used and I would imagine it being a bit harder to implement with PHP websites. Thanks.

While this would be most useful for tables, it could also be useful for lists (bullet-points). It would display the tag with some specified color and be interactive so that you can for example hide all list-items with one tag or only show list-items with specified tags. The filter-functionality interface could display when one clicks on one tag.

Don't think it would make sense to make a new feature request for that, it only broadens the scope of this issue a bit: tags would also be usable inline and be able to filter by bullet points (maaybe even paragraphs).

It could be used for example by using a syntax / template like this: {{tag|green|the list item category}} where "the list item category" is displayed with some background color and on a click would open a menu to filter list items accordingly (and in the visual editor autocomplete to tags already used on the page).

In general many lists would be more interactive as tables as one could then sort and have separate columns, however there are layout problems (mainly visual style) and even if not many lists are unlikely to get converted to tables because of the initial effort required. These are further reasons why this would be useful.

An example somewhat relevant here are the colored field tags here which filter posts for the tag. Just as an illustration, the tags could be useful for all sorts of things I haven't thought about such as lists similar to the Comparison of display technology table.

Surely, there are many more important issues, but maybe this becomes relevant in the future once these have been solved, or there will be more devs working on MediaWiki at some point, or there are more articles that this would be very useful to than I'm currently aware of, or it may be relevant to the design of other functionalities / other issues such as requests for enabling the use of the interactive Watchlist filter for various things in article-space.