Code improvements implement lazy loading in the necessary places of the application

package.json

@@ -5,7 +5,10 @@
     "ng": "ng",
     "start": "ng serve --watch",
     "build": "ng build",
+    "build:stats": "ng build --stats-json",
     "build-prod": "ng build --configuration production",
+    "build-prod:stats": "ng build --configuration production --stats-json",
+    "analyze": "webpack-bundle-analyzer dist/kamu-platform/stats.json",
     "test": "ng test --no-progress --no-watch --browsers ChromeHeadless --code-coverage",
     "test-firefox": "ng test --no-progress --browsers Firefox --code-coverage",
     "lint": "eslint . --ext .ts",
@@ -68,6 +71,7 @@
     "npx": "^10.2.2",
     "rxjs": "^7.8.1",
     "tslib": "^2.0.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "yaml": "^2.4.1",
     "zone.js": "~0.13.3"
   },

src/app/account/account.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AccountComponent } from "./account.component";
+import { DatasetFlowModule } from "src/app/dataset-flow/dataset-flow/dataset-flow.module";
+import { AccountFlowsTabComponent } from "./additional-components/account-flows-tab/account-flows-tab.component";
+import { MatIconModule } from "@angular/material/icon";
+import { PaginationModule } from "src/app/components/pagination-component/pagination.module";
+import { SharedModule } from "src/app/shared/shared/shared.module";
+import { MatDividerModule } from "@angular/material/divider";
+import { DatasetsTabComponent } from "./additional-components/datasets-tab/datasets-tab.component";
+import { DatasetListModule } from "src/app/components/dataset-list-component/dataset-list.module";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatTableModule } from "@angular/material/table";
+import { RouterModule } from "@angular/router";
+import { AngularSvgIconModule } from "angular-svg-icon";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
+@NgModule({
+    declarations: [AccountComponent, AccountFlowsTabComponent, DatasetsTabComponent],
+    imports: [
+        CommonModule,
+        DatasetFlowModule,
+        MatIconModule,
+        MatDividerModule,
+        DatasetListModule,
+        PaginationModule,
+        SharedModule,
+        MatTableModule,
+        RouterModule,
+        AngularSvgIconModule,
+        MatButtonToggleModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule,
+    ],
+})
+export class AccountModule {}

src/app/api/mock/dataset.mock.ts

@@ -20,7 +20,7 @@ import {
     LineageGraphNodeData,
     LineageGraphNodeKind,
     LineageNodeAccess,
-} from "src/app/dataset-view/additional-components/lineage-component/lineage-model";
+} from "src/app/dataset-view/additional-components/lineage-tab/lineage-graph.model";
 import { Node } from "@swimlane/ngx-graph/lib/models/node.model";
 
 export const TEST_DATASET_ID = "did:odf:z4k88e8kmp7wTEePmNDSprhY2TqwDxSiFwHiau8fnUk4V4Cpgu7";

src/app/app-routing.module.ts

@@ -86,19 +86,24 @@ export const routes: Routes = [
             {
                 path: `:${ProjectLinks.URL_PARAM_CATEGORY}`,
                 component: AccountSettingsComponent,
+                loadChildren: () =>
+                    import("./auth/settings/account-settings.module").then((m) => m.AccountSettingsModule),
             },
         ],
     },
     {
         path: `:${ProjectLinks.URL_PARAM_ACCOUNT_NAME}`,
         children: [
-            {
-                path: "",
-                component: AccountComponent,
-            },
             {
                 path: `:${ProjectLinks.URL_PARAM_DATASET_NAME}`,
                 component: DatasetComponent,
+
+                loadChildren: () => import("./dataset-view/dataset.module").then((m) => m.DatasetModule),
+            },
+            {
+                path: "",
+                component: AccountComponent,
+                loadChildren: () => import("./account/account.module").then((m) => m.AccountModule),
             },
         ],
     },

src/app/app.module.ts

@@ -27,7 +27,6 @@ import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatMenuModule } from "@angular/material/menu";
 import { MatButtonModule } from "@angular/material/button";
 import { SearchModule } from "./search/search.module";
-import { DatasetModule } from "./dataset-view/dataset.module";
 import { DatasetService } from "./dataset-view/dataset.service";
 import { DatasetCreateModule } from "./dataset-create/dataset-create.module";
 import { AppHeaderComponent } from "./components/app-header/app-header.component";
@@ -48,7 +47,6 @@ import { DatasetSubscriptionsService } from "./dataset-view/dataset.subscription
 import { SpinnerModule } from "./components/spinner/spinner.module";
 import { DatasetApi } from "./api/dataset.api";
 import { ErrorHandlerService } from "./services/error-handler.service";
-import { AccountSettingsComponent } from "./auth/settings/account-settings.component";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { DatasetListModule } from "./components/dataset-list-component/dataset-list.module";
 import { PaginationModule } from "./components/pagination-component/pagination.module";
@@ -67,10 +65,6 @@ import { apolloCache } from "./apollo-cache.helper";
 import { AdminDashboardComponent } from "./admin-view/admin-dashboard/admin-dashboard.component";
 import { DatasetFlowDetailsModule } from "./dataset-flow/dataset-flow-details/dataset-flow-details.module";
 import { MatSortModule } from "@angular/material/sort";
-import { AccountFlowsTabComponent } from "./account/additional-components/account-flows-tab/account-flows-tab.component";
-import { AccountComponent } from "./account/account.component";
-import { DatasetsTabComponent } from "./account/additional-components/datasets-tab/datasets-tab.component";
-import { AccessTokensTabComponent } from "./auth/settings/tabs/access-tokens-tab/access-tokens-tab.component";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { DynamicTableModule } from "./components/dynamic-table/dynamic-table.module";
 import { AutofocusModule } from "./common/directives/autofocus.module";
@@ -203,17 +197,11 @@ const MatModules = [
         AppHeaderComponent,
         LoginComponent,
         GithubCallbackComponent,
-        AccountComponent,
         NotificationIndicatorComponent,
-        AccountSettingsComponent,
-        DatasetsTabComponent,
         AdminDashboardComponent,
-        AccessTokensTabComponent,
-        AccountFlowsTabComponent,
     ],
     imports: [
-        AppRoutingModule,
-        DatasetModule,
+        //  DatasetModule,
         DatasetCreateModule,
         MetadataBlockModule,
         ModalModule.forRoot(),
@@ -252,6 +240,7 @@ const MatModules = [
         DatasetFlowDetailsModule,
         DynamicTableModule,
         AutofocusModule,
+        AppRoutingModule,
     ],
     providers: [...Services],
     bootstrap: [AppComponent],

src/app/auth/settings/account-settings.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AccessTokensTabComponent } from "./tabs/access-tokens-tab/access-tokens-tab.component";
+import { AccountSettingsComponent } from "./account-settings.component";
+import { RouterModule } from "@angular/router";
+import { AngularSvgIconModule } from "angular-svg-icon";
+import { MatDividerModule } from "@angular/material/divider";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { PaginationModule } from "src/app/components/pagination-component/pagination.module";
+import { MatTableModule } from "@angular/material/table";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+
+@NgModule({
+    declarations: [AccessTokensTabComponent, AccountSettingsComponent],
+    imports: [
+        CommonModule,
+        RouterModule,
+        AngularSvgIconModule,
+        MatDividerModule,
+        ReactiveFormsModule,
+        FormsModule,
+        MatIconModule,
+        PaginationModule,
+        MatTableModule,
+        MatSlideToggleModule,
+    ],
+})
+export class AccountSettingsModule {}

src/app/components/timeline-component/timeline.component.scss

@@ -1,5 +1,4 @@
 @import "var";
-@import "node_modules/bootstrap/dist/css/bootstrap.min";
 
 .timeline-block {
     position: relative;

src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.scss

@@ -7,6 +7,10 @@
                 color: #6c757d;
             }
         }
+
+        .cuppa-dropdown {
+            width: 100%;
+        }
     }
 }
 

src/app/dataset-block/metadata-block/metadata-block.component.spec.ts

@@ -12,7 +12,6 @@ import { NgMultiSelectDropDownModule } from "ng-multiselect-dropdown";
 import { FormsModule } from "@angular/forms";
 import { EventDetailsComponent } from "./components/event-details/event-details.component";
 import { BlockHeaderComponent } from "./components/block-header/block-header.component";
-import { DatasetViewMenuComponent } from "src/app/dataset-view/dataset-view-menu/dataset-view-menu.component";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { MatMenuModule } from "@angular/material/menu";
 import { DatasetViewHeaderComponent } from "src/app/dataset-view/dataset-view-header/dataset-view-header.component";
@@ -25,6 +24,7 @@ import { YamlViewSectionComponent } from "./components/yaml-view-section/yaml-vi
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { DataAccessPanelModule } from "src/app/components/data-access-panel/data-access-panel.module";
 import { SharedModule } from "src/app/shared/shared/shared.module";
+import { DatasetViewMenuModule } from "src/app/dataset-view/dataset-view-menu/dataset-view-menu/dataset-view-menu.module";
 
 describe("MetadataBlockComponent", () => {
     let component: MetadataBlockComponent;
@@ -37,7 +37,6 @@ describe("MetadataBlockComponent", () => {
                 BlockNavigationComponent,
                 EventDetailsComponent,
                 BlockHeaderComponent,
-                DatasetViewMenuComponent,
                 DatasetViewHeaderComponent,
                 SearchAdditionalButtonsComponent,
                 SearchAdditionalButtonsNavComponent,
@@ -59,6 +58,7 @@ describe("MetadataBlockComponent", () => {
                 DataAccessPanelModule,
                 RouterModule,
                 SharedModule,
+                DatasetViewMenuModule,
             ],
             providers: [
                 DatasetApi,

src/app/dataset-block/metadata-block/metadata-block.module.ts

@@ -8,7 +8,6 @@ import { EventDetailsComponent } from "./components/event-details/event-details.
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MetadataBlockComponent } from "./metadata-block.component";
-import { DatasetModule } from "src/app/dataset-view/dataset.module";
 import { BlockHeaderComponent } from "./components/block-header/block-header.component";
 import { BlockNavigationComponent } from "./components/block-navigation/block-navigation.component";
 import { MatMenuModule } from "@angular/material/menu";
@@ -48,6 +47,9 @@ import { SetDataSchemaEventComponent } from "./components/event-details/componen
 import { UnsupportedEventComponent } from "./components/event-details/components/unsupported-event/unsupported-event.component";
 import { TopicsPropertyComponent } from "./components/event-details/components/common/topics-property/topics-property.component";
 import { TimePropertyComponent } from "./components/event-details/components/common/time-property/time-property.component";
+import { AngularMultiSelectModule } from "angular2-multiselect-dropdown";
+import { DatasetViewMenuModule } from "src/app/dataset-view/dataset-view-menu/dataset-view-menu/dataset-view-menu.module";
+import { DatasetViewHeaderModule } from "src/app/dataset-view/dataset-view-header/dataset-view-header/dataset-view-header.module";
 
 @NgModule({
     declarations: [
@@ -91,7 +93,6 @@ import { TimePropertyComponent } from "./components/event-details/components/com
     ],
     imports: [
         CommonModule,
-        DatasetModule,
         MatMenuModule,
         MatDividerModule,
         FormsModule,
@@ -102,6 +103,9 @@ import { TimePropertyComponent } from "./components/event-details/components/com
         DisplayTimeModule,
         DisplayHashModule,
         SharedModule,
+        AngularMultiSelectModule,
+        DatasetViewMenuModule,
+        DatasetViewHeaderModule,
     ],
     exports: [MetadataBlockComponent],
 })

src/app/dataset-flow/dataset-flow-details/dataset-flow-details.module.ts

@@ -1,15 +1,17 @@
+import { DatasetViewHeaderModule } from "./../../dataset-view/dataset-view-header/dataset-view-header/dataset-view-header.module";
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MatIconModule } from "@angular/material/icon";
 import { MatDividerModule } from "@angular/material/divider";
 import { MatMenuModule } from "@angular/material/menu";
 import { RouterModule } from "@angular/router";
 import { AngularSvgIconModule } from "angular-svg-icon";
-import { DatasetModule } from "src/app/dataset-view/dataset.module";
 import { DatasetFlowDetailsComponent } from "./dataset-flow-details.component";
 import { FlowDetailsHistoryTabComponent } from "./tabs/flow-details-history-tab/flow-details-history-tab.component";
 import { FlowDetailsSummaryTabComponent } from "./tabs/flow-details-summary-tab/flow-details-summary-tab.component";
 import { FlowDetailsLogsTabComponent } from "./tabs/flow-details-logs-tab/flow-details-logs-tab.component";
+import { DatasetViewMenuModule } from "src/app/dataset-view/dataset-view-menu/dataset-view-menu/dataset-view-menu.module";
+import { SharedModule } from "src/app/shared/shared/shared.module";
 
 @NgModule({
     declarations: [
@@ -22,10 +24,12 @@ import { FlowDetailsLogsTabComponent } from "./tabs/flow-details-logs-tab/flow-d
         CommonModule,
         MatIconModule,
         MatDividerModule,
-        DatasetModule,
         RouterModule,
         AngularSvgIconModule,
         MatMenuModule,
+        DatasetViewHeaderModule,
+        DatasetViewMenuModule,
+        SharedModule,
     ],
 })
 export class DatasetFlowDetailsModule {}

src/app/dataset-flow/dataset-flow/dataset-flow.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TileBaseWidgetComponent } from "src/app/common/components/tile-base-widget/tile-base-widget.component";
+import { FlowsTableComponent } from "src/app/common/components/flows-table/flows-table.component";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatMenuModule } from "@angular/material/menu";
+import { NgbPopoverModule } from "@ng-bootstrap/ng-bootstrap";
+import { RouterModule } from "@angular/router";
+import { AngularSvgIconModule } from "angular-svg-icon";
+import { MatIconModule } from "@angular/material/icon";
+import { SharedModule } from "src/app/shared/shared/shared.module";
+import { MatTableModule } from "@angular/material/table";
+import { FormsModule } from "@angular/forms";
+import { AngularMultiSelectModule } from "angular2-multiselect-dropdown";
+import { MatButtonModule } from "@angular/material/button";
+
+@NgModule({
+    declarations: [TileBaseWidgetComponent, FlowsTableComponent],
+    imports: [
+        CommonModule,
+        MatDividerModule,
+        MatMenuModule,
+        NgbPopoverModule,
+        RouterModule,
+        AngularSvgIconModule,
+        MatIconModule,
+        SharedModule,
+        MatTableModule,
+        FormsModule,
+        AngularMultiSelectModule,
+        MatButtonModule,
+    ],
+    exports: [TileBaseWidgetComponent, FlowsTableComponent],
+})
+export class DatasetFlowModule {}

src/app/dataset-view/additional-components/data-component/data.component.html → src/app/dataset-view/additional-components/data-tab/data-component/data.component.html

@@ -1,4 +1,4 @@
-<div class="query-container">
+<div class="query-container" *ngIf="datasetBasics">
     <app-search-and-schemas-section [disableSearch]="true"></app-search-and-schemas-section>
     <div class="search-result-container__content">
         <app-query-and-result-sections