Currently, I am thinking of using react-vtk-js for frontend and django for backend to build a webapp to do cloud-based FEM simulation. During the research, I found Trame recently, which is really easy to use and extend. However, separation of front- and back-end using trame seems to be not straight forward (I think it is possible, but don’t know how). Since trame is integrated with vtk.js, is it possible to integrate trame with react for frontend development? If positive, it might be much more convenient than starting from scratch with react-vtk-js.
If you are planing to use Django and react (react-vtk-js), I’m not sure where trame will be use here?
Trame is really meant for per user server side processing and possible remote rendering. Thing imply some kind of launcher to support multiple users.
Can you explain what you hope to get out of trame with your setup (django+react)?
I know this may sound silly. Since trame deals with the javascript part in the backend, can we reverse the process by using trame to generate the javascript part for vtk.js that could be reused in the frontend with react?
Trame don’t generate JavaScript in the way you think. Trame define a server and generate the HTML template for Vue.js so it can be connected to that server and drive it.
If your goal is to have trame generate JS without a trame server, it will not work regardless the JS technology (vue or react).
I have a similar use case and similar questions. I am building a web app (FastAPI for the backend, React for the frontend). The application should be able to process meshes provided by the user and run numerical simulations. For the visualization I was planning on using first vtk.js. But I realized it was not straightforward if feasible at all to visualize unstructured grids (c.f. Vtk.js unstructured grid).
I thus used trame to provide the view through iframes. Nonetheless, reading this post, I am still unsure it is a right approach to use trame merely as a backend to provide the visualization. Is trame the right tool to provide visualization in the backend?
Yes trame is the best approach if you are looking for serious post-processing on the server side regardless of the front-end technology. But that also imply an infrastructure cost that does not scale the same way a regular web server would.
With trame, you don’t need to define your UI in Python if you don’t want to. If you are more comfortable writing your front-end yourself, you can connect to a trame server on your own. There is a react example of that in here.
Otherwise if your post-processing does not involve large models and you can easily send the full dataset to the client, a WASM approach could be sufficient.
I have cloned this repo and followed the steps in the README found in the simple-server directory. I haven’t built anything in the client-server directory, do I need to?
On running the app in the simple-server directory and attempting to access it in my browser, nothing shows up and if I inspect the developer tools of my browser, I see the following error in the console :
POST http://localhost:1234/paraview/
Status
405
Method Not Allowed
VersionHTTP/1.1
Transferred208 B (23 B size)
Referrer Policystrict-origin-when-cross-origin
I am quite new to Trame so I can’t make sense of how I should go about debugging this. Would sincerely appreciate any pointers.
For the benefit of anyone who comes across this, Sebastien has replied to me on the Github issues page for this project with the following note. I have tried it out and it works beautifully
Good catch! To fix it, you can just run pip install -U "trame<3.6".
The reason for that is trame>=3.6 is using wslink>=2, while the react client in that code base uses wslink<2.
So with the current JS code, you need to use trame<3.6. But if you update the client to pick the latest wslink, it should just work with the latest trame.
