Review connections UI/UX for widgets

[allyoucanmap]

Description

Current state of the implementation

The current connections implementation for widgets follow this workflow:

• receiver widgets displays a button in the main toolbar
• clicking on the button the connection will be automatic if only one connection is available
• if multiple connections are available the user can select the widget inside the dashboard by clicking on it
• all connected element are associated by a colored border
• it is possible to disconnect the widgets by selecting the same button used to connect

We need to make sure we don't lose existing interaction by changing UI behaviors (reference user documentation of current possible combinations)

Review proposal

We could reverse the logic on how we associate widget by showing a new connection panel available only to widgets that can send interactions.
At the moment these are the widgets that can send interactions:

• Map widget can:

  • send viewport filter to other widgets
  • send zoom and center to other widgets
  • send groups and layers information to other widgets

• Table widget can:

  • send column filter and it's own static configured filter
  • send zoom to feature
  • send zoom to bounds

• Legend widget can:

  • send interactive legend filter
  • send updates for layers in legend

The new panel will be available for sender widgets and should show the list of available widgets that can receive the interaction, we could think at this panel as a nested list with checkbox for each widget that can support the connection. We should also allow to target specific sub element of the widget, e.g. a specific map in case of multiple map or the layers in a map, charts, traces.

As already covered in #11627 the widget will implement a new interface to define what kind of interactions the can end or receive and in the UI we could use this information to build the new panel.

We are going to remove the previous behavior of directly interacting with the dashboard to select the widget but we could think to show an highlight border when we hovering a widget on the panel list.

Requirements:

• removal of previous connection interactions and workflow
• introduction of a new panel to sender widgets to connect all other widgets
• review the workflow to match the refactored configuration
• align connection behavior for widgets on map and dashboard

Mockups

This mockup has been created on top of dashboard but we should implement similar concept also for widgets on top of a map.

• Map interactions are currently: viewport filter and center zoom synch

• Table interactions are currently: column filter, zoom to filtered bounds and zoom to features

• Legend interaction is a direct connection to the map

• Proposal of visual connections in the widgets viewport

show-connections.mp4

What kind of improvement you want to add? (check one with "x", remove the others)

• Changes to existing features

Other useful information