Skip to content

SP 1406 - Box Widget

Hélder Ribeiro requested to merge SP-1406 into develop

Overview

The ability to group/ungroup a set of widgets would greatly improve usability of the Taranta editor. Without this feature, users have to copy-paste the set, and then tweak each of the duplicated widgets so that they are properly displayed in the z-axis (aka layers).

To enable productive use of Taranta in defining complex dashboards, dashboard developers need a way to group and ungroup widgets. A group can be placed, dragged, resized as a single item in the canvas and can be moved up/down the layers as if it were a single widget.

Dependancy

In order to test the box widget, it is necessary to use the branch https://gitlab.com/tango-controls/web/taranta-dashboard/-/tree/SP-1406 of the https://gitlab.com/tango-controls/web/taranta-dashboard/

Demo

  1. Boxwidget basic features: https://drive.google.com/file/d/1tNcStI7mXgDMDExq748vuGub0F0z0vCh/view?usp=sharing
  2. Resize inner widgets: WIP

Code Review

The files most affected by the changes are:

  • widget/Box.tsx: It is the box widget. It has different Inputs, but the important one is the innerWidgets: Widget[]. It is a special property that contains all the widgets contained in the Box Widget. Every widget can be dropped in the Box Widget, also another BoxWidget.
  • EditCanvas.js and EditWidget.js: the files have been modified in order to handle the Edit mode of the box widget. Basically, the main part of code is composed of actions that manage mouse event for addInnerWidget, reorderInnerWidget, dropInnerWidget. There are functions that retrieve and show the content of the inner widget (getInnerWidgetContent); calculate the alignment of the widget, based on the settings and the total size of the box widget (getWidgetsAligned); and check if the user is dropping a box widget in a nested box widget (isBoxWidgetContained). In EditWidget.js file has been added a gray area that permits selecting and moving the Box Widget
  • RunCanvas.js if there is a Box Widget in a run dashboard, getInnerWidgets retrieves and renders the inner widget contained into it.
  • /dashboard/state/reducers/selectedDashboard/lib.ts contains changes to manage Copy/Paste, Duplicate function in order to duplicate also the inner widgets contained in the Box Widget
  • dashboard/state/actionCreators.ts contains the new action created to manage the inner widget: ADD_INNER_WIDGET, REORDER_INNER_WIDGET, DROP_INNER_WIDGET. The implementation of the actions are defined in dashboard/state/sagas.js
Edited by Hélder Ribeiro

Merge request reports