Enable NavBar as selector for Navigation

[nadijagraca]

Description

@antonymilne comment: Some of the below description is out of date. The best place to look for what this PR does is the user guide on navigation.

As well as navigation, this PR adds an important new testing functionality with assert_component_equals. I will write about this separately in another PR.

---

The main idea is that the Navigation model is responsible for delivering navigation components, nav_bar and nav_panel and Page model is responsible for arranging components.

Models added:

1. NavBar model

NavBar model is responsible for building nav_bar_div. It takes items and pages as arguments. items are list of NavItem models, and pages are list of page ids or page titles.

• pages: list or dict mapping of page ids or page titles.
• items: list of NavItem models

2. NavItem model

NavItem model is responsible for building individual icons inside the nav_bar div. Click on the icon leads you to the first page defined inside NavItem.pages.

• pages: list or dict mapping of page ids or page titles.
• icon: If None provide default image (home icon from Google icons)(but only on vertical), if a user sets icon = "" they can turn off our defaults
• text: If text goes above our max_text_length, it will be truncated to length defined in max_text_length which defaults to 8. If not already provided, tooltip is automatically populated with the full text length
• tooltip: No special logic except for automatic population based on text length
• max_text_length: Defaults to 8 characters. If a user wants to exceed the max text length, they can set it here in which case the text should wrap automatically (vertical alignment). For the horizontal alignment, we might just set a different max_text_length as default or None?
• selector: exposed, but can only take Accordion model

Possible configuration options for dashboard navigation:

• Option 1
  Configuration: navigation=Navigation() -> gives -> navigation=Navigation(selector=Accordion(pages=[]) where pages is list of all registered pages in the dashboard.
  Outcome: navigation panel with accordion and 'SELECT PAGE' default accordion title

• Option 2
  Configuration: navigation=Navigation(pages=['Page_1', 'Page_2', 'Page_3']) -> gives -> navigation=Navigation(selector=Accordion(pages=['Page_1', 'Page_2', 'Page_3']) the same is true when pages is provided as a dict
  Outcome: navigation panel with accordion and 'SELECT PAGE' default accordion title if pages provided as list or custom title with pages provided as dicc

• Option 3
  Configuration: navigation=Navigation(selector=Accordion(pages=['Page_1', 'Page_2', 'Page_3']))
  Outcome: gives the same outcome as configuration 1 and 2.

• Option 4
  Configuration: navigation=Navigation(pages=['Page_1', 'Page_2', 'Page_3'], selector=Accordion())
  Outcome: gives the same outcome as configuration 1, 2 and 3.

• Option 5
  Configuration: navigation=Navigation(pages=['Page_1', 'Page_2', 'Page_3'], selector=NavBar()) -> gives -> navigation=Navigation(selector=NavBar(items=[NavItem(pages=['Page_1']), NavItem(pages=['Page_2']), NavItem(pages=['Page_3'])]))
  Outcome: NavBar with 3 icons (icon for each page in pages list), and no navigation panel.

• Option 6
  Configuration: navigation=Navigation(selector=NavBar(pages=['Page_1', 'Page_2', 'Page_3']})) -> gives -> navigation=Navigation(selector=NavBar(items=[NavItem(pages=['Page_1']), NavItem(pages=['Page_2']), NavItem(pages=['Page_3'])])
  Outcome: NavBar with 3 icons, and no navigation panel. The same outcome as configuration 5.

• Option 7
  Configuration: navigation=Navigation(pages={'title_1': ['Page_1', 'Page_2'], 'title_2': ['Page_3', 'Page_4']}, selector=NavBar()) -> gives -> navigation=Navigation(selector=NavBar(items=[NavItem(pages=['Page_1', 'Page_2']), NavItem(pages=['Page_3', 'Page_4'])]))
  Outcome: NavBar with 2 icons (icon for each key in a pages dictionary), and accordion navigation panel

• Option 8
  Configuration: navigation=Navigation(selector=NavBar(pages={'title_1': ['Page_1', 'Page_2'], 'title_2': ['Page_3', 'Page_4']})) -> gives -> navigation=Navigation(selector=NavBar(items=[NavItem(pages=['Page_1', 'Page_2']), NavItem(pages=['Page_3', 'Page_4'])]))
  Outcome: NavBar with 2 icons, and accordion navigation panel. The same outcome as configuration 7

• Option 9
  Configuration: navigation=Navigation(selector=NavBar(items=[NavItem(pages=['Page_1', 'Page_2']), NavItem(pages=['Page_3', 'Page_4'])]))
  Outcome: NavBar with 2 icons, and accordion navigation panel. The same outcome as configuration 7 and 8

Open questions:

1. Allow users to provide their own icon images.
   We could possibly do it thorough re validation or os.path.isfile().
2. Also, going forward, we need to think about where the orientation argument will be provided? (Navigation or NavBar model?

Open TO-DOS:

• Add tests for all configuration options and new models
• Add docs
• Double-check css

Screenshot

Checklist

• I have not referenced individuals, products or companies in any commits, directly or indirectly
• I have not added data or restricted code in any commits, directly or indirectly
• I have updated the docstring of any public function/class/model changed
• I have added the PR number to the change description in the changelog fragment, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) (if applicable)
• I have added tests to cover my changes (if applicable)

Types of changes

• Docs/refactoring (non-breaking change which improves codebase)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorised to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorised by the Apache 2.0 license does not violate the intellectual property rights of anyone else.

Changes all incorporate in newly written docs :)