plotly
bug in Infinite Scroll - column wrapText has no effect
While coding with infinite scrolling I had encountered a problem with columnDefinition wrapText that takes no effect.
attached is the json data: data-short.json
Code with and without "infinite scroll"
` import json import dash import warnings import dash_bootstrap_components as dbc import pathlib import dash_ag_grid as dag from dash import Dash, dcc, html from dash import html, dcc, callback, Input, Output, State, ctx
rows = json.load(open('data-short.json', 'r'))
page_number = 0 BUFFER_SIZE = 100
cell_conditional_style = { "styleConditions": [ {"condition": "params.value == 'בוצע'" , "style": {"backgroundColor": "#196A4E", "color": "white" }}, {"condition": "params.value == 'פתור'" , "style": {"backgroundColor": "#196A4E", "color": "white" }}, {"condition": "params.value == 'סיכון פתור'", "style": {"backgroundColor": "#196A4E", "color": "white" }}, {"condition": "params.value == 'תקול'" , "style": {"backgroundColor": "#800000", "color": "white" }}, {"condition": "params.value == 'בריצה'" , "style": {"backgroundColor": "#d2e034", "color": "black" }}, {"condition": "params.value == 'טרם החל'" , "style": {"backgroundColor": "dark" , "color": "crimson"}}, {"condition": "params.value == 'קריטי'" , "style": {"backgroundColor": "crimson", "color": "white" }}, ] } defaultColDef = { # "filter" : True, # "floatingFilter": True, "resizable" : True, "sortable" : True, "editable" : False, "minWidth" : 1, 'wrapText' : True, 'autoHeight' : True, 'wrapHeaderText' : False, 'autoHeaderHeight': True, "cellStyle" : cell_conditional_style, } taskTableColumnDef = [ { 'headerName': "_id", 'field': "_id", 'hide': True, 'suppressToolPanel': True }, { "headerName": "#", "field": "row_number", 'width': 5, 'cellStyle': { 'textAlign' : 'center', 'white-space': 'normal', 'word-break' : 'break-word', 'background' : '#222529', 'color' : 'whitesmoke', } }, { "headerName": "נושא", "field": "subject", 'initialWidth': 55, 'wrapText': True, 'autoHeight': True, 'cellStyle': { 'textAlign' : 'right', 'direction' : 'rtl', 'white-space': 'normal', 'word-break' : 'break-word', }, }, { "headerName": "סוג", "field": "reference.doctype", 'width': 10, 'cellStyle': { 'textAlign': 'center', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "סימוכין", "field": "reference.sheet", 'width': 15, 'cellStyle': { 'textAlign': 'right', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "WMS", "field": "wms_object.domain", 'width': 10, 'cellStyle': { 'textAlign': 'right', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "אחראי", "field": "full_name", 'width': 12, 'cellStyle': { 'textAlign': 'right', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "סטאטוס", "field": "status", 'width': 10, }, { "headerName": "עדיפות", "field": "priority", 'width': 10, }, { "headerName": 'תג״ב', "field": "due_date", 'width': 12, 'cellStyle': { 'textAlign' : 'center', 'white-space': 'normal', 'word-break' : 'break-word', 'background' : '#222529', 'color' : 'whitesmoke', } }, ] app_button = html.Div( dbc.Button( 'please enter', id='button', outline=True, color='primary', ), className = 'btn-lg d-grid m-0' ) datatable = dag.AgGrid( id='task-table', columnSize='sizeToFit', className='ag-theme-balham headers1', columnDefs=taskTableColumnDef, defaultColDef=defaultColDef, # getRowStyle=getRowStyle, rowModelType='infinite', dashGridOptions={ 'undoRedoCellEditing' : True, 'enableRtl' : True, 'rowSelection' : 'single', 'verticalAlign' : 'middle', 'ensureDomOrder' : True, ##### Infinite Scroll 'rowBuffer' : 0, 'maxBlocksInCache' : 1, 'cacheBlockSize' : BUFFER_SIZE, ##### }, # style={'height': '100%'} style={'height': 350} ) root = pathlib.Path(file).parent.parent app = Dash( name, assets_folder=root.joinpath('assets').as_posix(), prevent_initial_callbacks=True, suppress_callback_exceptions=True, ) server = app.server app.layout = dbc.Container([ dcc.Store(id='tasks-rowData'),
html.Div(
[
app_button,
dbc.Row(
[
dbc.Col(
datatable,
class_name='col-12'
),
]
),
],
lang='he', dir='rtl',
)
], fluid=True, ) @app.callback( Output(component_id='tasks-rowData', component_property='data' ), Input (component_id='button' , component_property='n_clicks'), ) def activate(n): if ctx.triggered_id == 'button': return rows else: return dash.no_update
@callback( Output('task-table' , 'getRowsResponse'),
Input ('task-table' , 'getRowsRequest'),
Input ('tasks-rowData', 'data' ),
) def infinite_scroll(request, row_data): if row_data: # partial = row_data[request['startRow']: request['endRow']]
return {
'rowData' : row_data,
'rowCount': len(row_data),
}
else:
return dash.no_update
if name == 'main': app.run_server(port=8050, debug=True)
`
`import os import json import dash import warnings import dash_bootstrap_components as dbc import pathlib import dash_ag_grid as dag import schemas.tm_services as sv from dash import Dash, dcc, html from dash import html, dcc, callback, Input, Output, State, ctx
rows = json.load(open('data-short.json', 'r'))
page_number = 0 task_db = sv.task_db BUFFER_SIZE = 100
cell_conditional_style = { "styleConditions": [ {"condition": "params.value == 'בוצע'" , "style": {"backgroundColor": "#196A4E", "color": "white" }}, {"condition": "params.value == 'פתור'" , "style": {"backgroundColor": "#196A4E", "color": "white" }}, {"condition": "params.value == 'סיכון פתור'", "style": {"backgroundColor": "#196A4E", "color": "white" }}, {"condition": "params.value == 'תקול'" , "style": {"backgroundColor": "#800000", "color": "white" }}, {"condition": "params.value == 'בריצה'" , "style": {"backgroundColor": "#d2e034", "color": "black" }}, {"condition": "params.value == 'טרם החל'" , "style": {"backgroundColor": "dark" , "color": "crimson"}}, {"condition": "params.value == 'קריטי'" , "style": {"backgroundColor": "crimson", "color": "white" }}, ] } defaultColDef = { "resizable" : True, "sortable" : True, "editable" : False, "minWidth" : 1, #'wrapText' : True, #'autoHeight' : True, 'wrapHeaderText' : False, 'autoHeaderHeight': True, "cellStyle" : cell_conditional_style, } taskTableColumnDef = [ { 'headerName': "_id", 'field': "_id", 'hide': True, 'suppressToolPanel': True }, { "headerName": "#", "field": "row_number", 'width': 5, 'cellStyle': { 'textAlign' : 'center', 'white-space': 'normal', 'word-break' : 'break-word', 'background' : '#222529', 'color' : 'whitesmoke', } }, { "headerName": "נושא", "field": "subject", 'initialWidth': 55, 'wrapText' : True, 'autoHeight' : True, 'cellStyle': { 'textAlign' : 'right', 'direction' : 'rtl', 'white-space': 'normal', 'word-break' : 'break-word', }, }, { "headerName": "סוג", "field": "reference.doctype", 'width': 10, 'cellStyle': { 'textAlign': 'center', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "סימוכין", "field": "reference.sheet", 'width': 15, 'cellStyle': { 'textAlign': 'right', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "WMS", "field": "wms_object.domain", 'width': 10, 'cellStyle': { 'textAlign': 'right', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "אחראי", "field": "full_name", 'width': 12, 'cellStyle': { 'textAlign': 'right', 'direction': 'rtl', 'white-space': 'normal', 'word-break': 'break-word' } }, { "headerName": "סטאטוס", "field": "status", 'width': 10, }, { "headerName": "עדיפות", "field": "priority", 'width': 10, }, { "headerName": 'תג״ב', "field": "due_date", 'width': 12, 'cellStyle': { 'textAlign' : 'center', 'white-space': 'normal', 'word-break' : 'break-word', 'background' : '#222529', 'color' : 'whitesmoke', } }, ] app_button = html.Div( dbc.Button( 'please enter', id='button', outline=True, color='primary', ), className = 'btn-lg d-grid m-0' ) datatable = dag.AgGrid( id='task-table', columnSize='sizeToFit', className='ag-theme-balham headers1', columnDefs=taskTableColumnDef, defaultColDef=defaultColDef, # getRowStyle=getRowStyle, # rowModelType='infinite', dashGridOptions={ # 'rowHeight' : 35, # 'enableCellTextSelection': True, 'undoRedoCellEditing' : True, 'enableRtl' : True, 'rowSelection' : 'single', 'verticalAlign' : 'middle', 'ensureDomOrder' : True, ##### Infinite Scroll # 'rowBuffer' : 0, # 'maxBlocksInCache' : 1, # 'cacheBlockSize' : BUFFER_SIZE, ##### }, style={'height': 350} # style={'height': '100%'} ) root = pathlib.Path(file).parent.parent app = Dash( name, assets_folder=root.joinpath('assets').as_posix(), # use_pages=True, prevent_initial_callbacks=True, suppress_callback_exceptions=True, ) server = app.server app.layout = dbc.Container([ dcc.Store(id='active-user'), dcc.Store(id='record-id' ), dcc.Store(id='owner-name' ), dcc.Store(id='testrun-selected-row'), dcc.Store(id='tasks-rowData'), # dcc.Location(id="url" , refresh=True), dcc.Location(id="url-1", refresh=True),
html.Div(
[
app_button,
dbc.Row(
[
dbc.Col(
datatable,
class_name='col-12'
),
]
),
],
lang='he', dir='rtl'
)
], fluid=True, ) @app.callback( Output(component_id='task-table' , component_property='rowData' ), Input (component_id='button' , component_property='n_clicks'), ) def activate(n): if ctx.triggered_id == 'button': return rows else: return dash.no_update
if name == 'main': app.run_server(port=8050, debug=True) `
