Hi , everyone I am making small application. I want to know how to combine autocompleteInput and Selector. Do you know this function? Because my app have many items. So sometimes user want to select item by myself and other time , they want to input item number by themselves.
Screenshot 1
Now , I don’t know how to combine. so this app have selector and autocompleteInput.
When user input in autocomplete column, change x value automatically.
Screenshot 2
Autocomplete value reflect to x columns value. on the other hand , user change x value, reflect to Autocomplete input.
Screenshot 3
I want to combine this function and want to execute in one column.
My simple code
from typing import Any
from bokeh.models.annotations import Title
import hvplot.pandas # noqa
import numpy as np
import pandas as pd
import panel as pn
import param
INDICES = ["v1", "v2", "v3", "v4"]
#------------------------------------------------------------------------------------
# Definition ReactiveTable Class
#------------------------------------------------------------------------------------
class ReactiveTable(pn.viewable.Viewer):
table = param.DataFrame() # x,y table
count = param.Integer() # number of items
random = param.Action(lambda x: x.param.trigger("random"), label="Random")
x = param.ObjectSelector(INDICES[0], objects=INDICES, label="x") # selector x
y = param.ObjectSelector(INDICES[1], objects=INDICES, label="y") # selector y
Autocomplete_area = pn.widgets.AutocompleteInput(name='Autocomplete Input', options=INDICES, placeholder='Write something here')
table_widget = param.Parameter() # to get table_widget.selection to work in depends
Toggle_tf = param.Boolean() # <--- 20211220 add Toggle_tf param
def __init__(self, **params):
super().__init__(**params)
self.table_widget = pn.Param(self.param.table)[0]
self.Toggle = pn.widgets.Toggle.from_param(self.param.Toggle_tf,name='Push Toggle', button_type='default') # <<-- 20211220 add button_widget
def change_data(self) :
size = np.random.randint(5, 15)
nums = np.random.randint(10,55) # <--- 2021/12/06 Change nums of items
self.count = nums # <--- 2021/12/06 Display nums of items
INDICES = [ str('v'+str(i)) for i in range(nums) ] # <--- 2021/12/06 Make a new indices list
self.table = pd.DataFrame(
{i: np.random.randint(1, 100, size) for i in INDICES}
).T
self.param.x.objects = INDICES # change selector x lists
self.param.y.objects = INDICES # change selector y lists
self.Autocomplete_area.options = INDICES
# Definition click random button
#@param.depends("random", watch=True, on_init=True)
@param.depends('Toggle_tf',watch=True, on_init=True)
def _fill_table_with_random_data(self):
if hasattr(self, "tabs") :
if self.Toggle_tf == True :
self.change_data()
self.Toggle.name = 'Finish'
self.Toggle.button_type = 'primary'
else :
self.Toggle.name = 'Push Toggle'
self.Toggle.button_type = 'default'
else :
self.change_data()
# Definition click table widget
@param.depends("table_widget.selection", watch=True)
def _set_x_with_table_selection(self):
OBJECT = (self.param.x.objects)
if self.table_widget.selection:
self.x = OBJECT[self.table_widget.selection[0]]
if hasattr(self, "tabs") : self.tabs.active = 0 # if it is not initial , self has tabs objects. so change active tab=0
else:
self.x = OBJECT[0]
# self.count += 1 # <--- 2021/12/06 Comment out
# Definition select x value
@param.depends("x",watch=True)
def _set_table_selection_with_x(self):
OBJECT = (self.param.x.objects)
self.table_widget.selection = [OBJECT.index(self.x)]
self.Autocomplete_area.value = self.x
@param.depends("Autocomplete_area.value",watch=True)
def _set_table_selection_with_Autocomplete_area(self):
OBJECT = (self.Autocomplete_area.options)
sel = self.Autocomplete_area.value
if (sel in OBJECT) :
self.table_widget.selection = [OBJECT.index(self.Autocomplete_area.value)]
# Definition select x,y value or click random button
# @param.depends("x", "y", "random")
@param.depends("x", "y", "Toggle_tf")
def plot(self):
return self.table.T.hvplot.scatter(
x=self.x, y=self.y, color="red", grid=True, xlim=(0, 100), ylim=(0, 100)
).opts(title=str(self.table[0][0]))
# Definition update data table
@param.depends("table")
def table_list(self):
return pn.pane.DataFrame(self.table, sizing_mode="fixed")
# Definition panel layout
def __panel__(self):
# Layout
graph_layout = pn.Row(
pn.Column(
pn.pane.Markdown("## Update table"),
self.param.x,
self.Autocomplete_area,
self.param.y,
self.param.random,
self.Toggle,
),
pn.panel(self.plot, sizing_mode="fixed"),
)
list_layout = pn.Column(self.table_widget, self.param.count, self.param.random)
self.tabs = pn.Tabs(
("Graph", graph_layout),
("List", list_layout),
active=self.tabs.active if hasattr(self, "tabs") else 0,
)
return pn.template.FastListTemplate(
site="Panel",
main=self.tabs,
title="Panel Sample",
theme="dark",
)
# run app
if __name__ == "__main__":
app = ReactiveTable()
app.show(port=5007)
elif __name__.startswith("bokeh"):
app = ReactiveTable()
app.servable()
I want to save space in screen . Could anyone help and teach me good solution?
Best regards,