Shimoku docs
  • 🚀QuickStart
    • Installation & Setup
    • Minimal APP example
    • Extended Example
    • Templates & tutorials
  • 🤖Artificial Intelligence
    • Classification
      • Train Classification
        • Train Classification Outputs
      • Predict Classification
        • Predict Classification Outputs
    • Generate Insights
      • Generate Insights Outputs
  • 🛠️Building Web App
    • Environment
      • Overview
      • Environment Variables
    • Management
      • Managing Universes
      • Managing Workspaces
      • Managing Boards
    • Menu
      • Changing the Menu Path
      • Updating the Menu Path
      • Deleting the Menu Path
    • Grid
      • Using the Grid
    • Theming
      • Colors Usage
    • Actions
    • Modals
    • IO
  • 💡Elements
    • Summary
    • Charts
      • Table
        • Buttons Column
        • Filters
        • Search bars
        • Colored labels
      • HTML
        • Raw HTML
        • Beautiful Titles
        • Background Indicators
        • Click to New Tab
        • Box With Button
        • Panel
      • Indicators
        • Indicator
        • Grouped Indicators
        • Vertical Indicators
        • Color by Value
        • Gauge Indicator
        • Indicators with Header
      • Scatter Charts
        • Scatter
        • Scatter with Effect
      • Line Charts
        • Line
        • Predictive Line
        • Segmented Line
        • Marked Line
        • Line With Confidence Area
        • Top Bottom Line Charts
        • Summary Line
      • Area Charts
        • Area
        • Stacked Area
        • Segmented Area
        • Top Bottom Area Charts
      • Bar Charts
        • Bar
        • Stacked Bar
        • Horizontal Bar
        • Stacked Horizontal Bar
        • Zero Centered Bar
      • Pie Charts
        • Pie
        • Doughnut
        • Rose
      • Gauge Charts
        • Shimoku Gauge
        • Speed Gauge
      • Input forms
        • Group chained Inputs
        • List input search
        • Conditional inputs
        • Audio input
        • Drag & Drop
      • Line and Bar
      • Waterfall
      • Annotated Chart
      • Heatmap
      • Radar
      • Sunburst
      • Tree
      • Treemap
      • Sankey Diagram
      • Funnel chart
      • iFrame
    • Composite Template Charts
      • Infographics text bubble
      • Chart and Modal Button
      • Chart and Indicators
    • Data Sets
      • Data Set Filters
    • Create your own charts
      • Free Echarts
      • Bento box
    • Features & Navigation
      • Tabs
      • History navigation & Breadcrumb
  • 🔍Advanced usage
    • CLI
    • Workflow Triggers
    • Code Generation
  • 🌍Cloud & Community
    • Shimoku Cloud
    • Shared links
    • Handling Workspaces & Users
      • User authentication
      • Inviting users
      • Creating users
      • Users with multi-workspace access
  • 🌐Releases
    • 2024
      • v.2.6
      • v.2.5
      • v.2.4
      • v.2.3
        • v.2.3.1
      • v.2.2
        • v.2.2.3
        • v.2.2.2
        • v.2.2.1
      • v.2.1
        • v.2.1.2
        • v.2.1.1
      • v.2.0
        • v.2.0.(1..4)
      • v.1.6
        • v.1.6.1
      • v.1.5
    • 2023
      • v.1.4
        • v.1.4.1
        • v.1.4.2
      • v.1.3
      • v.1.2
        • v.1.2.1
      • v.1.1
        • v.1.1.1
      • v.1.0
        • v.1.0.2
        • v.1.0.1
      • v.0.20
      • v.0.19
      • v.0.18
      • v.0.17
        • v.0.17.1
      • v.0.16
        • v.0.16.3
        • v.0.16.2
        • v.0.16.1
      • v.0.15
      • v.0.14
    • 2022
      • v.0.13
        • v.0.13.3
      • v.0.12
      • v.0.11
      • v.0.10
        • v.0.10.4
        • v.0.10.3
        • v.0.10.1
      • v.0.9
      • v.0.8
      • v.0.7
        • v.0.7.1
      • v.0.6
      • v.0.5
      • v.0.4
      • v.0.3
        • v0.3.2
        • v0.3.1
      • v.0.2
Powered by GitBook
On this page

Was this helpful?

  1. Building Web App

Menu

PreviousManaging BoardsNextChanging the Menu Path

Last updated 1 year ago

Was this helpful?

To better understand the creation and distribution of the menu we provide a schematic view of the structure and relations of the Shimoku structure concepts:

Each workspace has a set of menu paths and boards, but boards are at the same level as menu paths. This changes in the web view as the boards appear as the first element of the menu, it's purpose is to group menu paths, a menu path can be included in multiple boards. As we can see in the image, Board 1.A shares a menu path with Board 2.A.

A menu path that is not included in a board is not visible, that is the reason why the SDK always includes a menu path that is being used for charting in a board. By default it uses the name 'Default Name', but this can be modified in various ways:

  • If the board already exists and you want to change the name, use the command:

    > shimoku cloud update board --new-name YOUR_NEW_NAME

  • To specify to the SDK which board is currently being used for charting use the method:

    s.set_board(name: str)

    The plotting module will always include the menu paths being used in a specified board, even if the menu path was included in another board.

  • To group a set of menu paths into a specified board use the command:

    > shimoku cloud create board --group-menu-paths

    This command will list the possible menu paths available in your workspace and will let you select any number of them, then it will group them in the new board.

  • By playing with all the board's options some may encounter that they have created too many of them, the recommended command in this case is:

    > shimoku cloud delete board --force

    The reason to use the command with '--force' is that it will always be able to delete an existing board. A board that has links to menu paths cannot be deleted, so this method ensures that all links are deleted before deleting a board.

    If an menu path is not linked to a board it will not be accessible in the web page, so if all boards are deleted using this method it will appear as if the workspace has no content, but the menu paths will exist still. A simple way to test if there are inaccessible menu paths is by executing the following command to see all the menu paths of a workspace:

    > shimoku cloud list menu-paths

The side menu is created automatically when new components are created. The SDK uses the context of execution to create the necessary boards and paths.

The sidebar shows the workspace boards, each board can have multiple menu paths attached and each menu path can have multiple sub-paths.

The menu paths order is defined by creation order. If you first create the menu path test it is going to be the first in the board. If you want to apply an arbitrary ordering to the menu paths you can use the method s.workspaces.change_menu_order(). To get the order of the example shown above the method would be used like this:

s.workspaces.change_menu_order(
    uuid=workspace_id,
    menu_order=[
        'Overview',
        'Lead Scoring prediction',
        'Anomaly suite',
        'Retention suite',
        'Stock suite',
    ]
)

Regarding the sub-paths they are also created by creation order. Nevertheless, you can use the same method but passing a tuple with the orders of the sub-paths:

s.workspaces.change_menu_order(
    uuid=workspace_id,
    menu_order=[
        'Overview',
        ('Lead Scoring prediction', [
            'Explainability',
            'Simulator'    
        ]),
        ('Anomaly suite', [
            'Explainability',
            'Simulator'    
        ]),
        ('Retention suite', [
            'Explainability',
            'Simulator'    
        ]),
        ('Stock suite', [
            'Explainability',
            'Simulator'    
        ]),
    ]
)

The CLI can also be used when the process doesn't need to be repeated periodically, using the following command that will guide you through the process:

> shimoku cloud update menu-order

To change the sub paths use the flag --change-sub-paths.

🛠️
Shimoku structure
Board with multiple menu paths
Sub-paths order