feat: model tab navigation

angular.json

@@ -48,7 +48,7 @@
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
-              "namedChunks": false,
+              "namedChunks": true,
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,

package.json

@@ -53,6 +53,7 @@
     "@angular/cli": "^13.3.11",
     "@angular/compiler-cli": "^13.4.0",
     "@angular/language-service": "^13.4.0",
+    "@types/angular-material": "^1.1.77",
     "@types/d3": "^5.7.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.2",

src/app/account/account.base/account.base.component.ts

@@ -10,7 +10,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { FormControl, Validators, FormGroup } from '@angular/forms';
 import { SocialBaseComponent } from '../social.base/social.base.component';
 import { CreateOrganizationComponent } from '../../dialogs/create-organization/create-organization.component';
-import { User } from '@euclia/accounts-client/dist/models/user';
+import { User } from '@euclia/accounts-client';
 
 @Component({
   selector: 'app-account.base',

src/app/account/organizations/organizations.component.ts

@@ -3,7 +3,7 @@ import { User } from '../../jaqpot-client';
 import { OrganizationService } from '../../jaqpot-client/api/organization.service';
 import { DialogsService } from '../../dialogs/dialogs.service';
 import { UserService } from '../../jaqpot-client/api/user.service';
-import { Organization } from '@euclia/accounts-client/dist/models/models';
+import { Organization } from '@euclia/accounts-client';
 
 @Component({
   selector: 'app-organizations',

src/app/app-routing.module.ts

@@ -18,6 +18,11 @@ import { DatasetIdComponent } from './dataset/dataset-id/dataset-id.component';
 import { SearchBaseComponent } from './search/search-base/search-base.component';
 import { JaqpotNotificationsComponent } from './jaqpot-notifications/jaqpot-notifications.component';
 import { HttkmodelsComponent } from './httk/httkmodels/httkmodels.component';
+import { MarkdownComponent } from './base/markdown/markdown.component';
+import { ModelFeaturesComponent } from './models/model-features/model-features.component';
+import { PredictValidateComponent } from './models/predict-validate/predict-validate.component';
+import { CommentsComponent } from './base/comments/comments.component';
+import { ModelMetaComponent } from './models/model-meta/model-meta.component';
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
@@ -58,7 +63,18 @@ const routes: Routes = [
     component: OrganizationBaseComponent,
     canActivate: [AuthGuard],
   },
-  { path: 'model/:id', component: ModelIdComponent },
+  {
+    path: 'model/:id',
+    component: ModelIdComponent, // This component should contain the tab group
+    children: [
+      { path: 'overview', component: MarkdownComponent },
+      { path: 'features', component: ModelFeaturesComponent },
+      { path: 'predict-validate', component: PredictValidateComponent },
+      { path: 'discussion', component: CommentsComponent },
+      { path: 'meta', component: ModelMetaComponent },
+      { path: '', redirectTo: 'overview', pathMatch: 'full' }, // Default redirect to details tab
+    ],
+  },
   { path: 'dataset/:id', component: DatasetIdComponent },
   {
     path: 'workbench',
@@ -75,7 +91,10 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [
+    CommonModule,
+    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),
+  ],
   declarations: [],
   exports: [RouterModule],
 })

src/app/app.component.css

@@ -20,6 +20,11 @@ main {
   padding: 0em 0em;
 }
 
+.logo-text {
+  color: white;
+  text-decoration: none;
+}
+
 .logo {
   margin-left: 8px;
   height: 25%;

src/app/app.component.html

@@ -8,7 +8,7 @@
           </button>
         </div>
 
-        <h2>Jaqpot</h2>
+        <a class="logo-text" routerLink="/home"><h2>Jaqpot</h2></a>
         <span>
           <img class="logo" src="../../assets/favicon.ico" />
         </span>

src/app/bar-components/notification/notification.component.ts

@@ -6,7 +6,7 @@ import { DialogsService } from '../../dialogs/dialogs.service';
 import { OrganizationService } from '../../jaqpot-client/api/organization.service';
 import { UserService } from '../../jaqpot-client/api/user.service';
 import { DatasetService } from '../../jaqpot-client/api/dataset.service';
-import { ModelApiService } from '../../jaqpot-client/api/model.service';
+import { ModelService } from '../../jaqpot-client/api/model.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { interval, throwError } from 'rxjs';
 import { Router } from '@angular/router';
@@ -27,7 +27,7 @@ export class NotificationComponent implements OnInit {
     private userService: UserService,
     private dialogsService: DialogsService,
     private datasetService: DatasetService,
-    private modelService: ModelApiService,
+    private modelService: ModelService,
     private router: Router,
   ) {}