Graph View Improvements

[kaixxx]

I've played around with the new graph-features. Nice progress over there!
However, there are still a some rough edges in the UI. I have collected a few notes below. Some things are probably an easy fix, others might be ideas for later.

Zoom and Pan Issues

• The zoom behaves a bit erratically at the moment. The center point around which the zoom works seems to depend on the current position of the scroll bars. If the scrollbars are not dead center, zooming becomes weird and the attempt to zoom in will make the graph disappear into the area outside the borders of the current window.

• I would suggest that the zoom should work with the current mouse position as the center point. This is the usual behavior in other apps. It would make it much easier to zoom in on a certain area of the graph.

• Panning is also not working as expected: When pressing the space bar, the cursor changes to a "hand". I would expect that can now click and drag with the mouse to pan around in the graph. However, this does nothing.

Toolbar

• Save to file/PDF/Draw.io opens a folder selection dialog instead of a dialog to select a filename.
• The delete button shows and Undo-Icon, which can be misleading as it will delete the whole graph, not undo the last operation. A garbage can would be more appropriate I guess.
• Add codes branch shows all code and categories in a flat list instead of a tree view, which makes it cumbersome to navigate in a complex code system. A proper tree view would be much better.

Graphical UI

Creating connections between nodes in the graph is quite cumbersome at the moment. I think a graphical view like this also needs a graphical user interface. My suggestion:

1. Clicking on "create connection" should start a “connection drag” mode. The cursor turns into a cross or pencil.
2. On mouse click on a connectable item, start a temporary preview connection line from that item to the mouse pointer.
3. On mouse click over another connectable item, create a new connection. Show only one dialog, where you can select color and connection type.
4. If clicked on empty space or the same item, cancel the current temporal connection and go back to 2).
5. On hitting ESC or clicking the "create connection" button again, quit the “connection drag” mode.

[Salomon-Mazatlan]

Hi Kaixxx,

1. I’m currently working on the following points:

The zoom behaves a bit erratically at the moment...

I would suggest that the zoom should work with the current mouse position as the center point...

2. At the moment, panning (hand tool) navigation is restricted to the area occupied by elements within the graph. Since the canvas is dynamically constructed as elements are added or moved, I implemented it this way to prevent infinite scrolling issues.

Panning is also not working as expected: When pressing the space bar, the cursor changes to a "hand". I would expect that can now click and drag with the mouse to pan around in the graph. However, this does nothing.

3. I kept this behavior to remain consistent with the report export workflows. Changing it would require adjustments across all modules to maintain consistency.

Save to file/PDF/Draw.io opens a folder selection dialog instead of a dialog to select a filename.

4. I’ve already updated the icon. Once I complete the remaining adjustments, I’ll send everything to Colin.

The delete button...

5. For this, I believe a better approach would be to add a side panel with a Table Widget displaying the code tree, allowing users to simply select and drag elements.

Add codes branch shows all code and categories in a flat list instead of a tree view, which makes it cumbersome to navigate in a complex code system. A proper tree view would be much better.

Something like this:

(beta 4z11)

6. Regarding:

Graphical UI
Creating connections between nodes....

I am currently implementing the creation of relationships between elements. However, this requires adjustments to the SQL table to add a "label_text_default" field to both "gr_free_line_item" and "gr_cdct_line_item".

This would allow adding text to connection lines and defining the type of relationship (which could also be extended to all elements). For example:

(beta 4z9)

[Salomon-Mazatlan]

I had already attempted to implement this approach:

Graphical UI
Creating connections between nodes in the graph is quite cumbersome at the moment. I think a graphical view like this also needs a graphical user interface. My suggestion:

Clicking on "create connection" should start a “connection drag” mode. The cursor turns into a cross or pencil.
On mouse click on a connectable item, start a temporary preview connection line from that item to the mouse pointer.
On mouse click over another connectable item, create a new connection. Show only one dialog, where you can select color and connection type.
If clicked on empty space or the same item, cancel the current temporal connection and go back to 2).
On hitting ESC or clicking the "create connection" button again, quit the “connection drag” mode.

However, the issue is that if the process gets interrupted, for example, when switching windows or if a popup appears while working, the connection line (which is dynamically drawn) is left in an inconsistent or “dangling” state.

I previously implemented something like this:

(beta 4z6a)

But I ultimately discarded it due to the issue described above.

[kaixxx]

However, the issue is that if the process gets interrupted, for example, when switching windows or if a popup appears while working, the connection line (which is dynamically drawn) is left in an inconsistent or “dangling” state.

Ah, I understand. That would be a problem. But I think it should be possible to cancel the drag when the window or the app looses focus.

I've asked my AI coding agent (Codex) for suggestions. Here is the result, maybe you can get some inspiration from it:

---

The safest fix is: do not represent the in-progress connection as a real scene item.

Right now the stable model in view_graph.py is “a line always has two valid endpoints” via from_widget and to_widget in FreeLineGraphicsItem (./src/qualcoder/view_graph.py#L3523) and LinkGraphicsItem (./src/qualcoder/view_graph.py#L4416). If a preview line is inserted into the scene before the second endpoint exists, interruptions can leave exactly the dangling state the developer described.

The robust pattern is:

1. Keep connection creation in a small state machine: idle -> waiting_for_source -> dragging_preview.
2. Store only transient state during drag:
   source_item, current_mouse_scene_pos, connect_mode_enabled.
3. Draw the preview line in the view overlay or drawForeground(), not as a QGraphicsItem.
4. Only create the real FreeLineGraphicsItem after the second valid item is clicked and the dialog is accepted.

That way, if the process is interrupted, there is no half-created scene object to clean up. Canceling just clears a few variables and repaints.

I would also make cancellation aggressive. Call one cancel_connection_drag() method on all of these:

• Esc
• toggling the “create connection” button off
• click on empty space
• same item clicked twice
• dialog about to open
• focusOutEvent
• hideEvent
• closeEvent
• window deactivation / app deactivation

The other important rule is: never open a popup while the preview is still active. Finish the drag first, clear preview state, then show the one dialog for color/type. If the dialog is canceled, do nothing. That removes the “popup interrupted the drag” failure mode completely.

So the concrete answer is:

• preview line = paint-only overlay
• persistent line = create only after both endpoints are known
• every focus/window interruption = hard cancel to idle

That is the standard way to prevent dangling interactive objects in QGraphicsView.

---

[ccbogel]

That seems a bit complicated. But if L has time to play around with this coding,