Adaptive learning: Redesign edit competency relation section

[JohannesWt]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Server

• Important: I implemented the changes with a very good performance and prevented too many (unnecessary) and too complex database calls.
• I strictly followed the principle of data economy for all database calls.
• I strictly followed the server coding and design guidelines.
• I added multiple integration tests (Spring) related to the features (with a high test coverage).
• I added pre-authorization annotations according to the guidelines and checked the course groups for all new REST Calls (security).
• I documented the Java code using JavaDoc style.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• I strictly followed the client coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

Description

This PR introduces a redesigned section for creating/deleting and updating a relation between course competencies. Therefore a new button has been added to the competency management page which opens an own modal to create relations between competencies. The new graph in the modal distinguishes between Prerequisites and Competencies to make to give the Instructor a hint what to connect.

This PR is the first part of a makeover to convert the competency management page to use signals and make all involved components standalone or replace them completely.

Steps for Testing

Prerequisites:

• 1 Instructor

1. Log in to Artemis
2. Navigate to Competency Management
3. Click the "Edit Relations"-Button
4. Create two or more relations
5. Click on a relation and delete it
6. Click on a relation and update the relation type

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
competency-management.component.ts	88.76%	✅ ❌
competency-relation-graph.component.ts	not found (deleted)	❌
course-competencies-relation-graph.component.ts	96.42%	✅ ❌
course-competencies-relation-modal.component.ts	100%	✅
course-competency-relation-form.component.ts	91.54%	✅ ❌
course-competency-relation-node.component.ts	100%	✅
course-competency-api.service.ts	91.66%	✅ ❌
competency.model.ts	88.15%	✅ ❌

Server

Class/File	Line Coverage	Confirmation (assert/expect)
UpdateCourseCompetencyRelationDTO.java	100%	✅
CompetencyService.java	90%	✅ ❌
CourseCompetencyService.java	90%	✅ ❌
PrerequisiteService.java	90%	✅ ❌
CourseCompetencyResource.java	97%	✅ ❌

Screenshots

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Introduced a new modal for editing course competency relations.
  • Added a graph visualization for course competencies.
  • Enhanced functionality to update course competency relations.
  • Improved user interface with new buttons and components for managing competency relations.
  • Added internationalization support for new modal titles and button texts.

• Bug Fixes

  • Resolved issues related to the management of competency relations.

• Documentation

  • Updated internationalization files for new modal and button texts.

• Chores

  • Removed outdated components and tests related to competency relations.

[coderabbitai]

Walkthrough

This pull request introduces updates to course competency management, including a new Data Transfer Object (DTO) for updating course competency relations, modifications to service constructors, and the addition of methods for handling competency relations. Several components have been added or removed, and user interface changes have been made, along with updates to internationalization files. New test suites have been created for the introduced components, ensuring functionality is covered in testing.

Changes

File Path	Change Summary
src/main/java/de/tum/cit/aet/artemis/atlas/dto/UpdateCourseCompetencyRelationDTO.java	New record added: UpdateCourseCompetencyRelationDTO(RelationType newRelationType)
src/main/java/de/tum/cit/aet/artemis/atlas/service/competency/CompetencyService.java	Constructor signature updated.
src/main/java/de/tum/cit/aet/artemis/atlas/service/competency/CourseCompetencyService.java	Method added: updateCourseCompetencyRelation(...), variable added: private final CourseRepository. Constructor signature updated.
src/main/java/de/tum/cit/aet/artemis/atlas/service/competency/PrerequisiteService.java	Constructor signature updated.
src/main/java/de/tum/cit/aet/artemis/atlas/web/CourseCompetencyResource.java	Method added: updateCompetencyRelation(...).
src/main/webapp/app/course/competencies/competency-management/competency-management-table.component.ts	Property removed: @Input() relations: CompetencyRelation[];
src/main/webapp/app/course/competencies/competency-management/competency-management.component.html	Button added for opening modal, component and property removed.
src/main/webapp/app/course/competencies/competency-management/competency-management.component.ts	Multiple method updates and removals, decorator updated for standalone component.
src/main/webapp/app/course/competencies/competency-relation-graph.component.html	Deleted file.
src/main/webapp/app/course/competencies/competency-relation-graph.component.scss	Deleted file.
src/main/webapp/app/course/competencies/competency-relation-graph.component.ts	Deleted file.
src/main/webapp/app/course/competencies/competency.module.ts	Components removed: CompetencyManagementComponent, CompetencyRelationGraphComponent.
src/main/webapp/app/course/competencies/components/course-competencies-relation-graph/course-competencies-relation-graph.component.html	New component added: <ngx-graph>.
src/main/webapp/app/course/competencies/components/course-competencies-relation-graph/course-competencies-relation-graph.component.scss	New style class added: .course-competencies-graph-container.
src/main/webapp/app/course/competencies/components/course-competencies-relation-graph/course-competencies-relation-graph.component.ts	New component added: CourseCompetenciesRelationGraphComponent with input/output properties.
src/main/webapp/app/course/competencies/components/course-competencies-relation-modal/course-competencies-relation-modal.component.html	New HTML template added for the component.
src/main/webapp/app/course/competencies/components/course-competencies-relation-modal/course-competencies-relation-modal.component.scss	New CSS class added: .course-competencies-graph-modal.
src/main/webapp/app/course/competencies/components/course-competencies-relation-modal/course-competencies-relation-modal.component.ts	New component added: CourseCompetenciesRelationModalComponent.
src/main/webapp/app/course/competencies/components/course-competency-relation-form/course-competency-relation-form.component.html	New HTML template added for the component.
src/main/webapp/app/course/competencies/components/course-competency-relation-form/course-competency-relation-form.component.ts	New class added: CourseCompetencyRelationFormComponent with input/output properties.
src/main/webapp/app/course/competencies/components/course-competency-relation-node/course-competency-relation-node.component.scss	New styles added for class .competency-node.
src/main/webapp/app/course/competencies/components/course-competency-relation-node/course-competency-relation-node.component.ts	New component added: CourseCompetencyRelationNodeComponent with input/output properties.
src/main/webapp/app/course/competencies/services/course-competency-api.service.ts	Method signatures updated to include async, new methods added for updating and retrieving relations.
src/main/webapp/app/entities/competency.model.ts	Interface added: UpdateCourseCompetencyRelationDTO.
src/main/webapp/i18n/de/competency.json	New button and object added for modal title and relation types.
src/main/webapp/i18n/en/competency.json	New object added for modal title and relation types.
src/test/java/de/tum/cit/aet/artemis/atlas/competency/CourseCompetencyIntegrationTest.java	New test method added: void shouldUpdateForInstructor().
src/test/javascript/spec/component/competencies/components/course-competencies-relation-graph.component.spec.ts	New test suite added for CourseCompetenciesRelationGraphComponent.
src/test/javascript/spec/component/competencies/components/course-competencies-relation-modal.component.spec.ts	No alterations made.
src/test/javascript/spec/component/competencies/components/course-competency-relation-form.component.spec.ts	New test suite added for CourseCompetencyRelationFormComponent and UnionFind class.

Possibly related PRs

• Adaptive learning: Add source display to standardized competencies #8638: The main PR introduces a new DTO and updates related services, which may connect to the competency management changes in this PR that involve displaying sources for competencies.
• Adaptive learning: Improve prerequisite import #8658: This PR focuses on improving prerequisite management, which could relate to the competency updates in the main PR, especially regarding how competencies are linked and managed.
• Adaptive learning: Fix an issue that standardized competencies could not be deleted when they had a linked competency #8709: This PR addresses issues with deleting competencies linked to standardized competencies, which may relate to the competency relations introduced in the main PR.
• Adaptive learning: Fix course deletion when competency relations exist #8969: This PR fixes course deletion issues when competency relations exist, which is directly relevant to the changes made in the main PR regarding competency relations.
• Atlas: Fix creation of competency relations #9327: This PR fixes the creation of competency relations, which is directly related to the new functionality introduced in the main PR for managing competency relations.
• Adaptive learning: Change mastery threshold to input field and validate values #9398: This PR enhances the validation of competency attributes, including the mastery threshold, which is relevant to the changes made in the main PR regarding competency management.
• General: Elevate toggle sidebar button #9411: This PR improves the sidebar toggle button, which may not be directly related to the competency changes but enhances the overall user interface where competencies are managed.

Suggested labels

enhancement, documentation, ready to merge, component:AdaptiveLearning

Suggested reviewers

• JohannesStoehr
• MaximilianAnzinger
• florian-glombik
• Jan-Thurner
• N0W0RK
• sarpsahinalp

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between 52f21ec and f1136c2.

📒 Files selected for processing (2)

• src/main/webapp/app/course/competencies/competency-management/competency-management.component.ts (6 hunks)
• src/main/webapp/i18n/en/competency.json (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/main/webapp/app/course/competencies/competency-management/competency-management.component.ts (1)

Pattern src/main/webapp/**/*.ts: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalCase;funcs:camelCase;props:camelCase;no_priv_prefix:true;strings:single_quotes;localize:true;btns:functionality;links:navigation;icons_text:newline;labels:associate;code_style:arrow_funcs,curly_braces,open_braces_same_line,indent_4;memory_leak_prevention:true;routes:naming_schema;chart_framework:ngx-charts;responsive_layout:true

🔇 Additional comments (4)

src/main/webapp/i18n/en/competency.json (1)

175-176: LGTM: New management buttons added correctly.

The new keys importAllButton and editRelationsButton have been added correctly to the courseCompetency.manage section. The translations are clear, concise, and accurately describe the actions they represent.

src/main/webapp/app/course/competencies/competency-management/competency-management.component.ts (3)

29-30: Approved: Transition to standalone component with proper imports

Declaring the component as standalone and providing necessary imports enhances modularity and aligns with Angular's best practices.

---

59-65: Approved: Using inject() for dependency injection

Utilizing the inject() function for dependency injection in standalone components is appropriate and follows Angular's recommendations.

---

117-125: Verify the necessity of wrapping properties with signal() before passing to the modal

In the openCourseCompetenciesRelationModal method, courseId and courseCompetencies are wrapped with signal() before assigning them to the modal instance.

Ensure that the modal component expects these properties as signals. If not, consider passing them directly without wrapping.

[JohannesStoehr]

Code

[github-actions]

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

[pzdr7]

Code

[az108]

Tested on TS4, selecting individual relations is possible like described 👍

[sachmii]

Tetsted on TS4, works as described. I can select and update the relations.

[HawKhiem]

Tested on TS3. Works as described.