The new ORES topic models have a more extensive ontology than what we originally implemented for the `morelike` version in {T238610} and {T238612}.
In the `morelike` version we have 27 topics, and we show 12 by default, with the other 15 appearing when the user clicks "show more".
The way we will use the ORES ontology (as described in {T244192}) will give us 39 topics, and we have broken them into four headers. Therefore, below are specifications on how we want to change the topic selection experience in //both// the topic overlay and the topic filter dialog. The [[ https://wikimedia.invisionapp.com/public/share/S3UV941DUWM#/screens/393723070 | relevant mockup is here ]].
* The topic pill buttons should be organized under four headers, in this order (regardless of language):
** Culture
** History and Society
** Science, Technology, and Math
** Geography
* Under each header, the relevant topic pills should be shown alphabetized, according to alphabetization of the language.
* We should implement the "select all" and "deselect all" links that are shown in the mockup. If there are no buttons selected under a header, the link should read "select all". If there are any selected, it should read "remove all". Note that this language is slightly different than what is shown in the mockup.
* These additions will require the topic overlay and the topic filter dialog to be scrollable on both desktop and mobile.
* The topic overlay and topic filter dialog mock should be the same fixed height as each other, and as the difficulty overlay. To display more content than fits, the contents should scroll within the dialog as can be seen in the **Search widget** and **Continuous outlined booklet** dialogs on the [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop | OOUI demo page ]].