def AppBar(title='SEPAL module'):
"""
create an appBar widget with the provided title using the sepal color framework
Returns:
app (v.AppBar) : The created appbar
toolbarButton (v.Btn) : The button to display the side drawer
"""
toolBarButton = v.Btn(
icon = True,
children=[
v.Icon(class_="white--text", children=['mdi-dots-vertical'])
]
)
appBar = v.AppBar(
color=sepal_main,
class_="white--text",
dense=True,
app = True,
children = [
toolBarButton,
v.ToolbarTitle(children=[title]),
]
)
return (appBar, toolBarButton)
def __init__(self, title='SEPAL module', **kwargs):
self.toggle_button = v.Btn(icon=True,
children=[
v.Icon(class_="white--text",
children=['mdi-dots-vertical'])
])
super().__init__(
color=sepal_main,
class_="white--text",
dense=True,
app=True,
children=[self.toggle_button,
v.ToolbarTitle(children=[title])],
**kwargs)
def setTitle(self, title):
"""set the title in the appbar"""
self.children = [
self.toolBarButton,
v.ToolbarTitle(children=[title])
]
return self
def setTitle(self, title):
"""set the title in the appbar"""
self.children = [
self.toolBarButton,
v.ToolbarTitle(children=[title])
]
return self
def backend_widget(backend: Union[IBMQBackend, FakeBackend]) -> None:
"""Display backend information as a widget.
Args:
backend: Display information about this backend.
"""
vue.theme.dark = False
cred = backend._credentials
last_tab = vue.TabItem(children=[])
livedata = LiveDataVisualization()
card = vue.Card(
height=600,
outlined=True,
children=[
vue.Toolbar(flat=True,
color="#002d9c",
children=[
vue.ToolbarTitle(children=[
'{} @ ({}/{}/{})'.format(
backend.name(), cred.hub, cred.group,
cred.project)
],
style_="color:white")
]),
vue.Tabs(vertical=True,
children=[
vue.Tab(children=['Configuration']),
vue.Tab(children=['Qubits']),
vue.Tab(children=['Non-local Gates']),
vue.Tab(children=['Error map']),
vue.Tab(children=['Live Data']),
vue.Tab(children=['Job Summary']),
vue.TabItem(children=[config_tab(backend)]),
vue.TabItem(children=[qubits_tab(backend)]),
vue.TabItem(children=[gates_tab(backend)]),
vue.TabItem(children=[
iplot_error_map(
backend, figsize=(None, None), as_widget=True)
]),
vue.TabItem(children=[
livedata.create_visualization(
backend, figsize=(11, 9), show_title=False)
]), last_tab
])
])
# Load job data async for a bit better performance
thread = threading.Thread(target=_async_job_loader,
args=(last_tab, backend))
thread.start()
display(card)
def __init__(self, title='SEPAL module', **kwargs):
self.toggle_button = v.Btn(icon=True,
children=[
v.Icon(class_="white--text",
children=['mdi-dots-vertical'])
])
self.title = v.ToolbarTitle(children=[title])
super().__init__(color=sepal_main,
class_="white--text",
dense=True,
app=True,
children=[self.toggle_button, self.title],
**kwargs)
def backend_widget(backend):
"""Display backend information as a widget.
Parameters:
backend (IBMQBackend): A backend.
"""
cred = backend.provider().credentials
last_tab = vue.TabItem(children=[])
card = vue.Card(
height=600,
outlined=True,
children=[
vue.Toolbar(flat=True,
color="#002d9c",
children=[
vue.ToolbarTitle(children=[
'{} @ ({}/{}/{})'.format(
backend.name(), cred.hub, cred.group,
cred.project)
],
style_="color:white")
]),
vue.Tabs(
vertical=True,
children=[
vue.Tab(children=['Configuration']),
vue.Tab(children=['Qubits']),
vue.Tab(children=['Multi-Qubit Gates']),
vue.Tab(children=['Error map']),
vue.Tab(children=['Job Summary']),
vue.TabItem(children=[config_tab(backend)]),
vue.TabItem(children=[qubits_tab(backend)]),
vue.TabItem(children=[gates_tab(backend)]),
vue.TabItem(
children=[iplot_error_map(backend, as_widget=True)]),
last_tab
])
])
# Load job data async for a bit better performance
thread = threading.Thread(target=_async_job_loader,
args=(last_tab, backend))
thread.start()
display(card)
nb = sb.read_notebook(str(f))
for key, value in nb.scraps.data_dict.items():
this_item[key] = value
items.append(this_item)
filelist[stage.name] = items
# + {"Collapsed": "false"}
# build toolbar
toolbar = v.Toolbar(
color=title_bar_color,
dark=True,
children=[
v.ToolbarItems(
children=[v.Img(src=logo['jupyter'], style_='height:100%')]),
v.ToolbarTitle(children=[dashboard_name], color='green'),
v.Spacer(),
v.ToolbarItems(children=app_bar_links)
],
app=True)
# + {"Collapsed": "false"}
tab_children = []
for stage in sorted(filelist.keys()):
items = filelist[stage]
cards = [
v.Flex(ma_2=True,
fluid=True,
children=[
v.Card(hover=True,
def __init__(self,
schema,
out_path=Path("~").expanduser() / "downloads",
*args,
**kwargs):
"""Custom data table to display classification .csv files with features to create,
edit or remove rows.
Args:
schema (dict): schema (dict {'title':'type'}): Dictionary
with column names (key) and type of data (value), representing the scheme
of the table.
out_path (str) (optional): output path where table will be saved, default to ~/downloads/
"""
self.out_path = out_path
self.schema = schema
self.dialog = Output()
self.edit_icon = v.Icon(children=["mdi-pencil"])
edit_icon = sw.Tooltip(self.edit_icon, "Edit selelcted row")
self.delete_icon = v.Icon(children=["mdi-delete"])
delete_icon = sw.Tooltip(self.delete_icon,
"Permanently delete the selected row")
self.add_icon = v.Icon(children=["mdi-plus"])
add_icon = sw.Tooltip(self.add_icon, "Create a new element")
self.save_icon = v.Icon(children=["mdi-content-save"])
save_icon = sw.Tooltip(self.save_icon,
"Write current table on SEPAL space")
self.save_dialog = SaveDialog(table=self,
out_path=self.out_path,
transition=False)
slot = v.Toolbar(
class_="d-flex mb-6",
flat=True,
children=[
self.dialog,
v.ToolbarTitle(children=["Customization tools"]),
v.Divider(class_="mx-4", inset=True, vertical=True),
v.Flex(class_="ml-auto",
children=[edit_icon, delete_icon, add_icon]),
v.Divider(class_="mx-4", inset=True, vertical=True),
save_icon,
],
)
self.v_slots = [{"name": "top", "variable": "top", "children": [slot]}]
self.v_model = []
self.item_key = "id"
self.show_select = True
self.single_select = True
self.hide_default_footer = True
super().__init__(*args, **kwargs)
self.edit_icon.on_event("click", self._edit_event)
self.delete_icon.on_event("click", self._remove_event)
self.add_icon.on_event("click", self._add_event)
self.save_icon.on_event("click", self._save_event)
def __init__(self,
schema,
out_path=Path('~').expanduser() / 'downloads',
*args,
**kwargs):
""" Custom data table to display classification .csv files with features to create,
edit or remove rows.
Args:
schema (dict): schema (dict {'title':'type'}): Dictionary
with column names (key) and type of data (value), representing the scheme
of the table.
out_path (str) (optional): output path where table will be saved, default to ~/downloads/
"""
self.out_path = out_path
self.schema = schema
self.dialog = Output()
self.edit_icon = v.Icon(children=['mdi-pencil'])
edit_icon = sw.Tooltip(self.edit_icon, 'Edit selelcted row')
self.delete_icon = v.Icon(children=['mdi-delete'])
delete_icon = sw.Tooltip(self.delete_icon,
'Permanently delete the selected row')
self.add_icon = v.Icon(children=['mdi-plus'])
add_icon = sw.Tooltip(self.add_icon, 'Create a new element')
self.save_icon = v.Icon(children=['mdi-content-save'])
save_icon = sw.Tooltip(self.save_icon,
'Write current table on SEPAL space')
self.save_dialog = SaveDialog(table=self,
out_path=self.out_path,
transition=False)
slot = v.Toolbar(class_='d-flex mb-6',
flat=True,
children=[
self.dialog,
v.ToolbarTitle(children=['Customization tools']),
v.Divider(class_='mx-4',
inset=True,
vertical=True),
v.Flex(
class_='ml-auto',
children=[edit_icon, delete_icon, add_icon]),
v.Divider(class_='mx-4',
inset=True,
vertical=True), save_icon
])
self.v_slots = [{'name': 'top', 'variable': 'top', 'children': [slot]}]
self.v_model = []
self.item_key = 'id'
self.show_select = True
self.single_select = True
self.hide_default_footer = True
super().__init__(*args, **kwargs)
self.edit_icon.on_event('click', self._edit_event)
self.delete_icon.on_event('click', self._remove_event)
self.add_icon.on_event('click', self._add_event)
self.save_icon.on_event('click', self._save_event)
def backend_widget(backend: Union[IBMBackend, FakeBackend]) -> None:
"""Display backend information as a widget.
Args:
backend: Display information about this backend.
"""
vue.theme.dark = False
if isinstance(backend, FakeBackend):
cred = backend._credentials
instance = to_instance_format(cred.hub, cred.group, cred.project)
else:
instance = backend._api_client._params.instance
last_tab = vue.TabItem(children=[])
livedata = LiveDataVisualization()
card = vue.Card(
height=600,
outlined=True,
children=[
vue.Toolbar(
flat=True,
color="#002d9c",
children=[
vue.ToolbarTitle(
children=[
"{} @ ({})".format(backend.name(), instance)
],
style_="color:white",
)
],
),
vue.Tabs(
vertical=True,
children=[
vue.Tab(children=["Configuration"]),
vue.Tab(children=["Qubits"]),
vue.Tab(children=["Non-local Gates"]),
vue.Tab(children=["Error map"]),
vue.Tab(children=["Live Data"]),
vue.Tab(children=["Job Summary"]),
vue.TabItem(children=[config_tab(backend)]),
vue.TabItem(children=[qubits_tab(backend)]),
vue.TabItem(children=[gates_tab(backend)]),
vue.TabItem(children=[
iplot_error_map(
backend, figsize=(None, None), as_widget=True)
]),
vue.TabItem(children=[
iplot_error_map(
backend, figsize=(None, None), as_widget=True)
]),
vue.TabItem(children=[
livedata.create_visualization(
backend, figsize=(11, 9), show_title=False)
]),
last_tab,
],
),
],
)
# Load job data async for a bit better performance
thread = threading.Thread(target=_async_job_loader,
args=(last_tab, backend))
thread.start()
display(card)
def __init__(self, spark_controller, ipywidget_factory, ipython_display,
endpoints, refresh_method, state, db):
super(AddEndpointWidget,
self).__init__(spark_controller, ipywidget_factory,
ipython_display, True)
self.endpoints = endpoints
self.refresh_method = refresh_method
self.state = state
self.delete_pressed = False
self.db = db
self.auth = GoogleAuth()
add_endpoint_button = v.Btn(class_='ma-2',
color='primary',
children=['Add Endpoint'])
add_endpoint_button.on_event('click', self._add_endpoint)
cancel_button = v.Btn(class_='ma-2',
color='primary',
children=['Cancel'])
cancel_button.on_event('click', self._on_cancel_click)
backicon = v.Icon(children=['mdi-arrow-left'])
backicon.on_event('click', self._on_back_click)
back_toolbar = v.Toolbar(
elevation="0",
children=[
v.ToolbarItems(children=[backicon]),
v.ToolbarTitle(children=['Create new endpoint']),
v.Spacer()
],
app=True, # If true, the other widgets float under on scroll
)
self.create_endpoint_widget = v.Container(
style_=f'width: {WIDGET_WIDTH};',
class_='ma-2',
children=[
back_toolbar,
v.Row(class_='ma-2',
children=[
v.Col(children=[self.auth.account_widget]),
v.Col(children=[self.auth.project_widget]),
v.Col(children=[self.auth.region_widget])
]),
v.Row(class_='ma-2',
children=[
v.Col(children=[self.auth.cluster_widget]),
v.Col(children=[self.auth.filter_widget]),
v.Col(children=[v.Spacer()]),
]),
v.Row(class_='ma-2',
children=[add_endpoint_button, cancel_button])
])
endpoint_table_values = self._generate_endpoint_values()
new_endpoint = v.Btn(class_='ma-2',
color='primary',
children=['New Endpoint'])
new_endpoint.on_event('click', self._on_new_endpoint_click)
no_back_toolbar = v.Toolbar(
elevation="0",
children=[
v.ToolbarTitle(titleMarginStart='12dp',
contentInsetStartWithNavigation="56dp",
children=['Endpoints']),
v.Spacer()
],
app=True, # If true, the other widgets float under on scroll
)
toolbar = v.Row(children=[no_back_toolbar, new_endpoint])
delete_icon = v.Icon(children=['mdi-delete'])
delete_icon.on_event('click', self._on_delete_icon_pressed)
endpoint_table = v.DataTable(style_=f'width: {WIDGET_WIDTH};',
no_data_text='No endpoints',
hide_default_footer=True,
disable_pagination=True,
item_key='url',
headers=[
{
'text': 'Cluster',
'align': 'start',
'sortable': False,
'value': 'name'
},
{
'text': 'Project',
'sortable': False,
'value': 'project'
},
{
'text': 'Region',
'sortable': False,
'value': 'region'
},
{
'text': 'Account',
'sortable': False,
'value': 'account'
},
{
'text': 'Url',
'sortable': False,
'value': 'url'
},
{
'text': '',
'sortable': False,
'value': 'actions'
},
],
items=endpoint_table_values,
dense=False,
v_slots=[{
'name': 'item.actions',
'children': [delete_icon]
}, {
'name': 'no-data',
'children': ['No endpoints']
}])
endpoint_table.on_event('click:row', self._remove_row_from_table)
self.toolbar_with_table = v.Container(
style_=f'width: {WIDGET_WIDTH};',
class_='mx-auto',
children=[
v.Row(class_='mx-auto', children=[toolbar]),
v.Row(class_='mx-auto', children=[endpoint_table])
])
self.children = [self.create_endpoint_widget, self.toolbar_with_table]
for child in self.children:
child.parent_widget = self
self._update_view()