feat: display instance information

ScriptBeeClient/src/app/components/dialogs/instance-not-allocated-dialog/instance-not-allocated-dialog.component.html

@@ -0,0 +1,18 @@
+<h1 mat-dialog-title style="text-align: center">Instance not allocated</h1>
+<div mat-dialog-content>
+  There is no analysis instance allocated for the project. Having an instance is required for running analysis
+  <br />
+  <p>Do you want to allocate it now ?</p>
+
+  @if (allocateInstanceHandler.isLoading()) {
+    <app-loading-progress-bar title="Allocating instance..."></app-loading-progress-bar>
+  }
+
+  @if (allocateInstanceHandler.error()) {
+    <app-error-state [error]="allocateInstanceHandler.error()!"></app-error-state>
+  }
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onAllocateClick()">ALLOCATE</button>
+  <button mat-button (click)="onCloseClick()">CLOSE</button>
+</div>

ScriptBeeClient/src/app/components/dialogs/instance-not-allocated-dialog/instance-not-allocated-dialog.component.ts

@@ -0,0 +1,56 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { InstanceService } from '../../../services/instances/instance.service';
+import { ErrorStateComponent } from '../../error-state/error-state.component';
+import { LoadingProgressBarComponent } from '../../loading-progress-bar/loading-progress-bar.component';
+import { apiHandler } from '../../../utils/apiHandler';
+
+export interface InstanceNotAllocatedDialogData {
+  projectId: string;
+}
+
+@Component({
+  selector: 'app-instance-not-allocated-dialog',
+  templateUrl: './instance-not-allocated-dialog.component.html',
+  styleUrls: ['./instance-not-allocated-dialog.component.scss'],
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatExpansionModule,
+    MatSelectModule,
+    MatButtonModule,
+    FormsModule,
+    ErrorStateComponent,
+    LoadingProgressBarComponent,
+  ],
+})
+export class InstanceNotAllocatedDialog {
+  allocateInstanceHandler = apiHandler(
+    (params: { projectId: string }) => this.instanceService.allocateInstance(params.projectId),
+    () => {
+      this.dialogRef.close();
+    }
+  );
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: InstanceNotAllocatedDialogData,
+    public dialogRef: MatDialogRef<InstanceNotAllocatedDialog>,
+    private instanceService: InstanceService
+  ) {}
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+
+  onAllocateClick(): void {
+    this.allocateInstanceHandler.execute({
+      projectId: this.data.projectId,
+    });
+  }
+}

ScriptBeeClient/src/app/pages/projects/project-details/analysis/analysis.component.html

@@ -13,7 +13,11 @@
     </as-split-area>
 
     <as-split-area size="35">
-      <app-analysis-output [projectId]="projectId()!" [analysisId]="analysisId()!" />
+      @if (analysisId()) {
+        <app-analysis-output [projectId]="projectId()!" [analysisId]="analysisId()!" />
+      } @else {
+        <div>There are no results since no analysis was run yet</div>
+      }
     </as-split-area>
   </as-split>
 </div>

ScriptBeeClient/src/app/pages/projects/project-details/analysis/analysis.component.ts

@@ -6,6 +6,7 @@ import { AnalysisOutputComponent } from './output/analysis-output.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TreeNode } from '../../../../types/tree-node';
+import { InstanceService } from '../../../../services/instances/instance.service';
 
 @Component({
   selector: 'app-analysis',
@@ -16,6 +17,7 @@ import { TreeNode } from '../../../../types/tree-node';
 export class AnalysisComponent {
   projectId = signal<string | undefined>(undefined);
   analysisId = signal<string | undefined>(undefined);
+  instanceId = signal<string | undefined>(undefined);
 
   selectedFileId = signal<string | null>(null);
 
@@ -24,15 +26,25 @@ export class AnalysisComponent {
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private instanceService: InstanceService
   ) {
     route.queryParamMap.subscribe((params) => {
       this.selectedFileId.set(params.get('fileId'));
     });
 
     route.parent?.paramMap.pipe(takeUntilDestroyed()).subscribe({
       next: (paramMap) => {
-        this.projectId.set(paramMap.get('id') ?? undefined);
+        const id = paramMap.get('id');
+        this.projectId.set(id ?? undefined);
+
+        if (id) {
+          this.instanceService.getCurrentInstance(id).subscribe({
+            next: (instanceInfo) => {
+              this.instanceId.set(instanceInfo.id);
+            },
+          });
+        }
       },
     });
   }

ScriptBeeClient/src/app/pages/projects/project-details/model/currently-loaded-models/currently-loaded-models.component.html

@@ -2,7 +2,8 @@
 
 <div class="currently-loaded-models-content">
   <span>Used Linkers: </span>
-  @for (linker of instanceInfo().linkers; track linker) {
+  <!-- TODO FIXIT(#70): populate from api-->
+  @for (linker of []; track linker) {
     {{ linker }}
   }
   <div>

ScriptBeeClient/src/app/pages/projects/project-details/model/currently-loaded-models/currently-loaded-models.component.ts

@@ -13,7 +13,8 @@ export class CurrentlyLoadedModelsComponent {
   instanceInfo = input.required<InstanceInfo>();
 
   loadedFiles = computed<TreeNode[]>(() => {
-    return convertToTreeNodes(this.instanceInfo().loadedModels);
+    // TODO FIXIT(#70): populate from api
+    return convertToTreeNodes({});
   });
 }
 

ScriptBeeClient/src/app/pages/projects/project-details/model/instance-info/instance-info.component.html

@@ -0,0 +1,6 @@
+<div class="project-model-section-title project-model-content-after-divider">Instance Information</div>
+
+<div class="instance-info-div">
+  <div>Instance Id: {{ instanceInfo().id }}</div>
+  <div>Creation Date: {{ instanceInfo().creationDate | date }}</div>
+</div>

ScriptBeeClient/src/app/pages/projects/project-details/model/instance-info/instance-info.component.scss

@@ -0,0 +1,3 @@
+.instance-info-div {
+  margin-left: 8px;
+}

ScriptBeeClient/src/app/pages/projects/project-details/model/instance-info/instance-info.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { InstanceInfo } from '../../../../../types/instance';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'app-instance-info',
+  templateUrl: './instance-info.component.html',
+  styleUrls: ['./instance-info.component.scss'],
+  imports: [DatePipe],
+})
+export class InstanceInfoComponent {
+  instanceInfo = input.required<InstanceInfo>();
+}

ScriptBeeClient/src/app/pages/projects/project-details/model/link-models/link-models.component.html

@@ -8,7 +8,7 @@
   <mat-form-field class="select-linker" appearance="fill">
     <mat-label>Linker</mat-label>
     <mat-select [value]="selectedLinkerId()" (valueChange)="selectedLinkerId.set($event)">
-      @for (loader of getLinkersResource.value()!; track loader.id) {
+      @for (loader of [{ id: 'id', name: 'linker' }]!; track loader.id) {
         <mat-option [value]="loader.id">
           {{ loader.name }}
         </mat-option>
@@ -27,6 +27,6 @@
   <button class="link-button" mat-flat-button [disabled]="!selectedLinkerId() || linkModelsHandler.isLoading()" (click)="onLinkButtonClick()">Link</button>
 
   @if (!selectedLinkerId()) {
-    <div class="warning">A loader must be selected in order to upload models</div>
+    <div class="warning">A linker must be selected</div>
   }
 </div>

ScriptBeeClient/src/app/pages/projects/project-details/model/link-models/link-models.component.ts

@@ -17,18 +17,20 @@ import { apiHandler } from '../../../../../utils/apiHandler';
 })
 export class LinkModelsComponent {
   projectId = input.required<string>();
+  instanceId = input.required<string>();
 
   selectedLinkerId = signal<string | undefined>(undefined);
 
   getLinkersResource = createRxResourceHandler({
-    loader: () => this.linkerService.getAllLinkers(),
+    request: () => ({
+      projectId: this.projectId(),
+      instanceId: this.instanceId(),
+    }),
+    loader: (params) => this.linkerService.getAllLinkers(params.request.projectId, params.request.instanceId),
   });
 
-  linkModelsHandler = apiHandler(
-    (params: { projectId: string; linkerId: string }) => this.linkerService.linkModels(params.projectId, params.linkerId),
-    (data) => {
-      console.log(data);
-    }
+  linkModelsHandler = apiHandler((params: { projectId: string; instanceId: string; linkerId: string }) =>
+    this.linkerService.linkModels(params.projectId, params.instanceId, params.linkerId)
   );
 
   constructor(private linkerService: LinkerService) {}
@@ -39,6 +41,6 @@ export class LinkModelsComponent {
       return;
     }
 
-    this.linkModelsHandler.execute({ projectId: this.projectId(), linkerId: linkerId });
+    this.linkModelsHandler.execute({ projectId: this.projectId(), instanceId: this.instanceId(), linkerId: linkerId });
   }
 }

ScriptBeeClient/src/app/pages/projects/project-details/model/load-models/load-models.component.ts

@@ -15,15 +15,14 @@ import { LoaderService } from '../../../../../services/loaders/loader.service';
 })
 export class LoadModelsComponent {
   projectId = input.required<string>();
+  instanceId = input.required<string>();
 
   savedFiles = signal<TreeNode[]>([]);
   checkedFiles = signal<TreeNodeWithParent[]>([]);
 
-  loadModelsHandler = apiHandler(
-    (params: { projectId: string; checkedFiles: TreeNode[] }) => this.loaderService.loadModels(params.projectId, params.checkedFiles),
-    (data) => {
-      console.log(data);
-    }
+  loadModelsHandler = apiHandler((params: { projectId: string; instanceId: string; checkedFiles: TreeNode[] }) =>
+    // TODO FIXIT(#14): update with the list of loaders
+    this.loaderService.loadModels(params.projectId, params.instanceId, params.checkedFiles)
   );
 
   constructor(private loaderService: LoaderService) {}
@@ -35,6 +34,7 @@ export class LoadModelsComponent {
   onLoadFilesClick() {
     this.loadModelsHandler.execute({
       projectId: this.projectId(),
+      instanceId: this.instanceId(),
       checkedFiles: this.checkedFiles(),
     });
   }

ScriptBeeClient/src/app/pages/projects/project-details/model/project-model-page.component.html

@@ -6,36 +6,44 @@
   </div>
 } @else {
   <div class="project-details-main-div">
-    <mat-card class="project-details-card" appearance="outlined">
-      <app-upload-models [projectId]="projectId()!"></app-upload-models>
+    @if (currentInstanceInfoResource.isLoading()) {
+      <app-loading-progress-bar title="Loading instance info..."></app-loading-progress-bar>
+    } @else if (currentInstanceInfoResource.error()) {
+      <app-error-state [error]="currentInstanceInfoResource.error()!"></app-error-state>
+    } @else {
+      <mat-card class="project-details-card" appearance="outlined">
+        <app-instance-info [instanceInfo]="currentInstanceInfoResource.value()!" />
 
-      <mat-divider></mat-divider>
+        <app-upload-models [projectId]="projectId()!" [instanceId]="currentInstanceInfoResource.value()!.id" />
 
-      <app-load-models [projectId]="projectId()!"></app-load-models>
+        <mat-divider />
 
-      <mat-divider></mat-divider>
+        <app-load-models [projectId]="projectId()!" [instanceId]="currentInstanceInfoResource.value()!.id" />
 
-      <app-link-models [projectId]="projectId()!"></app-link-models>
+        <mat-divider />
 
-      <mat-divider></mat-divider>
+        <app-link-models [projectId]="projectId()!" [instanceId]="currentInstanceInfoResource.value()!.id" />
 
-      @if (currentInstanceInfoResource.isLoading()) {
-        <app-centered-spinner text="Loading Info"></app-centered-spinner>
-      } @else if (currentInstanceInfoResource.error()) {
-        <app-error-state [error]="currentInstanceInfoResource.error()!"></app-error-state>
-      } @else {
-        <app-currently-loaded-models [instanceInfo]="currentInstanceInfoResource.value()!"></app-currently-loaded-models>
-      }
+        <mat-divider />
 
-      <mat-divider></mat-divider>
+        @if (currentInstanceInfoResource.isLoading()) {
+          <app-centered-spinner text="Loading Info" />
+        } @else if (currentInstanceInfoResource.error()) {
+          <app-error-state [error]="currentInstanceInfoResource.error()!" />
+        } @else {
+          <app-currently-loaded-models [instanceInfo]="currentInstanceInfoResource.value()!" />
+        }
 
-      @if (currentInstanceInfoResource.isLoading()) {
-        <app-centered-spinner text="Loading Info"></app-centered-spinner>
-      } @else if (currentInstanceInfoResource.error()) {
-        <app-error-state [error]="currentInstanceInfoResource.error()!"></app-error-state>
-      } @else {
-        <app-project-context [projectId]="projectId()!" [instanceInfo]="currentInstanceInfoResource.value()!"></app-project-context>
-      }
-    </mat-card>
+        <mat-divider />
+
+        @if (currentInstanceInfoResource.isLoading()) {
+          <app-centered-spinner text="Loading Info" />
+        } @else if (currentInstanceInfoResource.error()) {
+          <app-error-state [error]="currentInstanceInfoResource.error()!" />
+        } @else {
+          <app-project-context [projectId]="projectId()!" [instanceInfo]="currentInstanceInfoResource.value()!" />
+        }
+      </mat-card>
+    }
   </div>
 }

ScriptBeeClient/src/app/pages/projects/project-details/model/project-model-page.component.ts

@@ -14,6 +14,7 @@ import { ProjectContextComponent } from './project-context/project-context.compo
 import { LoadingProgressBarComponent } from '../../../../components/loading-progress-bar/loading-progress-bar.component';
 import { InstanceService } from '../../../../services/instances/instance.service';
 import { CenteredSpinnerComponent } from '../../../../components/centered-spinner/centered-spinner.component';
+import { InstanceInfoComponent } from './instance-info/instance-info.component';
 
 @Component({
   selector: 'app-project-model-page',
@@ -30,6 +31,7 @@ import { CenteredSpinnerComponent } from '../../../../components/centered-spinne
     ProjectContextComponent,
     LoadingProgressBarComponent,
     CenteredSpinnerComponent,
+    InstanceInfoComponent,
   ],
 })
 export class ProjectModelPage {

ScriptBeeClient/src/app/pages/projects/project-details/model/upload-models/upload-models.component.ts

@@ -29,15 +29,20 @@ import { UploadService } from '../../../../../services/upload/upload.service';
 })
 export class UploadModelsComponent {
   projectId = input.required<string>();
+  instanceId = input.required<string>();
 
   selectedLoaderId = signal<string | undefined>(undefined);
 
   getLoadersResource = createRxResourceHandler({
-    loader: () => this.loaderService.getAllLoaders(),
+    request: () => ({
+      projectId: this.projectId(),
+      instanceId: this.instanceId(),
+    }),
+    loader: (params) => this.loaderService.getAllLoaders(params.request.projectId, params.request.instanceId),
   });
 
   uploadModelsHandler = apiHandler(
-    (params: { loaderId: string; projectId: string; files: File[] }) => this.uploadService.uploadModels(params.loaderId, params.projectId, params.files),
+    (params: { loaderId: string; projectId: string; files: File[] }) => this.uploadService.uploadModels(params.projectId, params.loaderId, params.files),
     (data) => {
       console.log(data);
     }