How to recreate Paraview's "Interactive Select Point On" functionality in Trame app?

[mashirafarid]

Hi, I'd like to add some functionality to my Trame app that is similar to Paraview's "Interactive Select Point On" functionality. Essentially, the user can choose to enter the coordinates for three different points, or they can hover over the geometry surface to highlight a point, and click to select the point. Currently, I have been able to implement the click to select point function, but the points are not on the surface of the geometry, they are in fact quite far away. For example, in the screenshot I clicked on different parts of the circular area of the geometry surface, however the pink points are what were registered as the clicked points. How can I fix this so that only the points on the surface of the geometry can be clicked on, as well as highlight the point on hover?

def initialize(server):
    state, ctrl = server.state, server.controller

    @state.change("plane_position_point")
    def activate_plane_point_selection(plane_position_point, **kwargs):
        # set point selection to first plane point
        if plane_position_point == 'plane_position_select':
            state.curr_plane_point = 1

    def select_plane_point(click_data):
        if state.plane_position_point != 'plane_position_select':
            print("select mode off!")
            return
        print("select mode on!")
        # get coordinates of clicked point
        clicked_point = click_data['position'].values()
        # find current point being selected (point 1, 2 or 3)
        if state.curr_plane_point == 1:
            [state.plane_position_x1, state.plane_position_y1, state.plane_position_z1] = clicked_point
            state.curr_plane_point += 1
        elif state.curr_plane_point == 2:
            [state.plane_position_x2, state.plane_position_y2, state.plane_position_z2] = clicked_point
            state.curr_plane_point += 1
        else:
            [state.plane_position_x3, state.plane_position_y3, state.plane_position_z3] = clicked_point
            state.curr_plane_point = 1

    def ui_setup():
        with SinglePageWithDrawerLayout(server, width=450) as layout:
            # Theme defaults to dark mode
            layout.root.theme = "dark"
            # Main content
            with layout.content:
                with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
                    html_view = paraview.VtkRemoteView(
                        simple.GetRenderView() if simple else None,
                        ref="view",
                        interactor_events=(     # Enable vtk.js interactor events for method binding
                            "events",
                            ['LeftButtonPress'],
                        ),
                        LeftButtonPress=(select_plane_point, "[utils.vtk.event($event)]")
                    )
                    ctrl.view_update = html_view.update
                    ctrl.view_replace = html_view.replace_view
                    ctrl.view_reset_camera = html_view.reset_camera
            # Footer
            layout.footer.hide()
    
    ui_setup()

[jourdain]

Did you look at that example?

[mashirafarid]

Yes, I've taken a look at it and played around with Paraview using the trace tool. However, I want to avoid using ParaView's selection tool, as it only allows selecting points on the geometry surface. While this is ok for the "click to select point" functionality, my app also allows users to enter the desired coordinates into a textfield, and these coordinates may not necessarily correspond to existing points on the geometry. Additionally, I can't seem to find a way to change the coordinates of a point once it is selected in ParaView, which is why I'm using point sources to represent these points instead. If there is a way to modify the coordinate of a selected point, please let me know, and I should be able to follow the example instead.

To summarise, I guess what I want is if I enter the coordinates of the red points (which aren't points on the geometry) in the screenshot into the textfield, then the coordinates of the three point sources are set to these coordinates. If I then later go into "click to select point" mode, and click on the three pink points (which are points on the geometry), then the coordinates of the three point sources are updated to these coordinates.

[jourdain]

I don't know how to do it on top of my head, but that will be the same behavior as hitting p with widget to snap a point location to the surface of a mesh.

If need be don't hesitate to reach out for professional support.

[mashirafarid]

I've managed to find a workaround by following the picking example to select a point, then using Paraview's Extract Selection filter to get the coordinates of the selected point, which I then use to set the coordinates of the Point Source. However, the example selects all points within the rectangle drawn, but Paraview's "Interactive Select Point On" doesn't require this, and I'm not sure how to go about replicating this.

Additionally, I tried enabling the select_hover_point functionality in the picking example, however it doesn't seem to do anything, even after uncommenting the relevant code. Is there anything else I need to change? I noticed that VtkRemoteView does have a few options but the documentation only seems to mention box_picking, is there anywhere that I can get more information about the additional options?

Screen.Recording.2024-10-11.at.9.47.26.pm.mov

[jourdain]

So the reason that the code was commented was because more work/code was needed to make is happen.

You can make a box from the same point, but the hover logic needs to happen on the JS side. So just some plain vue logic driving the component.