GSoC ‘18 Update 5: Toolbars for days
After wrapping up all Graph Explorer related tasks, I started to design a new look for the embed mode on query.wikidata.org. The embed view allows you to place Wikidata results anywhere on the Internet by providing a snippet for an iframe with the result as it’s source.
Task T151057 was assigned to me outlining the desired UI.
I added two toolbars as shown above, which expand on hover. The left side toolbar is used for switching between all the possible result views:
In the past, the embed mode had only two buttons; one for editing queries with the query helper and one for editing queries with the SPARQL Editor. I added all the components of the toolbar present on the result browser of query.wikidata.org to the embed view as well. These components include a button to provide a short url to the query, to open help, to open examples, to download the result in different formats, as well as a button to open a modal that provides the code for the query result in different languages. The right side toolbar contains these components:
I also added a layout-options toolbar to the graph view for switching between different hierarchical layouts:
Challenges I faced:
- Ensuring that the new toolbars don’t interfere with the result.
- Creating fully Responsive toolbars — for embed mode as well as for the explorer dialog.
- Implementing the functionality for all the new buttons in embed mode.