def vuetify_layout_factory(viewer):
def on_click(widget, event, data):
drawer.v_model = not drawer.v_model
sidebar_button = v.AppBarNavIcon()
sidebar_button.on_event('click', on_click)
options_panel = v.ExpansionPanels(
v_model=[0, 1], multiple=True, accordion=True, style_='padding-left: 1px',
children=[
v.ExpansionPanel(children=[
v.ExpansionPanelHeader(class_='font-weight-bold', children=['Viewer Options']),
v.ExpansionPanelContent(children=[viewer.viewer_options])]),
v.ExpansionPanel(children=[
v.ExpansionPanelHeader(class_='font-weight-bold', children=['Layer Options']),
v.ExpansionPanelContent(children=[viewer.layer_options])])])
drawer = v.NavigationDrawer(v_model=False, absolute=True, right=True,
children=[sidebar_button,
options_panel], width="min-content")
toolbar_selection_tools = BasicJupyterToolbar(viewer)
tool_ids, subtool_ids = get_viewer_tools(viewer.__class__)
if subtool_ids:
raise ValueError('subtools are not yet supported in Jupyter viewers')
for tool_id in tool_ids:
mode_cls = viewer_tool.members[tool_id]
mode = mode_cls(viewer)
toolbar_selection_tools.add_tool(mode)
toolbar_active_subset = SubsetSelect(viewer)
toolbar_selection_mode = SelectionModeMenu(viewer)
toolbar = v.Toolbar(dense=True, class_='elevation-0',
children=[v.ToolbarItems(children=[toolbar_selection_tools,
toolbar_selection_mode,
toolbar_active_subset]),
v.Spacer(),
sidebar_button])
layout = v.Html(tag='div', children=[
toolbar,
v.Row(no_gutters=True, children=[
v.Col(cols=12, children=[viewer.figure_widget]),
v.Col(cols=12, children=[viewer.output_widget])
]),
drawer
])
return layout
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)
def create_main_toolbar(self) -> v.Toolbar:
return v.Toolbar(
flat=True,
block=True,
children=[
v.Spacer(),
self.create_file_upload(),
self.create_show_example(),
self.create_link_button(
target="examples/data/raw/ics/liverpool.ics",
text="Example Data",
icon="mdi-file",
),
self.create_link_button(
target="https://github.com/ricky-lim/calh",
text="Source",
icon="mdi-github-face",
),
v.Spacer(),
],
)
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()