TypeError: to_plotly_json() missing 1 required positional argument: 'self'

Dash Python
1

If I just have a simple layout for Hello Wolrd, it load but I’m getting and ‘error loading layout’ for this:

# -*- coding: utf-8 -*-
"""
@author; 
"""
from dash import Dash
from dash.dependencies import Input, Output
from Dashboard.utils.Dash_fun import apply_layout_with_auth
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from mongoengine import connect
#from app import db
from app.models import (
    CNFFoodName, CNFConversionFactor, CNFNutrientAmount,
        CNFYieldAmount, CNFRefuseAmount
)
connect('cnf')

url_base = '/dash/shiny/'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

colors={
        'background': 'white',
        'text': 'black'
}
#todo: import data to be used here?
#CNFFoodNames = db.CNFFoodName
food_name_query_set = CNFFoodName.objects(description__exists=True)
food_names_arr = []
#arr of food names
for food in food_name_query_set:
    food_names_arr.append(food['description'])

#dict of food_description: units
foodnameDict = {}
'''
layout = html.Div([
    html.H1("hello world")
])
'''
layout=html.Div([
    html.H3(
        "1. Choose Ingredient"
    ),
    html.Div([
        dcc.Input(
            id="search_ingredient", type="search",
            autoComplete=True, autoFocus=True,
            list="food_names", placeholder=food_names_arr[0]
        ),
    ]),
    html.Datalist(
        id="food_names", children=[
            html.Option(value=food) for food in food_names_arr
        ]
    ),
    html.Br,
    html.H3(
        "2. Amount Units"
    ),
    html.Div([
        dcc.Dropdown(
            id="units-dropdown",
            ),
    ]),
    html.Br,
    html.H3(
        "3. Quantity"
    ),
    dcc.Input(
        id="numerical-amount", type="number",
        autoComplete=False,
    ),
    html.Button(
        "Add Ingredient", id='submit-ingredient',
    ),
    html.Button(
        "Remove Ingredient", id="cancel-ingredient",
    ),
    html.P(
        "Number of servings contained"
    )
])

def Add_Dash(server):
    app = Dash(server=server, url_base_pathname=url_base,
               external_stylesheets=external_stylesheets)
    # external_stylesheets=[dbc.themes.BOOTSTRAP])
    apply_layout_with_auth(app, layout)

    @app.callback(
        [Output('units-dropdown', 'children')],
        [Input('search-ingredient', 'value')])
    def update_dropdown(value):
        #get food_id
        food_id = -1
        for food in food_name_query_set:
            if food['description'] == value:
                food_id=food['id']

        # get units
        conversions=CNFConversionFactor.objects.filter(food=food_id)
        measure_names = []
        for c in conversions:
            measure_names.apppend(c.measure.name)
        # return a list of dicts?
        #foodnameDict={value:measure_names}

        return [{'label':unit, 'value':unit} for unit in measure_names]

    return app.server

What is wrong with my layout?

Edit: I commented out all elements except for the first and tried running. It worked. So I kept adding one element at a time until it broke and what actually broke it is html.Br. Why is that?

2

html.Br needs parantheses ie. html.Br() :slight_smile: