Improve layout of the filtered search visualization designer
Problem to solve
With Add support for filtering by pre-defined dimens... (&13685) we're updating the analytics visualization designer to use a filtered search component to build queries. This replaces the old query builder thus we no longer need a left sidebar in the designer. This presents us with an opportunity to rethink how this page gets presented.
Suggested solution
Reconsider the page layout now that we don't have or need a left sidebar in the query builder anymore. Some possible improvements and ideas:
- Replace the preview button group with
GlTabs
. This would help make it clear that these are different views. - Add
Query with Duo
|Query builder
|Code editor
tabs / views.- Query with Duo - Shows a text input that would do everything for you.
- Query builder - Shows the filtered search which helps guide you.
- Code editor - Shows you the raw code and allows the user to edit it.
- This would replace the current preview
code
button. With it out we potentially don't need preview tabs anymore.
- This would replace the current preview
- Alternatively replace the
Create with GitLab Duo
field with a filtered search token.- When run it would replace all other tokens with ones generated by Duo.
- Move the visualization type selector into the preview section into the
Visualization tab
view.- We could also select it a type by default.
- Alternative move the visualization type selector inline with the filtered search.
- Remove the title input and replace it with a modal that asks for the filename once a user clicks
Save
.- We could even use Duo or the gist of the query to suggest a filename.
Rough designs
Tabs preview
Tabs + Selector inside view
Tabs + Inline selector
Tabs + Inline selector + Duo as token
Tabs + Inline selector + Duo as token + Filename on save
Edited by Jiaan Louw