graph split view
Most pages currently display a graph on the left or top of the screen, with another component on the right or bottom, depending on the screen width. To ensure these pages are evenly sized and spaced, we use the GraphSplitView component, which is based on a standard SplitView component.
The GraphSplitView component should be used whenever the graph is displayed on the left side of the screen (in desktop mode).
The SplitView component enables a straightforward layout for placing elements in a two-sided split view in desktop mode. The items can be positioned using six self-explanatory class names: 'left-header', 'right-header', 'left-body', 'right-body', 'left-footer', and 'right-footer'. If a child element of the split view contains the appropriate class name, it is automatically placed in the corresponding slot. Any children without a correct class name are ignored.
In smaller screen sizes, the split view adapts by stacking the right side below the left side, ensuring a responsive layout.
The component also includes three customizable properties:
- className: Applies a style to the overall split view container
- classNameLeft: Styles the left section of the split view
- classNameRight: Styles the right section of the split view
By using these properties, one can customize the appearance of each section of the split view.
The GraphSplitView component extends the SplitView component, providing a pre-configured left side designed to display a graph based on specific properties. This component ensures consistent styling and behavior across all pages utilizing this view by setting default values for the 'className', 'classNameLeft', and 'classNameRight' properties of the SplitView.
Properties:
- algorithm: Specifies the algorithm currently used
- actionButtons: Determines which action buttons are available (e.g., download, color-editor)
- className: Additional classes to be applied to the overall SplitView container
- classNameLeft: Additional classes to be applied to the left section of the SplitView
- classNameRight: Additional classes to be applied to the right section of the SplitView
- classNameGraphCard: Additional classes to be applied to the GraphCard
- graphState: Overrides the graphState of the algorithm (e.g. used by training)
- onMouseOverNode: Custom handler for mouse-over events on graph nodes, can override the algorithm's default * handler (e.g. used by training)
- onMouseOutNode: Custom handler for mouse-out events on graph nodes, can override the algorithm's default handler (e.g. used by training)