PR jenres/issue-1

[jenres[bot]]

This is an automated pull request to merge changes from jenres/issue-1 into main.

Let's start refactoring the AppComponent class to improve readability and maintainability. We will break down large methods into smaller, more focused methods, ensure that the code follows Angular best practices, update the constructor to use dependency injection properly, and add comments to explain the purpose of each method.

Here is the refactored code:

import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  OnInit,
} from "@angular/core";
import { combineLatest } from "rxjs";
import cytoscape from "cytoscape";
import ciseLayout from "cytoscape-cise";
import { GraphService } from "./graph.service";
cytoscape.use(ciseLayout);

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  @ViewChild("cy") cytoElem: ElementRef;
  cy: cytoscape.Core;
  selectedNodes: string[] = [];
  nodeOriginalColors: { [id: string]: string } = {};

  constructor(private service: GraphService) {}

  ngOnInit(): void {
    this.initializeCytoscape();
  }

  /**
   * Initializes the Cytoscape instance and sets up the graph.
   */
  private initializeCytoscape(): void {
    combineLatest([
      this.service.listElements(),
      this.service.listStyles(),
      this.service.loadLayout(),
    ]).subscribe((value) => {
      this.initCharts(...value);
      this.attachNodeClickHandler();
      this.attachEdgeVisibilityHandlers();
      this.getCompoundNodeSize("n1");
    });
  }

  /**
   * Initializes the charts with the given elements, styles, and layout options.
   * @param elements - The elements to be added to the graph.
   * @param style - The styles to be applied to the graph.
   * @param option - The layout options for the graph.
   */
  private initCharts(
    elements: cytoscape.ElementDefinition[],
    style: cytoscape.Stylesheet[],
    option: cytoscape.LayoutOptions | undefined
  ): void {
    this.cy = cytoscape({
      container: this.cytoElem.nativeElement,
      layout: option,
      style: style,
      elements: elements,
    });

    this.storeOriginalNodeColors();
    this.runInitialLayout();
  }

  /**
   * Stores the original colors of the nodes.
   */
  private storeOriginalNodeColors(): void {
    this.cy.nodes().forEach((node) => {
      this.nodeOriginalColors[node.id()] = node.style("background-color");
    });
  }

  /**
   * Runs the initial layout for specific nodes.
   */
  private runInitialLayout(): void {
    this.cy.$("#n5, #n6, #n7").makeLayout({
      name: "circle",
    }).run();
  }

  /**
   * Attaches a click handler to the nodes.
   */
  private attachNodeClickHandler(): void {
    this.cy.on("tap", "node", (event) => {
      const node = event.target;
      const nodeId = node.id();

      if (this.selectedNodes.includes(nodeId)) {
        this.deselectNode(node);
      } else {
        this.selectNode(node);
      }
    });
  }

  /**
   * Selects a node and changes its color.
   * @param node - The node to be selected.
   */
  private selectNode(node: cytoscape.NodeSingular): void {
    const nodeId = node.id();
    this.selectedNodes.push(nodeId);
    node.style("background-color", "green");
  }

  /**
   * Deselects a node and restores its original color.
   * @param node - The node to be deselected.
   */
  private deselectNode(node: cytoscape.NodeSingular): void {
    const nodeId = node.id();
    const originalColor = this.nodeOriginalColors[nodeId];

    if (originalColor) {
      node.style("background-color", originalColor);
      this.selectedNodes = this.selectedNodes.filter((id) => id !== nodeId);
    }
  }

  /**
   * Attaches handlers to show and hide edges on node hover.
   */
  private attachEdgeVisibilityHandlers(): void {
    this.cy.nodes().on("mouseover", (event) => {
      const node = event.target;
      node.connectedEdges().forEach((edge) => {
        edge.show();
      });
    });

    this.cy.nodes().on("mouseout", (event) => {
      const node = event.target;
      node.connectedEdges().forEach((edge) => {
        edge.hide();
      });
    });
  }

  /**
   * Logs the size of a compound node.
   * @param nodeId - The ID of the node.
   */
  private getCompoundNodeSize(nodeId: string): void {
    const node = this.cy.$(`#${nodeId}`);
    const boundingBox = node.boundingBox();

    const width = boundingBox.w;
    const height = boundingBox.h;

    console.log("Width:", width);
    console.log("Height:", height);
  }
}

This refactored code improves readability by breaking down large methods into smaller, more focused methods and adding comments to explain the purpose of each method. It also follows Angular best practices and ensures that the constructor uses dependency injection properly.

💸 0.06$ (prompt: 0.04$ for 8426 tokens; output: 0.02$ for 1363 tokens)

[jenres[bot]]

Closes #1

[jenres[bot]]

This is an automated pull request to merge changes from jenres/issue-1 into main.

The refactor is now complete. Here is a summary of the changes made:

1. Created a new service file graph-initializer.service.ts:

   • This service handles the initialization logic for the graph.
   • It subscribes to the necessary observables and sets up the Cytoscape instance.

2. Updated app.component.ts:

   • The component now uses the GraphInitializerService for initialization.
   • The event handler methods were removed from the component.

3. Moved event handler methods to a separate service graph-event-handler.service.ts:

   • This service handles the event logic for node clicks and edge visibility.
   • It manages the selection and deselection of nodes and the visibility of edges.

4. Updated app.component.ts to use the new GraphEventHandlerService:

   • The component now uses the GraphEventHandlerService for event handling.
   • The code is more modular and easier to maintain.

5. Cleaned up imports and improved readability:

   • Ensured that only necessary imports are included.
   • Added comments and improved the readability of the code.

If you have any further requests or need additional modifications, please let me know!

💸 0.26$ (prompt: 0.19$ for 38250 tokens; output: 0.07$ for 4451 tokens)

[jenres[bot]]

Closes #1

[jenres[bot]]

This is an automated pull request to merge changes from jenres/issue-1 into main.

To verify the refactored code, we need to run the application and ensure that all features work as expected. This involves:

1. Building the Application: Ensure that the application builds without any errors.
2. Running the Application: Start the application and interact with it to verify functionality.
3. Testing Features: Test the specific features that were refactored to ensure they work correctly.

Let's proceed with these steps.

Step 1: Build the Application

Ensure that the application builds without any errors.

Step 2: Run the Application

Start the application and interact with it to verify functionality.

Step 3: Test Features

Test the specific features that were refactored to ensure they work correctly.

Since I don't have the capability to run the application directly, you will need to perform these steps in your local development environment. Here are the commands you can use:

1. Build the Application:

   ng build

2. Run the Application:

   ng serve

3. Test Features:

   • Open your browser and navigate to http://localhost:4200.
   • Interact with the Cytoscape graph to ensure that nodes can be selected and deselected.
   • Verify that edges are shown/hidden on node hover.
   • Check the console for the size of the compound node.

If you encounter any issues during these steps, please let me know, and I can assist you in resolving them.

💸 0.18$ (prompt: 0.12$ for 24302 tokens; output: 0.06$ for 3825 tokens)

[jenres[bot]]

Closes #1

[jenres[bot]]

This is an automated pull request to merge changes from jenres/issue-1 into main.

The unit tests for the AppComponent have been created in the app.component.spec.ts file. These tests cover the following functionalities:

1. Component Creation: Ensures the component is created successfully.
2. Cytoscape Initialization: Verifies that Cytoscape is initialized correctly.
3. Original Node Colors Storage: Checks that the original colors of the nodes are stored correctly.
4. Node Selection and Deselection: Tests the selection and deselection of nodes.

Next Steps

1. Run the Unit Tests: Ensure that all the tests pass successfully.
2. Review and Refactor Tests: Make any necessary adjustments to the tests for better coverage and readability.

Let's proceed with running the unit tests. To run the unit tests, you can use the Angular CLI command:

ng test

This command will execute the unit tests and provide a report on their status. Please run this command in your development environment to ensure that all tests pass successfully.

Next Steps

1. Run the Unit Tests: Execute the ng test command to run the unit tests.
2. Review Test Results: Check the test results and ensure all tests pass.
3. Make Adjustments if Necessary: If any tests fail, review the code and tests to make necessary adjustments.

Please let me know if you encounter any issues or need further assistance.

💸 0.15$ (prompt: 0.11$ for 22710 tokens; output: 0.04$ for 2620 tokens)

[jenres[bot]]

Closes #1

[jenres[bot]]

This is an automated pull request to merge changes from jenres/issue-1 into main.

The refactored AppComponent class and the corresponding test file have been created. The next step is to run the tests to ensure that everything works correctly.

To run the tests, you can use the Angular CLI command:

ng test

This command will execute the tests and provide feedback on whether they pass or fail.

Please run the tests and let me know if there are any issues or if all tests pass successfully.

💸 0.23$ (prompt: 0.16$ for 32425 tokens; output: 0.07$ for 4385 tokens)

[jenres[bot]]

Closes #1