Merge pull request #57 from daisybio/rewrite_lena

Add spongeEffects page

angular.json

@@ -101,5 +101,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -28,6 +28,7 @@
     "graphology-layout-force": "^0.2.4",
     "lodash": "^4.17.21",
     "ngx-bootstrap": "^19.0.1",
+    "ngx-dropzone": "^3.1.0",
     "rxjs": "~7.8.0",
     "sigma": "^3.0.0-beta.38",
     "tslib": "^2.3.0",

src/app/app.component.ts

@@ -13,7 +13,8 @@ import {VersionsService} from "./services/versions.service";
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
-  subpages = ['Browse', 'Genes', 'Documentation', 'Download'];
+  title = 'SPONGE-web-frontend';
+  subpages = ['Browse', 'Genes', 'SpongEffects', 'Documentation', 'Download'];
   version: WritableSignal<number>;
 
   constructor(versionsService: VersionsService) {

src/app/app.routes.ts

@@ -10,7 +10,10 @@ import {
 } from "./routes/documentation/browse-functionalities/browse-functionalities.component";
 import {BrowseSidebarComponent} from "./routes/documentation/browse-sidebar/browse-sidebar.component";
 import {MoreComponent} from "./routes/documentation/more/more.component";
+import {SpongEffectsComponent} from "./routes/spongeffects/spongeffects.component";
 import {GenesComponent} from "./routes/genes/genes.component";
+import {ExploreComponent} from "./routes/spongeffects/explore/explore.component";
+import {PredictComponent} from "./routes/spongeffects/predict/predict.component";
 
 export const routes: Routes = [
   {
@@ -59,6 +62,20 @@ export const routes: Routes = [
     path: 'download',
     component: DownloadComponent
   },
+  {
+    path: 'spongeffects',
+    component: SpongEffectsComponent,
+    children: [
+      {
+        path: '',
+        component: ExploreComponent
+      },
+      {
+        path: 'predict',
+        component: PredictComponent
+      }
+    ],
+  },
   {
     path: '**',
     redirectTo: ''

src/app/components/info/info.component.html

@@ -0,0 +1,37 @@
+@if (type() == 'modal') {
+  <div class="card-container">
+    <button mat-button (click)="openDialog()">
+      <mat-icon>info</mat-icon>
+      {{ title() }}
+    </button>
+  </div>
+} @else {
+  <mat-expansion-panel style="margin: 10px">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon style="margin-right: 5px">info</mat-icon>
+        {{ title() }}
+      </mat-panel-title>
+      @if (subtitle(); as subtitle) {
+        <mat-panel-description>
+          {{ subtitle }}
+        </mat-panel-description>
+      }
+    </mat-expansion-panel-header>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </mat-expansion-panel>
+}
+
+<ng-template #dialog>
+  <h1 mat-dialog-title>{{ title() }}</h1>
+  @if (subtitle(); as subtitle) {
+    <h2 mat-dialog-title>{{ subtitle }}</h2>
+  }
+  <mat-dialog-content>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </mat-dialog-content>
+</ng-template>
+
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>

src/app/components/info/info.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoComponent } from './info.component';
+
+describe('InfoComponent', () => {
+  let component: InfoComponent;
+  let fixture: ComponentFixture<InfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InfoComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/info/info.component.ts

@@ -0,0 +1,31 @@
+import {Component, inject, input, viewChild} from '@angular/core';
+import {MatButton} from "@angular/material/button";
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatIcon} from "@angular/material/icon";
+import {MatDialog, MatDialogModule} from "@angular/material/dialog";
+import {NgTemplateOutlet} from "@angular/common";
+
+@Component({
+  selector: 'app-info',
+  imports: [
+    MatButton,
+    MatExpansionModule,
+    MatIcon,
+    MatDialogModule,
+    NgTemplateOutlet
+  ],
+  templateUrl: './info.component.html',
+  styleUrl: './info.component.scss'
+})
+export class InfoComponent {
+  dialog = inject(MatDialog);
+  dialogTemplate = viewChild<any>('dialog');
+
+  title = input<string>('What does this mean?');
+  subtitle = input<string>();
+  type = input<'modal' | 'panel'>('modal');
+
+  openDialog() {
+    this.dialog.open(this.dialogTemplate())
+  }
+}