feat(agora): migration Home component (AG-1547) (#2855)

Sage-Bionetworks · Sep 25, 2024 · 04ef96f · 04ef96f
1 parent 9779db6
commit 04ef96f
Show file tree

Hide file tree

Showing 16 changed files with 477 additions and 0 deletions.
diff --git a/apps/agora/app/src/app/app.routes.ts b/apps/agora/app/src/app/app.routes.ts
@@ -1,6 +1,15 @@
 import { Route } from '@angular/router';
 
 export const routes: Route[] = [
+  {
+    path: '',
+    loadChildren: () => import('@sagebionetworks/agora/home').then((routes) => routes.routes),
+    data: {
+      title: "Agora | Explore Alzheimer's Disease Genes",
+      description:
+        "Explore transcriptomic, proteomic, and metabolomic evidence for whether or not genes are associated with Alzheimer's disease using the Agora portal.",
+    },
+  },
   {
     path: 'about',
     loadChildren: () => import('@sagebionetworks/agora/about').then((routes) => routes.routes),

diff --git a/libs/agora/home/.eslintrc.json b/libs/agora/home/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "env": {
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:jest/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "agora",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "agora",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/agora/home/README.md b/libs/agora/home/README.md
@@ -0,0 +1,7 @@
+# agora-home
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test agora-home` to execute the unit tests.
diff --git a/libs/agora/home/jest.config.ts b/libs/agora/home/jest.config.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'agora-home',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/libs/agora/home',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};
diff --git a/libs/agora/home/project.json b/libs/agora/home/project.json
@@ -0,0 +1,27 @@
+{
+  "name": "agora-home",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/agora/home/src",
+  "prefix": "agora",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/agora/home"],
+      "options": {
+        "jestConfig": "libs/agora/home/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "lint-fix": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "fix": true
+      }
+    }
+  },
+  "tags": ["type:feature", "scope:agora", "language:typescript"],
+  "implicitDependencies": []
+}
diff --git a/libs/agora/home/src/index.ts b/libs/agora/home/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/home.routes';
diff --git a/libs/agora/home/src/lib/home.component.html b/libs/agora/home/src/lib/home.component.html
@@ -0,0 +1,74 @@
+<div id="home-page">
+  <div class="section">
+    <div class="background">
+      <img [src]="backgroundBox1Path" alt="background" />
+      <img [src]="backgroundBox2Path" alt="background" />
+      <img [src]="backgroundBox3Path" alt="background" />
+    </div>
+    <div class="content">
+      <div class="text-marquee">
+        <div>
+          <h1 class="home-heading">Discover Alzheimer&#39;s Disease Genes</h1>
+        </div>
+        <p class="description mb-lg">
+          Agora hosts high-dimensional human transcriptomic, proteomic, and metabolomic evidence for
+          whether or not genes are associated with Alzheimer’s disease (AD). Agora also contains a
+          list of over 900 nascent AD drug targets that were nominated by researchers from the
+          National Institute on Aging's
+          <a class="link" href="https://www.nia.nih.gov/research/amp-ad" target="_blank">AMP-AD</a>
+          consortium and <a class="link" href="https://treatad.org/" target="_blank">TREAT-AD</a>
+          centers, as well as by other AD research teams.
+          <a
+            class="link"
+            href="https://help.adknowledgeportal.org/apd/Agora-Resources.2646671361.html"
+            target="_blank"
+          >
+            Learn more
+          </a>
+        </p>
+      </div>
+      <div class="card-container">
+        <button routerLink="/genes/comparison" class="card-link">
+          <div class="card">
+            <div>
+              <h2>Gene Comparison</h2>
+              <p>
+                Compare differential RNA and protein expression results for 20k+ human genes in AD.
+                Build custom result sets by sorting, filtering, and searching for genes of interest.
+              </p>
+            </div>
+            <div class="icon-container">
+              <img [src]="geneComparisonIconPath" alt="gene icon" />
+              <img [src]="arrowPath" alt="arrow" />
+            </div>
+          </div>
+        </button>
+        <div class="card">
+          <div>
+            <h2>Gene Search</h2>
+            <p>
+              Search for a gene by name or Ensembl gene ID to view related experimental evidence,
+              find detailed information about nominations, and explore its association with AD.
+            </p>
+          </div>
+          <!-- <gene-search [location]="'home'"></gene-search> -->
+        </div>
+        <button routerLink="/genes/nominated-targets" class="card-link">
+          <div class="card">
+            <div>
+              <h2>Nominated Targets</h2>
+              <p>
+                Browse the list of over 900 genes that research teams have nominated as potential
+                new therapeutic targets for AD treatment or prevention.
+              </p>
+            </div>
+            <div class="icon-container">
+              <img [src]="nominatedTargetsIconPath" alt="target icon" />
+              <img [src]="arrowPath" alt="arrow" />
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/libs/agora/home/src/lib/home.component.scss b/libs/agora/home/src/lib/home.component.scss
@@ -0,0 +1,174 @@
+@import 'libs/agora/styles/src/lib/variables';
+@import 'libs/agora/styles/src/lib/mixins';
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  position: relative;
+  color: var(--color-primary);
+  max-width: 90vw;
+  margin: 0 auto;
+  padding: var(--spacing-md) 0;
+
+  @media (min-width: 750px) {
+    max-width: 80vw;
+  }
+
+  @media (min-width: 990px) {
+    background-color: none;
+  }
+
+  @include respond-to('ex-large') {
+    padding: var(--spacing-xl) 100px;
+  }
+}
+
+.content {
+  max-width: 1350px;
+  margin: 0 auto;
+}
+
+.text-marquee {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  padding: var(--spacing-md);
+}
+
+.description {
+  width: 70%;
+  font-size: var(--font-size-xl);
+  line-height: 2rem;
+
+  @media (min-width: 990px) {
+    width: 100%;
+  }
+
+  a {
+    white-space: nowrap;
+  }
+
+  p {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.home-heading {
+  color: var(--color-primary);
+  font-size: 60px;
+  line-height: 68px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.home-search {
+  width: 100%;
+  max-width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.card-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--spacing-lg);
+
+  @media (min-width: 990px) {
+    flex-wrap: nowrap;
+  }
+
+  > div,
+  > button {
+    width: 100%;
+
+    @media (min-width: 990px) {
+      width: 33%;
+    }
+  }
+}
+
+.card-link {
+  border: none;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  appearance: none;
+  text-align: unset;
+  cursor: pointer;
+
+  .card {
+    height: 100%;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: white;
+  box-sizing: border-box;
+  border-radius: 20px;
+  border: 1px solid var(--color-border);
+  padding: var(--spacing-lg);
+  flex-shrink: 0;
+
+  h2 {
+    font-weight: bold;
+    font-size: var(--font-size-xxl);
+  }
+
+  p {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xxl);
+  }
+
+  .icon-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+}
+
+.background {
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  img {
+    position: absolute;
+    width: 30vh;
+
+    &:first-child {
+      position: absolute;
+      bottom: 12vh;
+      left: -5vh;
+      transform: rotate(260deg);
+    }
+
+    &:nth-child(2) {
+      position: absolute;
+      bottom: 60vh;
+      right: -10vh;
+      transform: rotate(30deg);
+    }
+
+    &:last-child {
+      position: absolute;
+      width: 45vh;
+      bottom: 0;
+      right: -18vh;
+      transform: rotate(125deg);
+    }
+  }
+}
diff --git a/libs/agora/home/src/lib/home.component.spec.ts b/libs/agora/home/src/lib/home.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [],
+      providers: [provideHttpClient()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});