OverviewFor this milestone, you will begin developing the Python code for a couple of your dashboard widgets in an IPYNB file in Jupyter Notebook. Specifically, you will begin coding the interactive data table and the geolocation chart. Be sure that both components receive data from the MongoDB database. Use the CRUD Python module from Project One to help you retrieve this data and pass it to the dashboard widgets. Remember that the MVC design pattern is a separation of application logic into a stack of software components, such as MongoDB for model storage, the web server for implementing application controller logic, and the web browser to produce the view.You will continue building on this work to complete Project Two, which will be due in Module Seven.PromptYou have been asked to create a data table on the dashboard that shows an unfiltered view of the Austin Animal Center Outcomes data set. You have also been asked to add a geolocation chart to the dashboard, which will help the client visualize the data. For more details about the dash components for data tables and the geolocation chart, refer to the Module Six resources.Open the ModuleSixMilestone$-$Template.ipynb file, which contains the starter code for the Grazioso Salvare dashboard. Upload this file into Apporto, and open it using the Jupyter Notebook application. Be sure to review all the starter code provided. Pay special attention to the import commands and the comments describing what each code section does.Update the code to create an interactive data table on the dashboard that shows an unfiltered view of the Austin Animal Center Outcomes data set. To populate the data onto your table, you will use your previous CRUD Python module, from Project One, to run a retrieve all query and import the data from MongoDB. This data retrieval will access the model portion of your MVC pattern: the MongoDB database. Be sure to hardcode in the username and password for the aacuser account.Note: The data table may take a few minutes to fully render and display, depending on the speed of your internet connection.Tip: Be sure to consider your client when creating the interactive data table. Consider optional features that will make the table easier to use, such as limiting the number of rows displayed, enabling pagination $($advanced$),$ enabling sorting, and so on$.$ Review the Module Six resources on data tables to help you select and set up these features.Note: You must enable single$-$row selection for the data table for the mapping callback to function properly. This property is represented as: row$\_$selectable $=$ "single"Add a geolocation chart that displays data from the interactive data table to your existing dashboard.You are being given the function that sets up accessing the data for the geolocation chart and calls the Leaflet function update$\_$map:def update$\_$map$($viewData$,$ index$)$: dff $=$ pd$.$DataFrame.from$\_$dict$($viewData$)$ # Because we only allow single row selection, the list can # be converted to a row index here if index is None: row $=0$ else: row $=$ index$[0]$# Austin TX is at $[30\mathrm{.}75,-97\mathrm{.}48]$return $[$ dl$.$Map$($style$=\{\text{'}$width$\text{'}$: $\text{'}1000$px$\text{'},$ 'height': $\text{'}500$px$\text{'}\},$ center$=[30\mathrm{.}75,-97\mathrm{.}48],$ zoom$=10,$ children$=[$ dl$.$TileLayer$($id$=$"base$-$layer$-$id$"),$ # Marker with tool tip and popup # Column $13$ and $14$ define the grid$-$coordinates for # the map # Column $4$ defines the breed for the animal # Column $9$ defines the name of the animal dl$.$Marker$($position$=[$dff$.$iloc$[$row$,13],$dff$.$iloc$[$row$,14]],$ children$=[$ dl$.$Tooltip$($dff$.$iloc$[$row$,4]),$ dl$.$Popup$([$ html$.$H$1("$Animal Name"$),$ html$.$P$($dff$.$iloc$[$row$,9])])])])]$You will need to structure this function into your dashboard code by adding the correct statements to the layout. These statements ensure your layout has a place for the geolocation chart. Here is an example statement:html$.$Div$($ id$=$'map$-$id$\text{'},$ className$=$'col s$12$ m$6\text{'},)$You will also need to add the correct callback routines to the geolocation chart. These will look similar to the callback routines used for user authentication and your data table. Here is an example callback routine:@app.callback$($ Output$(\text{'}$datatable$-$id$\text{'},$ 'style$\_$data$\_$conditional'$),[$Input$(\text{'}$datatable$-$id$\text{'},$ 'selected$\_$columns'$)])$Note: The Leaflet geolocation chart will show the row selected in the data table. To prevent issues with not selecting an initial row, you can set the selected row as a parameter to the DataTable method by adding the parameter:selected$\_$rows$[0],$to the DataTable constructor, thereby selecting first row of the data table by default. As you select separate rows in the DataTable, the map should update automatically.Finally, run the IPYNB file and take a screenshot of your dashboard as proof of this execution. Your screenshot should include $1)$ the interactive data table populated with the Austin Animal Center Outcomes data from MongoDB and $2)$ your geolocation chart showing the location of the first dog in the table. Additionally, your unique identifier $($created in the Module Five assignment$)$ should also appear in the screenshot.What to SubmitTo complete this project, you must submit a zipped folder containing both the IPYNB file with the code for your dashboard and the PY file containing your CRUD Python Module. All code files should follow industry$-$standard best practices, including well$-$commented code. You must also submit the screenshot of your dashboard as proof of your executions.