FrontEnd for your Database
By: Trevor O'Hearn
Tags: Python, Front End Development, Dash, Plotly

Data Scientists are all about playing with a lot of data. The problem is that our skills are not necessarily realized by either out superiors or coworkers due to one simple problem; visualization. Nobody understands how much work and effort it takes to set up that perfect algorithm. Nobody understands all that back end work you are doing! That is because there is nothing to see; it is all just numbers. Numbers may be great for you but definitely not helpful when it comes to getting your point across.

Whether or not you are in the beginning or the end of the data science process; visuals are important! So here is a simple way to add a front end to your back end that allows you to alter your database and present visuals. You can also add/change entries and query the tables to select specific data that you may want to show.

import Dash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output

This is all the stuff you will need for you basic front-end.

app = dash.Dash(_name_)



Everything is added to the Dash object which we will call ‘app’ here.

app.layout = html.Div([

#top

html.Div(id='top', [#put more stuff in here]),

#main area

html.Div(id='middle', [dcc.Input('textbox', type='text')

#add more inputs if need be

]),

#bottom

html.Div(id='bottom', [#put more stuff in here])

], style = {'background-color' : '#011f4b',

'padding' : '10px'}

)

First thing you want to do is recognize that we are basically setting up a simple web page. To do that we wrap html ‘divs’ in more ‘divs’ which eventually hold all of the data. We are also giving elements IDs so that we can identify them during any processing that we do and can add items to them.

import poorly.graph_objects as go #to make visuals

import pandas as pd #if you want to use a dataframe object import mysql.connector

from mysql.connector import errorcode cnx = mysql.connector.connect(host='hostname', user='user', passwd='password', database='dbname')

cursor = cnx.cursor()

The code above should be added to the imports section of your code so that you can connect to the database and use the front end we are building to add/delete/change/visualize the information.

@app.callback(Output('middle', 'children'),[

Input('textbox', 'value'),

#Input('textbox2', 'value') ]

def method_that_is_called(textbox):

cursor.execute('textbox')

cnx.commit()

return parse_data(cursor.fetchall()) def parse_data(data):

#parse returned data to be used visually

return #plotly element to be added to the 'middle' div.

This is what a callback looks like. The words ‘middle’, ‘textbox’, and ‘textbox2’ are IDs of the elements added to app.layout which, when changed, will trigger the method and force an event. In this example, the ‘textbox’ will execute the command to the database and then a helper method is called to parse the data returned. The parse_data method will then organize the lines and return it in a simple Plotly container of your choice!

#commented options to add the method in debugging process

app.run_server()#use_reloader=False, debug=True

This will run your server!

cursor.close()

cnx.close()

Don’t forget to close your connections when you are all done!

I’m not going to give everything away, as in you will need to write your own parse_data method and make your own visuals using plotly! However, this is a simple front end that will drop any plotly object into the main container div. I have added some resources below if you need to get familiar with plotly and dash. Happy coding!