Concept

Master as a concept is used by many apps to centrally control the sizes, behaviour and the design of their elements or building blocks. Powerpoint user master slide to control the layout of the slides and the content displayed inside the slides. Design prototype tools like Sketch, etc. also use master concept to control the color, size, styling and the overall design of their visual elements. We can use Master dashboards inside Squirro to have a centralised guiding place for storing master layouts, sizes, content, etc.

Layout Master

• We introduce a master for layout called Layout Master.

• It is the central place for controlling things like tabs alignment to the center section (via master),

• It can be used to have uniform layout for all dashboards,

• It can be used to having consistent header, footer, theme, etc.

• Layout Master dashboard has its own config. options which are different from a normal dashboard.

• If we design master dashboard to have content, ex: footer, it cannot be modified from the individual dashboards which adhere to master.

• Dashboard editor will have a button to sync to and jump to master if needed.

• Individual dashboards can choose to sync to master. Although, It is not compulsory to do so and they are not in sync by default.

• Master will be used to left align the dashboard tabs in the compact mode to the center section from the master so as to have SCB like designs, which is a very commonly desired layout.

• Every project gets a master dashboard by default, which cannot be deleted or transferred to another dashboard.

• Master dashboard will not be visible under the dashboard space.

Global Search Master

• The current master dashboard where global search layers are configured should be renamed to Global Search master.

• Global Search master dashboard is essentially a templating dashboard where by using layers, one creates visual templates for different NLP query parameters and visibility conditions.

• This dashboard is not designed to be any of the main dashboards shared with the end-user, instead it is supposed to show layers which meet a visibility condition caused by a NLP or normal query.

• By default, a project does not has a dashboard marked as Global search master but any dashboard in a project can be promoted to be so.

• Only one dashboard at a time can be a Global search master.

• Just like the Layout master, this dashboard is also not visible in the Dashboard space.

• This dashboard controls the visibility of the Global Searchbar in the appbar. If a dashboard is marked as Global search master, Global Searchbar will appear, otherwise not.

MVP Implementation stage 1 technical notes

• We introduce a master for a layout called Layout Master

• Every project will have a master dashboard, this will need a migration script

  • Dashboards will have a new attribute role

  • The dashboard for all intents and purposes is a regular dashboard as far as the backend is concerned. It will have all the objects of a regular dashboard model required to be accepted by the backend in order to be saved and edited. The key difference will be its role attribute

  • Today we have an idea of “search master” for this we introduced a new attribute master: true this attribute will be migrated away in favour of a role

    • Search Master will need a role for this migration and a new attribute role: 'search'

    • The Layout master will have the following role:'layout'

    • We will also need to change the current default new project to have this new second dashboard called Layout Master

• Layout Master dashboard has its own config. options are slightly different from current dashboards:

  • Dashboard editor can select a theme

  • Dashboard editor can enable and disable sections

  • Dashboard editor can resize sections

  • All other functionality is disabled and hidden

  • You can not view this dashboard (so we should remove the edit toggle for this view)

  • Changing these settings in master will not affect any dashboards, dashboards have to be manually synced one by one

• Normal Dashboards will have a new “Sync” icon which will be highlighted if the settings of that dashboard are the same as the master

  • Pressing this “Sync” button will copy settings down to the current dashboard

  • If you change any settings to make the current dashboard different from master the “Sync” icon will have “de-synced” state

  • When syncing a dashboard you will be warned that this is potentially a destructive process and work may be lost if you continue

  • Syncing specifics:

    • it copies the layout (so which panels are turned on or off)

    • if in master there's a panel that doesn't exist in the edited dashboard, then we would add it

    • if a normal dashboard has a panel that doesn't exist in the master dashboard, remove it and its widgets

    • If mobile editing is “un-synced” then copy the settings from master down to the dashboard will only affect the desktop version. If mobile editing is synced then the master settings will also apply to mobile

• Task Separation / Modifying Existing View

  • Modify List View - Visualise Tab

    • The list is sorted alphabetically still

    • Add a new list item "Master Layout" this comes as a new dashboard from the backend.

    • Only Edit is possible (Hide Lock Icon / Replace with a cog)

    • Hide all actions except “Edit”

  • Modify Edit Dashboard View

    • See above “Normal Dashboards“ notes for the implementation instructions

  • Modify App & Nav Bar Settings View

    • Add another option to project settings page “App & Nav Bar”

    • Under “Enable compact nav bar options” and under the label "When not enough space available..."

    • Add new option:

      • “Align to center section of the master dashboard”

    • It should be greyed out when the above enable button is disabled

    • This option will try to align the ‘Compact Nav’ with the width of the left section using the following rules:

      • Only apply to compact nav

      • Keep the minimum size of logo

      • Keep the minimum size of project name with … (This is defined today already, we have a width there)

      • Only left align when there is room and the above to criteria are met this means the width of the left section must be larger than the logo + project title + small inner padding on tab.

      • Also only align if the current left panel width is the same as master (synced) (There is no concept of SYNCED, so it’s a simple rule width == layoutWidth)

  • Hide the master dashboard from the header tabs