rubenmate / draw-entity-relation Goto Github PK

Background

To ensure the reliability and quality of our software, we need to implement a comprehensive testing framework. This will help us catch bugs early and maintain high standards.

Goals

Develop a testing framework that covers unit and integration tests.
Ensure tests are clear, concise, and maintainable.

Proposed Solution

Choose a testing framework that integrates well with our development tools.
Write clear, concise test cases following best practices for consistency, objectivity, and precision.
Regularly review and update test cases to reflect changes in the software.

Background:

The N:M relations can hold attributes, which is not something the app is prepared right now.

Goal:

Implement a feature that lets the user add attributes to the relations that are configured as N:M.

Proposed Solution:

• Check if the relation is N:M and add a contextual menu to add atrributes
• The implementation is almost the same as a normal entity attribute but the attributes can't be key so there should be some changes.

Background:

Attributes can be determined as key, we need to establish a convention to show visually that an attribute is the key.

Goals:

• Allow the user to see visually which attribute is the key.

Proposed Solution:

Key attribute will be underlined. This follows the E-R most popular convention.

Notes

Right now we are differencing type of attributes with some certain color in the ellipse, we need to set it to transparent color and follow the underline convention.

Background:

I need to decide on the most suitable data format for saving the entity relationship diagrams modeled in our application. This includes determining how entities are linked, storing text labels, and other relevant information (like at some point the coordinates where the objects are placed).

Goals:

Investigate and brainstorm potential data formats for saving entity relationship diagrams.
Evaluate the pros and cons of using XML versus JSON for storing diagram data.

Proposed Solution:

Research various data formats commonly used for storing structured data, such as XML and JSON.

Even though this project will not accept any colaborators I think it would be wise to use a formatter and define some rules so new environments won't introduce different formatting styles.

The linter (and the formatter) would provide some CI/CD possibilities.

• Combine it with husky and run the formatter/linter on a pre commit hook.

Background:

The app state is volatile, when the page is refreshed it will start over.

Goal:

Implement a feature that saves the diagram to localhost so when the page is refreshed it will check if there is something there and load it.

Proposed Solution:

Save the diagram structure in localhost. When the component is mounted check if there is a diagram saved and load it.

Background

To ensure the reliability of the app we should add a continuos integration/deployment pipeline that checks the code and runs the tests.

Goals

Automate testing to streamline the development process.
Use the Github CI/CD solution

Proposed Solution

Set up a GitHub Actions workflow for our CI/CD pipeline. This will automatically trigger on every push to the repository, ensuring that code is continuously integrated and deployed.
Integrate unit tests and integration tests into the pipeline.

Notes

This issue is dependent on #13

Background:

In our application, we frequently encounter scenarios where users need to validate the structure and integrity of graphs. Ensuring that graphs are correctly formed and adhere to specific rules is crucial for accurate analysis and visualization. To streamline this process and enhance user experience, we propose implementing a utility function specifically designed to check the validity of graphs.

Goals:

• Develop a utility function that can validate the structure and integrity of graphs based on predefined rules.

Proposed Solution:

• Define a structure to store the state of the graph in memory
• Define a function that checks that a certain graph is valid or not following the rules in a E-R model.

Background:

In our canvas drawing application for modeling entity relationships, I need to implement the functionality to include entities that are linked to each other. Additionally, I need to address the subproblem of adding text labels to these entities for better visualization and understanding.

Goals:

Enable users to create entities that are linked to each other on the canvas.
Enable users to add text to the created entities.

Proposed Solution:

Implement a mechanism for creating interlinked entities on the canvas, allowing users to establish relationships between them.
Develop a user-friendly interface for adding and editing text labels associated with each entity.

Background:

All the entities should have a key attribute, so instead of giving the user the distinction of choosing the first attribute will always be marked as key.

Goals:

• Implement a system where the first attribute added to an entity is designated as primary/
• Enable users to manage these attributes efficiently through a contextual menu, facilitating easy transitions between primary and secondary status.

Proposed Solution:

The proposed solution involves modifying the current attribute management system to differentiate between primary and secondary attributes. By default, the first attribute added to an entity will be marked as primary. Users will have the ability to add more attributes, which can be converted to key (converting the previous key attribute in a normal attribute).

This issue is related to adding the LaTeX final degree project report.

Background:

The current UI is valid for development but really lacks on what should be the final product.

Goal:

Implement a UI that is clean and respects the UX.

Proposed Solution:

Add some UI library and add a navigation toolbar, footer, buttons, etc

Background:

When users add new attributes, they are automatically positioned based on a default setting. This placement often causes overlapping, making it difficult to visually count or distinguish individual attributes without manually adjusting their positions.

Goal:

Implement a feature that dynamically adjusts the positioning of newly added attributes to prevent overlap, enhancing visibility and usability.

Proposed Solution:

Utilize an algorithm to calculate optimal positions for new attributes based on existing ones. We can define a predefined positions and check if that position that we are going to add has an attribute or not.

Background:

Entities can be related to others and themselves through various types of relations. These relations come with predefined cardinalities that dictate the nature of the relationship.

Goals:

• Allow the user to add a relation vertex (represented as a rhombus) and establish connections between entities.
• Allow the user to specify the cardinality on both sides of the relation.

Proposed Solution:

Introduce a toolbar icon representing the relation vertex (rhombus). This icon should be draggable onto the canvas, allowing entities to form connections with it. Once connected, the resulting edge can be assigned a specific cardinality. This assignment will occur by selecting the edge and choosing from a list of possible cardinalities presented in a contextual menu.

Notes

This issue will cover only the most basic type of relation.

Background:

There is a need to collapse all the entities attributes or it will visually collapse the canvas.

Goals:

Enable users to create entities that are linked to each other on the canvas.
Enable users to add text to the created entities.

Proposed Solution:

Idea here would be to hide by default and allow the user to show a certain entity attributes with a contextual menu.

Notes:

This is dependent on the feature describe in the issue #10

Background:

There should be a button that checks if the diagram is valid and generates a basic sql script for creating the tables.

Goal:

Implement a feature that checks if the graph is valid and generate the sql script.

Proposed Solution:

• Check if the graph is valid
• Generate the sql script ready to copy to clipboard

Notes

Dependent on #12

Background:

There should be a mechanism to control and eliminate duplicate names among attributes, entities, and relationships within the diagram to ensure data integrity and prevent conflicts.

Goal:

Implement a feature that prevents the diagram to have repeated numbers at initialization. The user can still set repeated names but that will result in a validation error.

Proposed Solution:

Check for duplicate attribute names within each entity.
Check for duplicate entity and relation names.

Note

When I say that the user can set repeated names and that will result in a validation error I'm referring to #12

Background:

In our canvas drawing application for modeling entity relationships, I need to implement the functionality to include attributes that are linked to an entity.

Goals:

Enable users to add attributes to an entity.
Enable users to define the type of the attribute. i.e. Primary key.

Proposed Solution:

Choose one of the two ways to represent:

• Ellipses
• Spheres with text on the right. A filled sphere, a hollow sphere and a half-filled sphere should be enought for the different types of attributes.

Background:

I need to choose the right canvas drawing library for our app. If I'm using React, there's the option of the react-diagrams library. Alternatively, there are libraries that don't rely on React and work with vanilla JavaScript, such as:

• maxGraph
• tldraw: Infinite canvas.
• draw.io: JavaScript client-side editor for general diagramming.

Goals:

Evaluate the features, compatibility, and community support of each canvas drawing library.
Determine if integrating a React-based library like react-diagrams offers advantages over vanilla JavaScript libraries.
Select the most suitable canvas drawing library that allows to fullfill the requirements.

Proposed Solution:

Research the features and documentation of react-diagrams and the vanilla JavaScript libraries (maxGraph, tldraw, draw.io).
Experiment with sample implementations or demos to understand each library's functionality and flexibility.

Background:

I need to decide if we want to use a framework like React or stick with plain old JavaScript for the project.

Goals:

Figure out which is better for the project: React or vanilla JavaScript.
Consider stuff like how if it fits our needs and which "drawing" framework to use.

Proposed Solution:

Look into what React offers compared to vanilla JavaScript.