Revert "Migrate to angular standalone components (#3808)"

This reverts commit 76c734d.

visualization/angular.json

@@ -22,7 +22,7 @@
           "options": {
             "outputPath": "dist/webpack",
             "index": "app/index.html",
-            "main": "app/main.ts",
+            "main": "app/app.module.ts",
             "polyfills": "app/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "sass",

visualization/app/app.module.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from "@angular/core/testing"
+import { Store, StoreModule } from "@ngrx/store"
+import { AppModule } from "./app.module"
+import { VersionService } from "./codeCharta/services/version/version.service"
+import { appReducers } from "./codeCharta/state/store/state.manager"
+
+describe("AppModule", () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [AppModule, StoreModule.forRoot(appReducers)]
+        }).compileComponents()
+    })
+
+    it("should properly initialize the store", () => {
+        const store = TestBed.inject(Store)
+        expect(store).toBeTruthy()
+    })
+
+    it("should initialize VersionService correctly", () => {
+        const versionService = TestBed.inject(VersionService)
+        expect(versionService).toBeTruthy()
+    })
+})

visualization/app/app.module.ts

@@ -0,0 +1,83 @@
+import { HttpClientModule } from "@angular/common/http"
+import { APP_INITIALIZER, NgModule } from "@angular/core"
+import { FormsModule, ReactiveFormsModule } from "@angular/forms"
+import { BrowserModule } from "@angular/platform-browser"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
+import { EffectsModule } from "@ngrx/effects"
+import { StoreModule } from "@ngrx/store"
+import { CodeChartaComponent } from "./codeCharta/codeCharta.component"
+import { CodeChartaModule } from "./codeCharta/codeCharta.module"
+import { VersionService } from "./codeCharta/services/version/version.service"
+import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "./codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
+import { AutoFitCodeMapEffect } from "./codeCharta/state/effects/autoFitCodeMapChange/autoFitCodeMap.effect"
+import { LinkColorMetricToHeightMetricEffect } from "./codeCharta/state/effects/linkColorMetricToHeightMetric/linkColorMetricToHeightMetric.effect"
+import { NodeContextMenuCardModule } from "./codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module"
+import { OpenNodeContextMenuEffect } from "./codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect"
+import { RenderCodeMapEffect } from "./codeCharta/state/effects/renderCodeMapEffect/renderCodeMap.effect"
+import { ResetChosenMetricsEffect } from "./codeCharta/state/effects/resetChosenMetrics/resetChosenMetrics.effect"
+import { ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect } from "./codeCharta/state/effects/resetSelectedEdgeMetricWhenItDoesntExistAnymore/resetSelectedEdgeMetricWhenItDoesntExistAnymore.effect"
+import { SaveCcStateEffect } from "./codeCharta/state/effects/saveCcState/saveCcState.effect"
+import { UpdateQueryParametersEffect } from "./codeCharta/state/effects/updateQueryParameters/updateQueryParameters.effect"
+import { SetLoadingIndicatorEffect } from "./codeCharta/state/effects/setLoadingIndicator/setLoadingIndicator.effect"
+import { UnfocusNodesEffect } from "./codeCharta/state/effects/unfocusNodes/unfocusNodes.effect"
+import { UpdateEdgePreviewsEffect } from "./codeCharta/state/effects/updateEdgePreviews/updateEdgePreviews.effect"
+import { UpdateFileSettingsEffect } from "./codeCharta/state/effects/updateFileSettings/updateFileSettings.effect"
+import { UpdateMapColorsEffect } from "./codeCharta/state/effects/updateMapColors/updateMapColors.effect"
+import { UpdateVisibleTopLabelsEffect } from "./codeCharta/state/effects/updateVisibleTopLabels/updateVisibleTopLabels.effect"
+import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect"
+import { appReducers, setStateMiddleware } from "./codeCharta/state/store/state.manager"
+import { ChangelogDialogModule } from "./codeCharta/ui/dialogs/changelogDialog/changelogDialog.module"
+import { dialogs } from "./codeCharta/ui/dialogs/dialogs"
+import { BlacklistSearchPatternEffect } from "./codeCharta/ui/ribbonBar/searchPanel/searchBar/blacklistSearchPattern.effect"
+import { MaterialModule } from "./material/material.module"
+import { IncompatibleMapsDialogModule } from "./codeCharta/ui/filePanel/filePanelDeltaSelector/incompatibleMapsDialog/incompatibleMapsDialog.module"
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] }),
+        EffectsModule.forRoot([
+            UnfocusNodesEffect,
+            AddBlacklistItemsIfNotResultsInEmptyMapEffect,
+            OpenNodeContextMenuEffect,
+            BlacklistSearchPatternEffect,
+            ResetColorRangeEffect,
+            ResetChosenMetricsEffect,
+            UpdateEdgePreviewsEffect,
+            RenderCodeMapEffect,
+            AutoFitCodeMapEffect,
+            UpdateVisibleTopLabelsEffect,
+            LinkColorMetricToHeightMetricEffect,
+            ResetSelectedEdgeMetricWhenItDoesntExistAnymoreEffect,
+            UpdateFileSettingsEffect,
+            SetLoadingIndicatorEffect,
+            SaveCcStateEffect,
+            UpdateQueryParametersEffect,
+            UpdateMapColorsEffect
+        ]),
+        MaterialModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ChangelogDialogModule,
+        CodeChartaModule,
+        NodeContextMenuCardModule,
+        IncompatibleMapsDialogModule
+    ],
+    providers: [
+        VersionService,
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (config: VersionService) => () => config.synchronizeLocalCodeChartaVersion(),
+            deps: [VersionService],
+            multi: true
+        }
+    ],
+    declarations: [...dialogs],
+    bootstrap: [CodeChartaComponent]
+})
+export class AppModule {}
+
+if (typeof window !== "undefined" && !window["__TEST_ENVIRONMENT__"]) {
+    platformBrowserDynamic().bootstrapModule(AppModule)
+}

visualization/app/codeCharta/codeCharta.component.spec.ts

@@ -1,13 +1,14 @@
 import { TestBed } from "@angular/core/testing"
 import { LoadInitialFileService } from "./services/loadInitialFile/loadInitialFile.service"
+import { CodeChartaModule } from "./codeCharta.module"
 import { CodeChartaComponent } from "./codeCharta.component"
 import { setIsLoadingFile } from "./state/store/appSettings/isLoadingFile/isLoadingFile.actions"
 import { Store } from "@ngrx/store"
 
 describe("codeChartaComponent", () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CodeChartaComponent],
+            imports: [CodeChartaModule],
             providers: [{ provide: LoadInitialFileService, useValue: { loadFilesOrSampleFiles: jest.fn() } }]
         })
     })

visualization/app/codeCharta/codeCharta.component.ts

@@ -2,27 +2,10 @@ import { Component, OnInit } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { LoadInitialFileService } from "./services/loadInitialFile/loadInitialFile.service"
 import { setIsLoadingFile } from "./state/store/appSettings/isLoadingFile/isLoadingFile.actions"
-import { ToolBarComponent } from "./ui/toolBar/toolBar.component"
-import { FileExtensionBarComponent } from "./ui/fileExtensionBar/fileExtensionBar.component"
-import { RibbonBarComponent } from "./ui/ribbonBar/ribbonBar.component"
-import { CodeMapComponent } from "./ui/codeMap/codeMap.component"
-import { LegendPanelComponent } from "./ui/legendPanel/legendPanel.component"
-import { LoadingFileProgressSpinnerComponent } from "./ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component"
-import { LogoComponent } from "./ui/logo/logo.component"
 
 @Component({
     selector: "cc-code-charta",
-    templateUrl: "./codeCharta.component.html",
-    standalone: true,
-    imports: [
-        ToolBarComponent,
-        FileExtensionBarComponent,
-        RibbonBarComponent,
-        CodeMapComponent,
-        LegendPanelComponent,
-        LoadingFileProgressSpinnerComponent,
-        LogoComponent
-    ]
+    templateUrl: "./codeCharta.component.html"
 })
 export class CodeChartaComponent implements OnInit {
     isInitialized = false

visualization/app/codeCharta/codeCharta.model.spec.ts

@@ -1,3 +1,4 @@
+import "./codeCharta.module"
 import { stateObjectReplacer, stateObjectReviver } from "./codeCharta.model"
 
 describe("codeChartaModel", () => {

visualization/app/codeCharta/codeCharta.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { CodeChartaComponent } from "./codeCharta.component"
+import { CodeMapModule } from "./ui/codeMap/codeMap.module"
+import { FileExtensionBarModule } from "./ui/fileExtensionBar/fileExtensionBar.module"
+import { LegendPanelModule } from "./ui/legendPanel/legendPanel.module"
+import { LoadingFileProgressSpinnerModule } from "./ui/loadingFileProgressSpinner/loadingFileProgressSpinner.module"
+import { LogoModule } from "./ui/logo/logo.module"
+import { RibbonBarModule } from "./ui/ribbonBar/ribbonBar.module"
+import { ToolBarModule } from "./ui/toolBar/toolBar.module"
+
+@NgModule({
+    imports: [
+        LogoModule,
+        CommonModule,
+        CodeMapModule,
+        LegendPanelModule,
+        RibbonBarModule,
+        ToolBarModule,
+        FileExtensionBarModule,
+        LoadingFileProgressSpinnerModule
+    ],
+    declarations: [CodeChartaComponent],
+    exports: [CodeChartaComponent]
+})
+export class CodeChartaModule {}

visualization/app/codeCharta/state/effects/nodeContextMenu/excludeButton/excludeButton.component.ts

@@ -2,14 +2,11 @@ import { Component, Input } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { addBlacklistItemsIfNotResultsInEmptyMap } from "../../../store/fileSettings/blacklist/blacklist.actions"
-import { MatButton } from "@angular/material/button"
 
 @Component({
     selector: "cc-exclude-button",
     templateUrl: "./excludeButton.component.html",
-    styleUrls: ["../nodeContextMenuButton.component.scss"],
-    standalone: true,
-    imports: [MatButton]
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class ExcludeButtonComponent {
     @Input() codeMapNode: Pick<CodeMapNode, "path" | "type">

visualization/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.spec.ts

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/angular"
 import { TestBed } from "@angular/core/testing"
 import { FlattenButtonsComponent } from "./flattenButtons.component"
+import { FlattenButtonsModule } from "./flattenButtons.module"
 import { NodeType } from "../../../../codeCharta.model"
 import userEvent from "@testing-library/user-event"
 import { Store } from "@ngrx/store"
@@ -12,7 +13,7 @@ describe("flattenButtonsComponent", () => {
     beforeEach(() => {
         mockedStore = { dispatch: jest.fn() }
         TestBed.configureTestingModule({
-            imports: [FlattenButtonsComponent],
+            imports: [FlattenButtonsModule],
             providers: [{ provide: Store, useValue: mockedStore }]
         })
     })

visualization/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.component.ts

@@ -2,14 +2,11 @@ import { Component, Input } from "@angular/core"
 import { Store } from "@ngrx/store"
 import { CodeMapNode } from "../../../../codeCharta.model"
 import { addBlacklistItem, removeBlacklistItem } from "../../../store/fileSettings/blacklist/blacklist.actions"
-import { MatButton } from "@angular/material/button"
 
 @Component({
     selector: "cc-flatten-buttons",
     templateUrl: "./flattenButtons.component.html",
-    styleUrls: ["../nodeContextMenuButton.component.scss"],
-    standalone: true,
-    imports: [MatButton]
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class FlattenButtonsComponent {
     @Input() codeMapNode: Pick<CodeMapNode, "path" | "type" | "isFlattened">

visualization/app/codeCharta/state/effects/nodeContextMenu/flattenButtons/flattenButtons.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { MaterialModule } from "../../../../../material/material.module"
+import { FlattenButtonsComponent } from "./flattenButtons.component"
+
+@NgModule({
+    imports: [CommonModule, MaterialModule],
+    declarations: [FlattenButtonsComponent],
+    exports: [FlattenButtonsComponent]
+})
+export class FlattenButtonsModule {}

visualization/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component.spec.ts

@@ -2,14 +2,15 @@ import { render } from "@testing-library/angular"
 import { TestBed } from "@angular/core/testing"
 import { expect } from "@jest/globals"
 import { FocusButtonsComponent } from "./focusButtons.component"
+import { FocusButtonsModule } from "./focusButtons.module"
 import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
 import { MockStore, provideMockStore } from "@ngrx/store/testing"
 import { currentFocusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/currentFocused.selector"
 
 describe("focusButton", () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [FocusButtonsComponent],
+            imports: [FocusButtonsModule],
             providers: [
                 provideMockStore({
                     selectors: [

visualization/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component.ts

@@ -6,16 +6,11 @@ import { CodeMapNode, CcState } from "../../../../codeCharta.model"
 import { currentFocusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/currentFocused.selector"
 import { focusNode, unfocusAllNodes, unfocusNode } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.actions"
 import { focusedNodePathSelector } from "../../../store/dynamicSettings/focusedNodePath/focusedNodePath.selector"
-import { MatButton } from "@angular/material/button"
-import { AsyncPipe } from "@angular/common"
-import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
 
 @Component({
     selector: "cc-focus-buttons",
     templateUrl: "./focusButtons.component.html",
-    styleUrls: ["../nodeContextMenuButton.component.scss"],
-    standalone: true,
-    imports: [MatButton, AsyncPipe, IsNodeFocusedPipe]
+    styleUrls: ["../nodeContextMenuButton.component.scss"]
 })
 export class FocusButtonsComponent {
     @Input() codeMapNode: Pick<CodeMapNode, "path">

visualization/app/codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+
+import { MaterialModule } from "../../../../../material/material.module"
+import { FocusButtonsComponent } from "./focusButtons.component"
+import { IsNodeFocusedPipe } from "./isNodeFocused.pipe"
+
+@NgModule({
+    imports: [CommonModule, MaterialModule],
+    declarations: [FocusButtonsComponent, IsNodeFocusedPipe],
+    exports: [FocusButtonsComponent]
+})
+export class FocusButtonsModule {}

visualization/app/codeCharta/state/effects/nodeContextMenu/focusButtons/isNodeFocused.pipe.ts

@@ -7,10 +7,7 @@ type IsNodeFocusedType = {
     isParentFocused: boolean
 }
 
-@Pipe({
-    name: "isNodeFocused",
-    standalone: true
-})
+@Pipe({ name: "isNodeFocused" })
 export class IsNodeFocusedPipe implements PipeTransform {
     transform(focusedNodePath: string | undefined, node: Pick<CodeMapNode, "path">): IsNodeFocusedType {
         if (!focusedNodePath || !node) {