Improve search in huge diagrams

[nikku]

Is your feature request related to a problem? Please describe.

As a follow-up to #2187 I reviewed the new search in a huge diagram. What I found is that search may not be as useful anymore due to two core changes:

• We do not keep the existing viewport, but reset the viewport to 1 (standard zoom), as a result, on smaller screens and large diagrams the "search context" is gone
• We do no longer aggressively highlight the search results (with blue background). This leads to results being hardly visible in crowded diagrams.

Old search

New search

Describe the solution you'd like

• Viewport is kept when searching, to accommodate for user intend (do I want to have a quick overview ("find usages across the diagram", or "do I want to jump to a particular element")
• We re-introduce the background for search results, this can be done easily though CSS:

  .djs-search-open .djs-outline {
    fill: var(--element-selected-outline-stroke-color) !important;
    fill-opacity: .1;
  }

Describe alternatives you've considered

No real alternatives; I need to be able to understand the "context" in which a particular element is used, to learn if it is relevant for my intend.

Additional context

None.

[philippfromme]

By keeping the viewport you mean the zoom level?

[barmac]

Minor thing:
I'd expect it to show the fragment around the found string.

Before:

After:

Ideal:

[barmac]

One thing which is annoying but present in the old solution as well is that the position is reset when I hit SHIFT without any changes to the string.

Screen.Recording.2024-09-12.at.17.07.39.mov

[barmac]

For the background, let's make sure the contrast is sufficient.

[lmbateman]

Possible future enhancements: Indicate how many results there are, provide a control for users to click through them, and highlight results on the screen, as the browser search does. The first time I tried out the new search, I searched for "termin", saw a list of results in the dropdown, pressed Return, and was surprised that only one element was selected in the diagram. I see now that you can scroll through the dropdown, and the results in the diagram are selected in turn as you scroll, but making the control a bit more obvious might be helpful.

[barmac]

Perhaps it makes sense to have a separate bug issue for the lacking contrast? WDYT @nikku?

[nikku]

Perhaps it makes sense to have a separate bug issue for the lacking contrast? WDYT @nikku?

Yes. I'm not sure which contrast you refer to, please create a separate issue.