One Click Dashboard

Inspiration

Making fully functional, clean dashboards is a hard task, even for experienced developers. For people with no coding experience, it’s even more difficult. But, dashboards are extremely useful for visualizing data, especially for graph databases where the data is sometimes hidden inside a vertex or edge attribute. So what if anyone, regardless of experience, could deploy their own dashboard without touching a single line of code? What if anyone could unlock the secrets of their data without doing any analysis themselves? This was the inspiration for the one-click dashboard. To make a clean, functional, and easily-deployable data visualization.

What it does

The dashboard has 2 components. The first is the actual dashboard, which grabs data from TigerGraph and displays it. This dashboard specifically uses the Covid-19 starter kit and displays patient information. The second component is the launcher. The launcher is a separate page that asks for the user information and does all of the necessary configurations behind the scenes to allow the dashboard to be deployed. This is the 2-step framework that we created. This has many applications. For example, from TigerGraph’s end, you can prepackage the starter kits with these dashboards, and GraphStudio have an option to deploy the dashboard. Thus anyone with the starter kit can have access to a visual representation of the data. This also has applications for developers, especially for proof-of-concept dashboards. For example, if a developer wants to show a draft dashboard to clients or to their team of developers, they can use this same framework to easily share the dashboard so everyone can access it with one click.

How we built it

The actual dashboard was built entirely with Python using the Streamlit package. This package makes creating dashboards very easy and reduces complex html/css to one-line Python statements. We also used the pyTigerGraph Python package to allow us to more easily connect to a graph server and install / run the streamlit query. For the launcher, we created an input form using Python widgets in Google Colab, a cloud virtual python environment. This was also made entirely with Python.

Challenges we ran into

One major challenge we ran into was actually deploying the streamlit app. Normally streamlit is run via localhost. However, when using a cloud environment like Google Colab, the localhost is not actually accessible. Thus, we had to actually deploy the app on an accessible server. To do this, we create a secure tunnel to an ngrok server. This was somewhat tricky to implement, especially since the tunnel doesn't always get created (if the server is busy or if you try to create too many tunnels), so we had to implement a fail-safe to ensure a tunnel was created.

Accomplishments that we're proud of

I think we’re proud of making this project as a whole. When we first started, we didn’t know if this kind of deployment system was even possible. So, having created a system that actually works as we intended is really amazing. Even though this project is more of a starting point than a final draft, having made a version that works opens up a lot more opportunities for improving and modifying what we made already.

What we learned

We learned a lot about making dashboards in python, specifically using the Streamlit package. We also learned a lot about Google Colab and the hidden functionalities it offers (ie widgets). We also learned how to configure a secure tunnel to an ngrok server and deploy streamlit from Google Colab, which a lot of people don’t even know is possible.

What's next for One Click Dashboard

The One-Click Dashboard is more a framework than a specific dashboard/launcher combination. So, the next step would be working on other ways to implement this dashboard. For example, we could use Dash, a Python package offered by Plotly, to make the dashboard instead of using streamlit. We could also create a dashboard manually using HTML/JS/CSS and configure the communication between the launcher and the dashboard. On the flip side, we can also switch up the deployment method. For example, we could have one streamlit app with the form for user input, and once validated the user is redirected to another streamlit dashboard (separate page or separate server) with the actual visuals. With the general framework down, we can work on trying different combinations for the dashboard visuals and for the launcher to see what works best.

Built With

• colab
• python
• pytigergraph
• streamlit