I’m building a VIKTOR app that visualizes a circular pattern of rods using (column, row) coordinates. Each rod has a label (e.g., rod, extra, S1, S2), which is automatically assigned based on internal rules. However, sometimes these labels need manual adjustments.
Currently, I show the pattern with:
An plot on the right (see screenshot below)
A plotly table on the right to see all the rods and their label
A parametrization table on the left where users can change labels rod by rod
This works fine for small patterns, but becomes cumbersome for larger ones. Ideally, I’d like users to select multiple rods directly from the plot and update their labels in bulk.
I came across the WebView feature and I believe it might allow this kind of interaction, but I have zero experience with HTML/JS. Before diving into that rabbit hole, I have a few questions:
Questions:
Is it possible to enable point selection (multi-select) directly in the plot using WebView?
If yes, how would I go about embedding my current plot inside a WebView?
Are there any example apps or templates that implement something similar (interactive selection and label editing)?
Would there be a simpler way to achieve this within the standard VIKTOR UI components?
I am not very experienced with HTML/JS either but I found Claude 4 Sonnet to write the code for me quite well. I did need to give some context on the VIKTOR specific stuff on how to send the result to the params.
I think it’s quire nice to do it this way because you also get to keep your Plotly plot and you and you have the multi-select option available.
For some examples VIKTOR’s GitHub has some nice ones here and a blog that explains it here.
I’ve tried your suggestion and have something working now — it’s not perfect yet, but getting there. I do have a couple of follow-up questions:
In the examples, they used viktorSdk.sendParams() to update parameters. Is there a similar way to trigger an action similar to ActionButton without having to store it in a parameter?
How does file access work across the app? I’m using some files that are accessible in Python — is there a way to access those same files directly from the HTML side?
I am not sure about that. You can however add a button at the bottom of the plot (similar as to how the parallel plot works, and set the visibility of the parameter in which you store the params to False.
Could you elaborate on the file access part? Can only python access this file? If the file is in the directory it can be accessed with some javascript code. Otherwise you could look into storing the data in a format that can easily be displayed in the HTML.
I’ve decided to use SetParams now. The problem I encounter know is that I’m trying to update the table “V1_tab.table” with viktorSdk.sendParams({"V1_tab.table" : tableData}); but it overwrites the content of the table every time. Is there a way to make it append to the table instead ?
For the JSON file. It’s because I store the dataframe I’m using to plot, in a JSON so it is easy to access and update. I wanted to be able to update it directly from the HTML file, but I’ve found another way, and it works perfectly, so I’m not going to bother.
An other question : can I use the same htlm template for multipile webview ? Or do i need to have one for each view ?
