Displaying retentioneering interactable graph in a web app with flask - python

I'm using retentioneering library with python for analysing complex user behaviors in a website and show it as a graph.
Everything works as expected but now, I would like to provide access to this plots also to other people using a web app built with flask.
This is the result given from retentioneering: retentioneering graph result where you can select various "filters" and drag node to change their location.
I would like to create a web app with this exact graph and filters provided by the library plus, as I said, the drop down.
The problem is that the graph is not just an image but something a user can interact with, so my question is: how can I show it in a dynamic way like here? Is there some specific html object I should use?
Thanks.

Investigating a bit more on how retentioneering works it turns out that the final return value is basically an html with javascript that create the graph.
So using flask displaying this html is really straightforward using the render_template function.

Related

Is there a way to embed pandas analysis into a html page?

I've done some analysis using Pandas on a csv file and have created a number of graphs using matplotlib and plotly.
I'm trying to get these graphs in a html page so my team can see them on a dashboard.
I know it's possible to download the image and embed into html, however, the csv file I performed my analysis on will be constantly updated i.e. I need a way of include the graphs on a html page which auto refreshes.
Is this possible?
I think it would be possible and check pyscrpit
https://pyscript.net/
where you can use python in html
https://github.com/pyscript/pyscript/blob/main/docs/tutorials/getting-started.md
here are some tutorials to get and idea of what I am talking about and to start
Then you can host the html page anywhere you like and they will see when you update it
Voila or Panel to make a dashboard is another way to go. That needs an active Python kernel at this time. (That is as opposed to the pyscript / webassembly route. JupyterLite currently works in WASM and Voila in WASM is in development.) Examining demonstrations available at the Voila Gallery will give you a sense of how it can work. All those example demos are served via MyBinder. And you can use that too, if your code and data can be public. If it cannot be public, you'd need to host a server that only your team can access.
JupyterLite would also be possible if you don't mind your team being able to see the code cells and things that compose your Jupyter notebook stepping through the analysis. That would not require an active Python kernel server-side because it is based on WebAssembly that would run inside the client machine, like PyScript. So all you would need to do was a have a server that can serve static files. That's a lower bar than Voila that would run on the server. How to get started deploying JupyterLite is here.
I would checkout out Dash or Plotly, here you can add generation of the graphs in a callback for isntace. Which would update them when the .csv updates. Good luck!

SocketIO vs AJAX for updating Flask webpage

So, here's what I have. A very simple Flask app, with one route that listens for POST and GET methods. I have a separate python script that is constantly outputting data. Right now, it is post'ing that data to the flask app, which takes that data, appends it to a list, then when someone visits or refreshed the webpage, the entire list is rendered into a template. I would like to not have to refresh the page to see this, and would rather it be just a live feed of data.
Currently I don't know how to use either SocketIO or AJAX, but I know that one of these is what I should be using. My ask here is which one? There will eventually be more scripts sending data to this app, which will ultimately turn into a dashboard of sorts. Starting small for now and getting just one working how I want. So my ask is, which would be a better solution, or are they both equal given what I want to do?

How do I post Python generated GFS plots on my website?

I have a Python script that ingests GFS model data and plots it using matplotlib. How do I get those exact plots to display on a website? I am currently using PythonAnywhere to build my webpage.
It looks like Python Anywhere has a variety of options for how you can host your website/web application--so the details of how to do this will depend on how you are hosting your site.
One option is Flask, and I'll just point you to Matplotlib's example on embedding Matplotlib within Flask.
Another option is to generate the plots statically somewhere, and then upload them into your static website content. I'm not sure how exactly one one would go about that with Python Anywhere.

Submitting Cypher to neo4j through browser

I'm attempting a hack because I can't find a better way (A native less hacky solution would be much appreciated too)
I'm using neo4j to analyse some graphs. I generate cypher queries and can use py2neo or similar to run them and get back and result. Sometimes I need to show the result and I've used vis.js and toyed with others, but I find the best solution is the one build into the browser on port 7474. I can't find a stand alone I of that js package I could use to display plots in a notebook or website (an answer for this would be great) so I'm using selenium to send the generated queries (the hack)
The submission field for queries is a div with a ReactCodeMirror class and a text area. I can't work out how to submit a query to it, as it goes out of focus upon calling send_keys
Similar question (but no answer): How can I execute a cypher query (from java) to neo4j's browser?
You may want to take a look at the Javascript version of the Neo4j Movies Example Application. It shows how to write a web app that dynamically displays query results.
This article on the example should also be informative.

PyMaps: How to interact with javascript in python

Ok, so I have used this code to setup a simple program. Basically it just sets points on a map in python. Very basic. The problem now is I have a condition where when that condition happens it refreshes the page with a simple QWebView.setHtml(). What I want to do now is find a way to get the current zoom and center information of the map and save it. Is there anyway to go into the javascript and grab that information, store it and then write it into the html the same way this code already does before i do the refresh?
Sorry if this is confusing or broad, I just cant think of a way to get the information from the map using python.
There are a number of ways to interact with client-side code from the server (Python). You could set a cookie on the client, send an AJAX request to the server from Javascript, submit a form, or go a more exotic route like WebSockets. Without more information, I'm not sure we can tell you which is the best.
What web framework are you using?
EDIT:
Oh, I see- you're using a scriptable web view... maybe something like zoom = view.evaluateJavaScript('map.getZoom();')? From what I can see of the library, the difficult part might be getting a reference to the map var in JS.
EDIT:
I don't think this is possible without modifying or extending pymaps, since it scopes the GMap locally in JS and doesn't expose it anywhere. I've done just that in a gist. You can then access the zoom with something similar to the above- maybe zoom = view.evaluateJavaScript("PyMaps[0].gmap.getZoom();").
EDIT:
In case this wasn't clear- the gist I included requires that you use MyPyMap instead of PyMap.
From another StackOverflow question, I realized you can't do evaluteJavaScript straight on a view. The subsequent code would look more like this
doc = view.page().mainFrame().documentElement()
zoom_level = doc.evaluateJavaScript("PyMaps[0].gmap.getZoom();")

Categories