added collaborator banners

src/app/app.module.ts

@@ -127,6 +127,8 @@ import { FromScratchComponent } from './pages/doc/content/start/from-scratch/fro
 import { PrivacyPolicyComponent } from './pages/doc/content/other/privacy-policy/privacy-policy.component';
 import { ExamplesComponent } from './components/playground/examples/examples.component';
 import { CallLandingComponent } from './pages/call-landing/call-landing.component';
+import { ToolsBannerComponent } from './components/other/tools-banner/tools-banner.component';
+import { ToolPanelComponent } from './components/other/tools-banner/tool-panel/tool-panel.component';
 
 
 @NgModule({
@@ -198,6 +200,8 @@ import { CallLandingComponent } from './pages/call-landing/call-landing.componen
         PrivacyPolicyComponent,
         ExamplesComponent,
         CallLandingComponent,
+        ToolsBannerComponent,
+        ToolPanelComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/other/tools-banner/tool-panel/tool-panel.component.html

+<p-card class="d-flex">
+    <div class="tool-banner">
+        <div class=" flex-wrap tool-panel">
+            <a *ngIf="!icon" [href]="link" class="tool-link" target="_blank"
+               [style]="{'font-size': font_size ? font_size : '25pt'}">{{label}}</a>
+            <a *ngIf="icon" [href]="link" target="_blank"><img [src]="icon" [width]="width ? width : 200"></a>
+        </div>
+    </div>
+</p-card>

src/app/components/other/tools-banner/tool-panel/tool-panel.component.scss

+.tool-banner {
+  width: 200px;
+  height: 70px;
+  cursor: pointer;
+}
+
+.tool-panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  margin: auto;
+  justify-content: center;
+  align-content: center;
+}
+
+.tool-link {
+ text-decoration: none;
+}

src/app/components/other/tools-banner/tool-panel/tool-panel.component.spec.ts

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

src/app/components/other/tools-banner/tool-panel/tool-panel.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-tool-panel',
+  templateUrl: './tool-panel.component.html',
+  styleUrls: ['./tool-panel.component.scss']
+})
+export class ToolPanelComponent implements OnInit {
+
+  @Input() label: string = "";
+  @Input() link: string = "";
+  @Input() icon: string | undefined = undefined
+  @Input() font_size: string |undefined= undefined
+  @Input() width: number |undefined = undefined
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  protected readonly undefined = undefined;
+}

src/app/components/other/tools-banner/tools-banner.component.html

+<div class="row align-items-start text-center">
+    <app-tool-panel class="col mt-3" *ngFor="let tool of tool_list" [label]="tool.label" [icon]="tool.icon" [link]="tool.link" [font_size]="tool.font_size" [width]="tool.width"></app-tool-panel>
+</div>

src/app/components/other/tools-banner/tools-banner.component.spec.ts

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

src/app/components/other/tools-banner/tools-banner.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-tools-banner',
+    templateUrl: './tools-banner.component.html',
+    styleUrls: ['./tools-banner.component.scss']
+})
+export class ToolsBannerComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+    }
+
+    public tool_list = [
+        {label: "BiCoN", link: "https://exbio.wzw.tum.de/bicon/"},
+        {label: "BioCypher", link: "https://biocypher.org/", icon:"assets/tools/biocypher.png"},
+        // {label: "DOMINO", link: "http://domino.cs.tau.ac.il/", icon: "assets/tools/domino.png"},
+        {label: "G-Browser", link: "https://exbio.wzw.tum.de/genome-browser/"},
+        {label: "GraphFusion", link: "https://github.com/CarlosJesusGH/GraphFusion"},
+        {label: "GraphSimViz", link: "https://graphsimviz.net/", icon: "assets/tools/graphsimviz.png"},
+        {label: "HitSeekR", link: "https://exbio.wzw.tum.de/hitseekr/", icon: "assets/tools/hitseekr.png"},
+        {label: "Interactive Enrichment Analysis", link: "https://github.com/gladstone-institutes/Interactive-Enrichment-Analysis/", font_size: "20pt"},
+        {label: "mirDIP", link: "https://ophid.utoronto.ca/mirDIP/"},
+        {label: "NAViGaTOR", link: "https://ophid.utoronto.ca/navigator/", icon: "assets/tools/navigator.png"},
+        {label: "NDEx IQuery", link: "https://www.ndexbio.org/iquery/", icon: "assets/tools/iquery.png"},
+        {label: "Epistasis Disease Atlas", link: "https://epistasis-disease-atlas.com", font_size: "20pt"},
+        {label: "NDEx", link: "https://ndexbio.org/#/home", icon: "assets/tools/ndex.png"},
+        {label: "NeEDL - R Shiny App", link: "https://hub.docker.com/r/bigdatainbiomedicine/needl", font_size: "20pt"},
+        {label: "openPIP", link: "https://github.com/BaderLab/openPIP", icon: "assets/tools/openpip.png"},
+        {label: "pathDIP", link: "https://ophid.utoronto.ca/pathDIP", icon: "assets/tools/pathdip.jpg"},
+        {label: "Pathway Figure OCR ", link: "https://pfocr.wikipathways.org", icon: "assets/tools/pfocr.png", width: 100},
+        {label: "ProHarMeD", link: "https://proharmed.zbh.uni-hamburg.de/", icon: "assets/tools/proharmed.png"},
+        {label: "ROBUST-Web", link: "https://robust-web.net/"},
+        {label: "SCANet", link: "https://pypi.org/project/scanet/"},
+        {label: "Seed Connector Algorithm", link: "https://github.com/bwh784/SCA", font_size: "20pt"},
+        {label: "UnPaSt", link: "https://unpast.zbh.uni-hamburg.de", icon: "assets/tools/unpast.png", width: 120},
+        {label: "WikiPathways", link: "https://wikipathways.org", icon: "assets/tools/wikipathways.svg"},
+
+    ]
+}

src/app/pages/home/home.component.html

@@ -2,7 +2,8 @@
     <div class="px-4 py-4">
 
         <div class="alert alert-info alert-dismissible fade show" role="alert">
-  <strong>Drugst.One is available as preprint!</strong> Add Drugst.One now to your application to join the initiative. <a class="btn btn-primary" href="/call">Join</a>
+            <strong>Drugst.One is available as preprint!</strong> Add Drugst.One now to your application to join the
+            initiative. <a class="btn btn-primary" href="/call">Join</a>
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
 
@@ -37,7 +38,6 @@
     </div>
     <div class="row align-items-start text-center">
         <div class="col mt-5">
-
             <div class="d-flex justify-content-center">
                 <p-button
                         label="Integrate drugst.one"
@@ -103,4 +103,10 @@
             </div>
         </div>
     </div>
+    <p-divider></p-divider>
+    <div >
+        <h1 class="display-5 d-flex justify-content-center">
+            Drugst.One Initative</h1>
+        <app-tools-banner></app-tools-banner>
+    </div>
 </div>

src/app/pages/home/home.component.scss

@@ -11,3 +11,4 @@
   min-height: 30px;
   height: 10vw;
 }
+

src/assets/tools/iquery.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 168 96" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" xmlnsSerif="http://www.serif.com/"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <g transform="matrix(1.00115,0,0,1.00115,-316.233,-299.117)">
+        <path
+            d="M476.004,357.34C474.592,358.717 473.114,359.978 471.565,361.124C470.017,362.274 468.49,363.326 466.98,364.28C462.213,366.822 457.633,369.782 452.696,371.907C451.105,372.591 449.483,373.302 447.837,374.023C446.195,374.75 444.557,375.43 442.929,376.059C441.301,376.69 439.666,377.366 438.021,378.094C434.697,379.239 431.403,380.365 428.13,381.471C424.861,382.575 421.531,383.645 418.143,384.678C416.465,385.095 414.823,385.571 413.216,386.107C408.346,387.721 403.072,389.139 398.069,390.167C396.6,390.432 395.219,390.098 393.93,389.155C392.646,388.216 391.89,386.921 391.664,385.276C391.441,383.626 391.715,382.067 392.476,380.593C393.69,378.262 396.377,377.723 398.602,377.411C402.617,376.844 406.82,375.481 410.791,374.554C412.413,374.174 414.066,373.771 415.743,373.352C419.027,372.398 422.289,371.465 425.521,370.547C428.757,369.634 431.984,368.643 435.201,367.576C438.421,366.505 441.622,365.41 444.808,364.282C450.988,362.09 457.287,359.386 463.063,356.059C467.481,353.493 474.124,349.643 476.136,343.894C481.577,322.788 413.755,324.268 418.017,322.959C434.948,321.684 458.422,318.806 474.752,327.857C475.229,328.164 475.66,328.46 476.05,328.751C476.438,329.037 476.872,329.336 477.35,329.642C487.915,337.267 483.68,349.982 476.004,357.34ZM323.533,338.902C324.946,337.524 326.425,336.264 327.973,335.117C329.522,333.968 331.05,332.916 332.56,331.963C337.327,329.42 341.907,326.46 346.844,324.335C348.434,323.651 350.055,322.94 351.701,322.218C353.345,321.493 354.982,320.813 356.61,320.184C358.237,319.551 359.874,318.876 361.52,318.149C364.841,317.003 368.135,315.876 371.407,314.772C374.676,313.666 378.007,312.596 381.396,311.565C383.073,311.149 384.715,310.67 386.325,310.136C391.194,308.521 396.466,307.104 401.472,306.076C402.939,305.81 404.319,306.146 405.608,307.087C406.892,308.026 407.649,309.321 407.874,310.966C408.098,312.616 407.824,314.176 407.061,315.648C405.849,317.98 403.162,318.519 400.936,318.831C396.921,319.397 392.719,320.761 388.748,321.69C387.126,322.069 385.473,322.47 383.796,322.889C380.511,323.842 377.25,324.777 374.018,325.695C370.783,326.608 367.556,327.6 364.337,328.667C361.119,329.739 357.916,330.833 354.729,331.96C348.549,334.152 342.251,336.855 336.475,340.184C332.059,342.751 325.414,346.598 323.402,352.349C317.962,373.455 385.784,371.974 381.52,373.284C364.59,374.559 341.116,377.435 324.786,368.383C324.31,368.078 323.878,367.781 323.49,367.491C323.1,367.205 322.666,366.906 322.19,366.6C311.623,358.974 315.858,346.26 323.533,338.902ZM404.292,345.792L413.935,343.905C414.564,345.954 416.385,347.319 418.399,347.085C420.761,346.81 422.496,344.441 422.275,341.793C422.053,339.143 419.958,337.219 417.595,337.494C415.427,337.746 413.802,339.747 413.705,342.112L403.973,344.017C403.721,343.287 403.331,342.64 402.844,342.11L415.539,317.516C416.68,317.97 417.929,318.154 419.219,318.003C423.874,317.463 427.294,312.792 426.857,307.572C426.42,302.353 422.291,298.56 417.635,299.102C412.981,299.643 409.561,304.313 409.998,309.532C410.221,312.191 411.405,314.483 413.128,316.018L400.391,340.696C400.154,340.647 399.913,340.617 399.667,340.611L398.446,332.307C400.413,331.441 401.722,329.19 401.515,326.724C401.267,323.756 398.919,321.599 396.272,321.907C393.625,322.215 391.681,324.871 391.929,327.838C392.169,330.697 394.344,332.793 396.863,332.679L398.064,340.863C397.317,341.128 396.655,341.588 396.116,342.186L388.289,335.971C388.625,335.19 388.782,334.301 388.705,333.377C388.48,330.689 386.353,328.735 383.955,329.013C381.557,329.292 379.796,331.699 380.02,334.387C380.246,337.075 382.373,339.029 384.771,338.751C385.81,338.63 386.724,338.112 387.415,337.345L395.22,343.544C394.828,344.382 394.626,345.339 394.673,346.34L394.673,346.336L387.142,347.81C386.655,346.141 385.186,345.024 383.559,345.213C381.671,345.433 380.283,347.327 380.461,349.443C380.638,351.56 382.313,353.098 384.201,352.878C385.97,352.673 387.301,350.982 387.312,349.023L394.851,347.547C395.063,348.371 395.441,349.106 395.939,349.708L383.245,375.596C382.183,375.231 381.037,375.094 379.86,375.231C375.141,375.779 371.674,380.515 372.117,385.805C372.56,391.096 376.746,394.941 381.465,394.392C386.183,393.843 389.649,389.109 389.206,383.818C388.967,380.961 387.635,378.522 385.715,376.973L398.32,351.268C398.832,351.407 399.376,351.45 399.931,351.386C400.121,351.364 400.309,351.329 400.491,351.284L403.936,360.169C402.257,361.443 401.184,363.138 401.432,366.094C401.68,369.048 404.492,372.134 407.613,371.772C410.733,371.409 413.026,368.278 412.733,364.779C412.434,361.209 408.135,358.61 405.783,359.249L402.329,350.337C403.571,349.299 404.345,347.621 404.292,345.792ZM399.159,342.173C401.05,341.952 402.728,343.494 402.905,345.614C403.082,347.733 401.694,349.631 399.803,349.851C397.912,350.071 396.234,348.529 396.057,346.409C395.879,344.29 397.268,342.392 399.159,342.173ZM380.088,377.967C383.459,377.575 386.45,380.323 386.766,384.102C387.082,387.882 384.606,391.265 381.235,391.656C377.864,392.048 374.874,389.301 374.558,385.521C374.241,381.741 376.718,378.359 380.088,377.967ZM406.703,360.91C408.932,360.651 410.91,362.468 411.119,364.967C411.328,367.467 409.691,369.703 407.462,369.962C405.232,370.222 403.254,368.405 403.045,365.906C402.836,363.406 404.474,361.169 406.703,360.91ZM396.4,323.442C398.291,323.221 399.969,324.763 400.147,326.883C400.325,329.003 398.935,330.901 397.044,331.12C395.153,331.34 393.475,329.799 393.298,327.679C393.12,325.559 394.51,323.661 396.4,323.442ZM384.071,330.404C385.784,330.205 387.304,331.602 387.465,333.521C387.626,335.442 386.366,337.161 384.655,337.36C382.942,337.559 381.422,336.162 381.261,334.243C381.1,332.322 382.359,330.603 384.071,330.404ZM383.65,346.308C384.998,346.151 386.194,347.25 386.321,348.762C386.448,350.274 385.457,351.627 384.109,351.784C382.761,351.941 381.564,350.841 381.438,349.33C381.311,347.819 382.302,346.465 383.65,346.308ZM417.71,338.864C419.397,338.668 420.894,340.043 421.053,341.935C421.211,343.826 419.971,345.52 418.285,345.716C416.598,345.912 415.101,344.536 414.942,342.645C414.784,340.754 416.024,339.059 417.71,338.864ZM417.862,301.802C421.187,301.415 424.136,304.126 424.448,307.852C424.76,311.58 422.317,314.917 418.993,315.303C415.668,315.69 412.719,312.98 412.407,309.252C412.094,305.525 414.537,302.188 417.862,301.802"
+            style="fill:rgb(0,161,222);" />
+    </g>
+</svg>
\ No newline at end of file