Sidebar

Introduction

Sidebar widget from Supervisely is a tool that provides quick access to important information and features in Supervisely apps. Sidebar is a vertical panel that appears on the left side of the app interface and includes widget user will placed in. Sidebar widget is a useful tool for streamlining workflows and improving user productivity in the apps.

Function signature

Sidebar(
    left_content=Button(),
    right_content=Card("Input", content=Input()),
    width_percent=25,
    widget_id=None,
)

Parameters

Parameters	Type	Description
left_content	Widget	Widget to display in left part of Sidebar
right_content	Widget	Widget to display in right part of Sidebar
width_percent	int	Width of the left part of Sidebar in %
height	str	Height of sidebar, can be set in px, % or hv
standalone	bool	Add paddings for full screen apps
widget_id	str	Id of the widget

left_content

Determine Widget to display in left part of Sidebar.

type: Widget

right_content

Determine Widget to display in right part of Sidebar.

type: Widget

left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right)

width_percent

Determines width of the left part of Sidebar in %.

type: int

default value: 25

left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right, width_percent=75)

height

Height of sidebar, can be set in px,% or hv.

type: str

left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right, height="250px")

standalone

Add paddings for full screen apps.

type: bool

default value: False

left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right, height="350px", standalone=True)

widget_id

ID of the widget.

type: str

default value: None

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/layouts and containers/009_sidebar/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Select, Sidebar, Text

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Initialize left and right widgets

left = Text(text="left part", status="success")
items = [
    Select.Item(label="CPU", value="cpu"),
    Select.Item(label="GPU 0", value="cuda:0"),
    Select.Item(value="option3"),
]
right = Select(items=items, filterable=True, placeholder="select me")

Initialize Sidebar widget

sidebar = Sidebar(left_content=left, right_content=right)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=sidebar)