CALM UI/UX Hack Day

[YoofiTT96]

Related to #300
When: Friday 22nd November 2024
Where: Zoom

Description
We need to develop a user interface (UI) that will enable users to interact with and visualize CALM schemas more intuitively. This UI should present the schema's structure in a user-friendly manner, allowing users to easily navigate through nested objects, arrays, and other complex data types. The goal is to simplify the understanding and manipulation of CALM, making it accessible even to those with limited technical expertise.

Features
Schema Visualization: Implement a tree-like visualization to display the hierarchical structure of the CALM schema. This should include collapsible and expandable nodes for nested elements.

Schema Editor: Provide an interactive editor where users can modify the schema. This editor should support drag-and-drop functionality for reorganizing elements, along with validation to ensure the schema remains compliant with CALM schema standards.

Domain Editor: Provide an interactive editor where users can manage domains. This editor should support drag-and-drop functionality for reorganizing elements, along with validation to ensure the schema remains compliant with CALM schema standards.

Documentation and Help: Integrate tooltips and a help section to guide users through the various features and functionalities of the UI. This should include explanations of CALM schema concepts and common use cases.

Benefits
Creating a UI for CALM will significantly enhance the user experience by providing a clear and interactive way to visually manage. It will reduce the complexity associated with manually editing CALM files and help prevent errors by ensuring that changes are valid in real-time. Additionally, this feature will make CALM schemas more accessible to non-developers, fostering better collaboration across different teams within the organization.

CALM CLI main focus areas to keep in mind for translation to the UI: Generate, Visualise, Validate
Hack day work will revolve around the visualize component

Workflow
Create a fork of this repo and create a branch off the vizualizer branch
**Note that you need to fork the repo with all branch by unchecking the option "fork only main branch" **

Completed work based on merged PRs
#487
#568
#570
#564

Ongoing work based on open PRs
#597

**Pending work based off #487 **
#613
#614
#615
#620
#621