diff --git a/apps/agora/app/.env.example b/apps/agora/app/.env.example index 2533c6b269..ee34609238 100644 --- a/apps/agora/app/.env.example +++ b/apps/agora/app/.env.example @@ -2,6 +2,5 @@ API_DOCS_URL="http://localhost:8000/api-docs" APP_VERSION="local" CSR_API_URL="http://localhost:8000/api/v1" SSR_API_URL="http://agora-api:3333/v1" -ROLLBAR_TOKEN="e788198867474855a996485580b08d03" TAG_NAME="local" -GOOGLE_TAG_MANAGER_ID="" \ No newline at end of file +GOOGLE_TAG_MANAGER_ID="" diff --git a/apps/agora/app/src/app/app.component.ts b/apps/agora/app/src/app/app.component.ts index 465ec28424..af6ab33e72 100644 --- a/apps/agora/app/src/app/app.component.ts +++ b/apps/agora/app/src/app/app.component.ts @@ -6,7 +6,7 @@ import { AGORA_LOADING_ICON_COLORS, ConfigService } from '@sagebionetworks/agora import { SearchInputComponent } from '@sagebionetworks/agora/ui'; import { footerLinks, headerLinks } from '@sagebionetworks/agora/util'; import { LOADING_ICON_COLORS } from '@sagebionetworks/explorers/constants'; -import { MetaTagService, VersionService } from '@sagebionetworks/explorers/services'; +import { LoggerService, MetaTagService, VersionService } from '@sagebionetworks/explorers/services'; import { ErrorOverlayComponent, FooterComponent, @@ -47,6 +47,7 @@ import { ToastModule } from 'primeng/toast'; }) export class AppComponent implements OnInit { private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); configService = inject(ConfigService); dataVersionService = inject(DataVersionService); @@ -75,22 +76,32 @@ export class AppComponent implements OnInit { } getDataVersion() { + this.logger.log('AppComponent: Loading data version'); + this.versionService .getDataVersion$(this.dataVersionService) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe({ next: (v) => (this.dataVersion = v), - error: () => (this.dataVersion = 'unknown'), + error: () => { + this.dataVersion = 'unknown'; + this.logger.error('Failed to get data version'); + }, }); } getSiteVersion() { + this.logger.log('AppComponent: Loading site version'); + this.versionService .getSiteVersion$(this.configService.config) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe({ next: (v) => (this.siteVersion = v), - error: () => (this.siteVersion = 'unknown'), + error: () => { + this.siteVersion = 'unknown'; + this.logger.error('Failed to get site version'); + }, }); } } diff --git a/apps/agora/app/src/app/app.routes.ts b/apps/agora/app/src/app/app.routes.ts index 81738389ad..682ef05654 100644 --- a/apps/agora/app/src/app/app.routes.ts +++ b/apps/agora/app/src/app/app.routes.ts @@ -4,6 +4,7 @@ import { ROUTE_PATHS, SUPPORT_EMAIL, } from '@sagebionetworks/agora/config'; +import { SynapseWikiParams } from '@sagebionetworks/explorers/models'; export const routes: Route[] = [ { @@ -17,19 +18,35 @@ export const routes: Route[] = [ }, { path: ROUTE_PATHS.ABOUT, - loadChildren: () => import('@sagebionetworks/agora/about').then((routes) => routes.routes), + loadChildren: () => + import('@sagebionetworks/explorers/shared').then((routes) => routes.wikiHeroRoute), data: { title: 'About Agora', description: 'Agora is funded by the National Institute on Aging, and is developed and maintained by Sage Bionetworks.', + heroTitle: 'About', + heroBackgroundImagePath: DEFAULT_HERO_BACKGROUND_IMAGE_PATH, + className: 'about-page-content', + wikiParams: { + ownerId: 'syn25913473', + wikiId: '612058', + } as SynapseWikiParams, }, }, { path: ROUTE_PATHS.NEWS, - loadChildren: () => import('@sagebionetworks/agora/news').then((routes) => routes.routes), + loadChildren: () => + import('@sagebionetworks/explorers/shared').then((routes) => routes.wikiHeroRoute), data: { title: 'News | Agora Releases', description: "See what's new in Agora, from new features to our latest data updates.", + heroTitle: 'Agora News', + heroBackgroundImagePath: DEFAULT_HERO_BACKGROUND_IMAGE_PATH, + className: 'news-page-content', + wikiParams: { + ownerId: 'syn25913473', + wikiId: '611426', + } as SynapseWikiParams, }, }, { diff --git a/apps/model-ad/app/src/app/app.component.ts b/apps/model-ad/app/src/app/app.component.ts index 743bda8a91..5266b9f033 100644 --- a/apps/model-ad/app/src/app/app.component.ts +++ b/apps/model-ad/app/src/app/app.component.ts @@ -2,7 +2,7 @@ import { Component, DestroyRef, inject, OnInit } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { RouterModule } from '@angular/router'; import { LOADING_ICON_COLORS } from '@sagebionetworks/explorers/constants'; -import { MetaTagService, VersionService } from '@sagebionetworks/explorers/services'; +import { LoggerService, MetaTagService, VersionService } from '@sagebionetworks/explorers/services'; import { ErrorOverlayComponent, FooterComponent, @@ -47,6 +47,7 @@ import { ToastModule } from 'primeng/toast'; }) export class AppComponent implements OnInit { private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); configService = inject(ConfigService); dataVersionService = inject(DataVersionService); @@ -75,22 +76,32 @@ export class AppComponent implements OnInit { } getDataVersion() { + this.logger.log('AppComponent: Loading data version'); + this.versionService .getDataVersion$(this.dataVersionService) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe({ next: (v) => (this.dataVersion = v), - error: () => (this.dataVersion = 'unknown'), + error: () => { + this.dataVersion = 'unknown'; + this.logger.error('Failed to get data version'); + }, }); } getSiteVersion() { + this.logger.log('AppComponent: Loading site version'); + this.versionService .getSiteVersion$(this.configService.config) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe({ next: (v) => (this.siteVersion = v), - error: () => (this.siteVersion = 'unknown'), + error: () => { + this.siteVersion = 'unknown'; + this.logger.error('Failed to get site version'); + }, }); } } diff --git a/docs/products/services.md b/docs/products/services.md index dde0bdcab0..8504dc7d18 100644 --- a/docs/products/services.md +++ b/docs/products/services.md @@ -165,16 +165,6 @@ This library was generated with Nx. - **Available Tasks**: test, lint - **Documentation**: [README](https://github.com/Sage-Bionetworks/sage-monorepo/blob/main/libs/agora/services/README.md) -#### agora-shared - -This library was generated with Nx. - -- **Type**: feature -- **Language**: typescript -- **Location**: `libs/agora/shared` -- **Available Tasks**: test, lint, lint-fix -- **Documentation**: [README](https://github.com/Sage-Bionetworks/sage-monorepo/blob/main/libs/agora/shared/README.md) - #### agora-storybook This library was generated with Nx. diff --git a/libs/agora/about/.eslintrc.json b/libs/agora/about/.eslintrc.json deleted file mode 100644 index 7a4a914a6d..0000000000 --- a/libs/agora/about/.eslintrc.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "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" - } - ], - "@angular-eslint/prefer-standalone": "off" - } - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] -} diff --git a/libs/agora/about/README.md b/libs/agora/about/README.md deleted file mode 100644 index b6019bc06c..0000000000 --- a/libs/agora/about/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# agora-about - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `nx test agora-about` to execute the unit tests. diff --git a/libs/agora/about/jest.config.ts b/libs/agora/about/jest.config.ts deleted file mode 100644 index 398ffa52f8..0000000000 --- a/libs/agora/about/jest.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'agora-about', - preset: '../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, - coverageDirectory: '../../../coverage/libs/agora/about', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/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/about/project.json b/libs/agora/about/project.json deleted file mode 100644 index 4cba4675f7..0000000000 --- a/libs/agora/about/project.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "agora-about", - "$schema": "../../../node_modules/nx/schemas/project-schema.json", - "projectType": "library", - "sourceRoot": "libs/agora/about/src", - "prefix": "agora", - "tags": ["type:feature", "scope:agora", "language:typescript"], - "targets": { - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/libs/agora/about"], - "options": { - "jestConfig": "libs/agora/about/jest.config.ts", - "tsConfig": "libs/agora/about/tsconfig.spec.json" - } - }, - "lint": { - "executor": "@nx/eslint:lint" - }, - "lint-fix": { - "executor": "@nx/eslint:lint", - "options": { - "fix": true - } - } - } -} diff --git a/libs/agora/about/src/index.ts b/libs/agora/about/src/index.ts deleted file mode 100644 index ba99c2a6c6..0000000000 --- a/libs/agora/about/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './lib/about.routes'; diff --git a/libs/agora/about/src/lib/about.component.html b/libs/agora/about/src/lib/about.component.html deleted file mode 100644 index 597cd730e6..0000000000 --- a/libs/agora/about/src/lib/about.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-

About

-
-
-
- -
-
-
- -
-
-
diff --git a/libs/agora/about/src/lib/about.component.scss b/libs/agora/about/src/lib/about.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/libs/agora/about/src/lib/about.component.spec.ts b/libs/agora/about/src/lib/about.component.spec.ts deleted file mode 100644 index 57ec0c5cea..0000000000 --- a/libs/agora/about/src/lib/about.component.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { AboutComponent } from './about.component'; - -describe('AboutComponent', () => { - let component: AboutComponent; - - beforeEach(() => { - component = new AboutComponent(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/libs/agora/about/src/lib/about.component.stories.ts b/libs/agora/about/src/lib/about.component.stories.ts deleted file mode 100644 index 47107481ef..0000000000 --- a/libs/agora/about/src/lib/about.component.stories.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; -import { WikiComponent } from '@sagebionetworks/agora/shared'; -import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; -import { AboutComponent } from './about.component'; - -const meta: Meta = { - component: AboutComponent, - title: 'Pages/About', - decorators: [ - applicationConfig({ - providers: [provideHttpClient(withInterceptorsFromDi())], - }), - moduleMetadata({ - imports: [CommonModule, WikiComponent], - }), - ], -}; -export default meta; -type Story = StoryObj; - -export const About: Story = { - args: {}, -}; diff --git a/libs/agora/about/src/lib/about.component.ts b/libs/agora/about/src/lib/about.component.ts deleted file mode 100644 index 26931eeb2f..0000000000 --- a/libs/agora/about/src/lib/about.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; -import { DEFAULT_HERO_BACKGROUND_IMAGE_PATH } from '@sagebionetworks/agora/config'; -import { WikiComponent } from '@sagebionetworks/agora/shared'; - -@Component({ - selector: 'agora-about', - imports: [WikiComponent], - templateUrl: './about.component.html', - styleUrls: ['./about.component.scss'], -}) -export class AboutComponent { - wikiId = '612058'; - className = 'about-page-content'; - - readonly heroBackgroundImagePath = DEFAULT_HERO_BACKGROUND_IMAGE_PATH; -} diff --git a/libs/agora/about/src/lib/about.routes.ts b/libs/agora/about/src/lib/about.routes.ts deleted file mode 100644 index 0adca3afdf..0000000000 --- a/libs/agora/about/src/lib/about.routes.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Routes } from '@angular/router'; -import { AboutComponent } from './about.component'; - -export const routes: Routes = [{ path: '', component: AboutComponent }]; diff --git a/libs/agora/about/src/test-setup.ts b/libs/agora/about/src/test-setup.ts deleted file mode 100644 index 4555f138a7..0000000000 --- a/libs/agora/about/src/test-setup.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; -setupZoneTestEnv(); diff --git a/libs/agora/about/tsconfig.json b/libs/agora/about/tsconfig.json deleted file mode 100644 index d7ad3f1294..0000000000 --- a/libs/agora/about/tsconfig.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "compilerOptions": { - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "target": "es2024", - "esModuleInterop": true - }, - "angularCompilerOptions": { - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/libs/agora/about/tsconfig.lib.json b/libs/agora/about/tsconfig.lib.json deleted file mode 100644 index 2403478901..0000000000 --- a/libs/agora/about/tsconfig.lib.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": [ - "src/test-setup.ts", - "**/*.spec.ts", - "**/*.test.ts", - "jest.config.ts", - "**/*.stories.ts" - ], - "include": ["**/*.ts"] -} diff --git a/libs/agora/about/tsconfig.spec.json b/libs/agora/about/tsconfig.spec.json deleted file mode 100644 index d3889a9881..0000000000 --- a/libs/agora/about/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"] -} diff --git a/libs/agora/config/src/lib/constants.ts b/libs/agora/config/src/lib/constants.ts index 7082f2c8d8..5a197c13d4 100644 --- a/libs/agora/config/src/lib/constants.ts +++ b/libs/agora/config/src/lib/constants.ts @@ -19,7 +19,7 @@ export const ROUTE_PATHS = { DETAILS: 'genes', } as const; -// Use color-secondary to match agora-loading-icon +// Use color-secondary to match explorers-loading-icon export const AGORA_LOADING_ICON_COLORS: LoadingIconColors = { colorInnermost: '#8b8ad1', colorCentral: '#8b8ad1', diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.html b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.html index 2245915c1a..4983cbbe7a 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.html +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.html @@ -3,13 +3,13 @@
diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.scss b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.scss index 5fd2c10e58..1fe99e57db 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.scss +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.scss @@ -33,7 +33,7 @@ @include mixins.link-hover; } - &:hover agora-svg-icon { + &:hover explorers-svg-icon { path { fill: var(--color-action-primary); } diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.spec.ts b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.spec.ts index 8fadeba038..62964996f2 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.spec.ts +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.spec.ts @@ -1,5 +1,5 @@ import { provideHttpClient } from '@angular/common/http'; -import { SvgIconService } from '@sagebionetworks/agora/services'; +import { SvgIconService } from '@sagebionetworks/explorers/services'; import { gctFiltersMocks, SvgIconServiceStub } from '@sagebionetworks/agora/testing'; import { render, screen } from '@testing-library/angular'; import { userEvent } from '@testing-library/user-event'; diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.ts b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.ts index 9ebd4491f3..de5e26968a 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.ts +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component.ts @@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angu import { GCTFilter, GCTFilterOption } from '@sagebionetworks/agora/models'; import { GeneComparisonToolFilterListItemComponent } from '../gene-comparison-tool-filter-list-item/gene-comparison-tool-filter-list-item.component'; -import { SvgIconComponent } from '@sagebionetworks/agora/shared'; +import { SvgIconComponent } from '@sagebionetworks/explorers/util'; @Component({ selector: 'agora-gene-comparison-tool-filter-list', diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.html b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.html index d9629e6986..7d489b9fc2 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.html +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.html @@ -1,4 +1,4 @@ -
+
@@ -25,7 +25,7 @@ @for (filter of filters; track filter; let i = $index) {
    • @@ -80,12 +80,12 @@ tooltipPosition="top" tooltipStyleClass="tooltip gct-tooltip-filter" > - + >
      diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.ts b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.ts index 1566efa9ab..3b10c11497 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.ts +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component.ts @@ -5,7 +5,7 @@ import { GCTFilter } from '@sagebionetworks/agora/models'; import { CheckboxModule } from 'primeng/checkbox'; import { FormsModule } from '@angular/forms'; import { TooltipModule } from 'primeng/tooltip'; -import { SvgIconComponent } from '@sagebionetworks/agora/shared'; +import { SvgIconComponent } from '@sagebionetworks/explorers/util'; @Component({ selector: 'agora-gene-comparison-tool-filter-panel', diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html index 3300124b23..ea059e5115 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html @@ -8,12 +8,12 @@ [style]="{ width: '100%', maxWidth: '580px' }" styleClass="gct-how-to-panel" (onHide)="onHide()" - > +>
      @for (pane of panes; track pane; let i = $index) {
      } @@ -59,7 +59,7 @@ @if (loading) {
      - +
      } diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts index 5999528141..294b764b9b 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts @@ -7,7 +7,7 @@ import { FormsModule } from '@angular/forms'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'; -import { LoadingIconComponent } from '@sagebionetworks/agora/shared'; +import { LoadingIconComponent } from '@sagebionetworks/explorers/util'; import { CookieService } from 'ngx-cookie-service'; import { ButtonModule } from 'primeng/button'; import { CheckboxModule } from 'primeng/checkbox'; diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.html b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.html index 37f3e17572..f9adebdfac 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.html +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.html @@ -20,12 +20,9 @@ > - @if (scoreDistribution) { + @if (scoreDistribution && wikiParams) {
      - +
      } diff --git a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.ts b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.ts index 4c56c836b2..e4fd309e62 100644 --- a/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.ts +++ b/libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component.ts @@ -9,7 +9,8 @@ import { import { OverallScoresDistribution } from '@sagebionetworks/agora/api-client'; import { ScoreBarChartComponent } from '@sagebionetworks/agora/charts'; import { GCTScorePanelData } from '@sagebionetworks/agora/models'; -import { WikiComponent } from '@sagebionetworks/agora/shared'; +import { SynapseWikiParams } from '@sagebionetworks/explorers/models'; +import { WikiComponent } from '@sagebionetworks/explorers/util'; import { Popover, PopoverModule } from 'primeng/popover'; import * as helpers from '../../gene-comparison-tool.helpers'; @@ -35,6 +36,13 @@ export class GeneComparisonToolScorePanelComponent { scoreDistribution: OverallScoresDistribution | undefined; + get wikiParams(): SynapseWikiParams | undefined { + if (this.scoreDistribution?.syn_id && this.scoreDistribution?.wiki_id) { + return { ownerId: this.scoreDistribution.syn_id, wikiId: this.scoreDistribution.wiki_id }; + } + return undefined; + } + getValuePosition(data: any) { const percentage = Math.round(((data.value - data.min) / (data.max - data.min)) * 100); return { left: percentage + '%' }; diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html index 378ac400ce..eae5f188b4 100644 --- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html +++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html @@ -1,6 +1,6 @@ @if (isLoading) {
      - +
      }
      @@ -106,10 +106,14 @@

      Gene Comparison Tool

      @if (category === 'RNA - Differential Expression') { - + } @if (category === 'Protein - Differential Expression') { - + }
      @@ -152,12 +156,12 @@

      Gene Comparison Tool

      tooltipPosition="top" tooltipStyleClass="tooltip" > - + >
    @@ -203,12 +207,12 @@

    Gene Comparison Tool

    tooltipPosition="top" tooltipStyleClass="tooltip-xs" > - + >
    @@ -286,10 +290,10 @@

    Gene Comparison Tool

    @@ -324,11 +328,11 @@

    Gene Comparison Tool

    tooltipPosition="top" tooltipStyleClass="tooltip" > - + >
    @@ -338,11 +342,11 @@

    Gene Comparison Tool

    tooltipPosition="top" tooltipStyleClass="tooltip" > - + >
    @@ -436,9 +440,7 @@

    Gene Comparison Tool

    @@ -504,20 +506,18 @@

    Gene Comparison Tool

    tooltipPosition="top" tooltipStyleClass="tooltip" > - + >
    diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.spec.ts b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.spec.ts index edc916c3ba..e75a197047 100644 --- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.spec.ts +++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.spec.ts @@ -2,8 +2,9 @@ import { provideHttpClient } from '@angular/common/http'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { provideRouter } from '@angular/router'; -import { SvgIconService } from '@sagebionetworks/agora/services'; +import { SvgIconService } from '@sagebionetworks/explorers/services'; import { SvgIconServiceStub } from '@sagebionetworks/agora/testing'; +import { provideLoadingIconColors } from '@sagebionetworks/explorers/testing'; import { MessageService } from 'primeng/api'; import { GeneComparisonToolComponent } from './gene-comparison-tool.component'; @@ -19,6 +20,7 @@ describe('GeneComparisonToolComponent', () => { provideHttpClient(), MessageService, { provide: SvgIconService, useClass: SvgIconServiceStub }, + ...provideLoadingIconColors(), ], }).compileComponents(); diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts index d550c7ef4d..02fd06f747 100644 --- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts +++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts @@ -2,12 +2,14 @@ import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, + DestroyRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation, } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { DistributionService, @@ -16,7 +18,6 @@ import { GeneService, OverallScoresDistribution, } from '@sagebionetworks/agora/api-client'; -import { ROUTE_PATHS } from '@sagebionetworks/agora/config'; import { GCTColumn, GCTDetailsPanelData, @@ -25,6 +26,7 @@ import { GCTSortEvent, } from '@sagebionetworks/agora/models'; import { HelperService } from '@sagebionetworks/agora/services'; +import { LoggerService } from '@sagebionetworks/explorers/services'; import { cloneDeep } from 'lodash'; import { FilterService, MessageService, SortEvent } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; @@ -41,8 +43,11 @@ import { GeneComparisonToolPinnedGenesModalComponent } from './components/gene-c import { GeneComparisonToolScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component'; import { FormsModule } from '@angular/forms'; -import { PopoverLinkComponent } from '@sagebionetworks/agora/genes'; -import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared'; +import { + LoadingIconComponent, + PopoverLinkComponent, + SvgIconComponent, +} from '@sagebionetworks/explorers/util'; import { PopoverModule } from 'primeng/popover'; import { SelectModule } from 'primeng/select'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; @@ -79,6 +84,9 @@ import { GeneComparisonToolLegendPanelComponent } from './components/gene-compar encapsulation: ViewEncapsulation.None, }) export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDestroy { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + router = inject(Router); route = inject(ActivatedRoute); geneService = inject(GeneService); @@ -256,25 +264,31 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes this.genes = []; this.pinnedItems = []; + this.logger.log( + `GeneComparisonToolComponent: Loading genes for ${this.category} / ${this.subCategory}`, + ); + const genesApi$ = this.geneService.getComparisonGenes(this.category, this.subCategory); const distributionApi$ = this.distributionService.getDistribution(); - combineLatest([genesApi$, distributionApi$]).subscribe({ - next: ([genesResult, distributionResult]) => { - if (genesResult.items) { - this.initData(genesResult.items); - this.sortTable(this.headerTable); - this.refresh(); + combineLatest([genesApi$, distributionApi$]) + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe({ + next: ([genesResult, distributionResult]) => { + if (genesResult.items) { + this.initData(genesResult.items); + this.sortTable(this.headerTable); + this.refresh(); - this.scoresDistribution = distributionResult.overall_scores; + this.scoresDistribution = distributionResult.overall_scores; + this.isLoading = false; + } + }, + error: () => { this.isLoading = false; - } - }, - error: () => { - this.isLoading = false; - }, - }); + }, + }); } getGeneProperty(gene: GCTGene, property: string) { diff --git a/libs/agora/genes/src/index.ts b/libs/agora/genes/src/index.ts index 4d5edc21ff..dbb5088082 100644 --- a/libs/agora/genes/src/index.ts +++ b/libs/agora/genes/src/index.ts @@ -17,7 +17,5 @@ export * from './lib/components/gene-soe/gene-soe.component'; export * from './lib/components/gene-table-column-selector/gene-table-column-selector.component'; export * from './lib/components/gene-table/gene-table.component'; -export * from './lib/components/popover-link/popover-link.component'; - export * from './lib/helpers'; export * from './lib/models'; diff --git a/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html b/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html index a1d4fbd44b..a122ae4ea8 100644 --- a/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html +++ b/libs/agora/genes/src/lib/components/gene-details/gene-details.component.html @@ -1,7 +1,7 @@ @if (gene) {
    -
    +
    @if (navSlideIndex > 0) {
    diff --git a/libs/agora/genes/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.ts b/libs/agora/genes/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.ts index 5438a6de48..1c68df20a0 100644 --- a/libs/agora/genes/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.ts +++ b/libs/agora/genes/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.ts @@ -3,7 +3,7 @@ import { Gene } from '@sagebionetworks/agora/api-client'; import { BoxPlotComponent } from '@sagebionetworks/agora/charts'; import { BoxPlotChartItem } from '@sagebionetworks/agora/models'; import { HelperService } from '@sagebionetworks/agora/services'; -import { ModalLinkComponent } from '@sagebionetworks/agora/shared'; +import { ModalLinkComponent } from '@sagebionetworks/explorers/util'; import { DownloadDomImageComponent } from '@sagebionetworks/explorers/ui'; @Component({ diff --git a/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html b/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html index 4cf17428ea..3750f27998 100644 --- a/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html +++ b/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.html @@ -12,14 +12,13 @@

    Proteomics

    given brain region. Summary statistics for each tissue can be viewed by hovering over the purple dots.

    - - + />
    diff --git a/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts b/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts index bece97de78..2e7099b478 100644 --- a/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts +++ b/libs/agora/genes/src/lib/components/gene-evidence-proteomics/gene-evidence-proteomics.component.ts @@ -1,4 +1,5 @@ -import { Component, inject, Input } from '@angular/core'; +import { Component, DestroyRef, inject, Input } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { DistributionService, @@ -9,7 +10,8 @@ import { import { BoxPlotComponent } from '@sagebionetworks/agora/charts'; import { BoxPlotChartItem, ChartRange } from '@sagebionetworks/agora/models'; import { HelperService } from '@sagebionetworks/agora/services'; -import { ModalLinkComponent } from '@sagebionetworks/agora/shared'; +import { LoggerService } from '@sagebionetworks/explorers/services'; +import { ModalLinkComponent } from '@sagebionetworks/explorers/util'; import { DownloadDomImageComponent } from '@sagebionetworks/explorers/ui'; import { GeneProteinSelectorComponent } from '../gene-protein-selector/gene-protein-selector.component'; @@ -25,6 +27,9 @@ import { GeneProteinSelectorComponent } from '../gene-protein-selector/gene-prot styleUrls: ['./gene-evidence-proteomics.component.scss'], }) export class GeneEvidenceProteomicsComponent { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + helperService = inject(HelperService); distributionService = inject(DistributionService); @@ -133,74 +138,89 @@ export class GeneEvidenceProteomicsComponent { initSRM() { this.resetSRM(); - this.distributionService.getDistribution().subscribe((data) => { - const distribution = data.proteomics_SRM; - const differentialExpression = this._gene?.proteomics_SRM || []; - const proteomicData: BoxPlotChartItem[] = []; - - differentialExpression.forEach((item) => { - const data = distribution.find((d) => { - return d.tissue === item.tissue; + this.logger.log('GeneEvidenceProteomicsComponent: Loading SRM distribution'); + + this.distributionService + .getDistribution() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((data) => { + const distribution = data.proteomics_SRM; + const differentialExpression = this._gene?.proteomics_SRM || []; + const proteomicData: BoxPlotChartItem[] = []; + + differentialExpression.forEach((item) => { + const data = distribution.find((d) => { + return d.tissue === item.tissue; + }); + + if (data) { + if (!this.SRMRange) this.SRMRange = new ChartRange(data.min, data.max); + this.processDifferentialExpressionData(item, data, this.SRMRange, proteomicData); + } }); - if (data) { - if (!this.SRMRange) this.SRMRange = new ChartRange(data.min, data.max); - this.processDifferentialExpressionData(item, data, this.SRMRange, proteomicData); - } + this.SRMData = proteomicData; }); - - this.SRMData = proteomicData; - }); } initLFQ() { this.resetLFQ(); - this.distributionService.getDistribution().subscribe((data) => { - const distribution = data.proteomics_LFQ; - const differentialExpression = - this._gene?.proteomics_LFQ?.filter((item) => { - return item.uniprotid === this.selectedUniProtId; - }) || []; - const proteomicData: BoxPlotChartItem[] = []; - - differentialExpression.forEach((item) => { - const data = distribution.find((d) => { - return d.tissue === item.tissue; + this.logger.log('GeneEvidenceProteomicsComponent: Loading LFQ distribution'); + + this.distributionService + .getDistribution() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((data) => { + const distribution = data.proteomics_LFQ; + const differentialExpression = + this._gene?.proteomics_LFQ?.filter((item) => { + return item.uniprotid === this.selectedUniProtId; + }) || []; + const proteomicData: BoxPlotChartItem[] = []; + + differentialExpression.forEach((item) => { + const data = distribution.find((d) => { + return d.tissue === item.tissue; + }); + + if (data) { + if (!this.LFQRange) this.LFQRange = new ChartRange(data.min, data.max); + this.processDifferentialExpressionData(item, data, this.LFQRange, proteomicData); + } }); - if (data) { - if (!this.LFQRange) this.LFQRange = new ChartRange(data.min, data.max); - this.processDifferentialExpressionData(item, data, this.LFQRange, proteomicData); - } + this.LFQData = proteomicData; }); - - this.LFQData = proteomicData; - }); } initTMT() { this.resetTMT(); - this.distributionService.getDistribution().subscribe((data) => { - const distribution = data.proteomics_TMT; - const differentialExpression = - this._gene?.proteomics_TMT?.filter((item) => { - return item.uniprotid === this.selectedUniProtId; - }) || []; - const proteomicData: BoxPlotChartItem[] = []; - - differentialExpression.forEach((item) => { - const data = distribution.find((d) => { - return d.tissue === item.tissue; + this.logger.log('GeneEvidenceProteomicsComponent: Loading TMT distribution'); + + this.distributionService + .getDistribution() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((data) => { + const distribution = data.proteomics_TMT; + const differentialExpression = + this._gene?.proteomics_TMT?.filter((item) => { + return item.uniprotid === this.selectedUniProtId; + }) || []; + const proteomicData: BoxPlotChartItem[] = []; + + differentialExpression.forEach((item) => { + const data = distribution.find((d) => { + return d.tissue === item.tissue; + }); + + if (data) { + if (!this.TMTRange) this.TMTRange = new ChartRange(data.min, data.max); + this.processDifferentialExpressionData(item, data, this.TMTRange, proteomicData); + } }); - if (data) { - if (!this.TMTRange) this.TMTRange = new ChartRange(data.min, data.max); - this.processDifferentialExpressionData(item, data, this.TMTRange, proteomicData); - } + this.TMTData = proteomicData; }); - - this.TMTData = proteomicData; - }); } onProteinChange(event: any) { diff --git a/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.html b/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.html index 3cab5c3ab1..66c3a79dbe 100644 --- a/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.html +++ b/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.html @@ -9,14 +9,13 @@

    RNA Expression

    post-mortem brains from AD cases and controls. The samples were obtained from three human cohort studies across a total of nine different brain regions.

    - - + />
    @@ -57,14 +56,13 @@

    Filter the following charts by statistical model - - + />

    >

    - - + />

    This plot depicts the association between expression levels of the selected gene in the diff --git a/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.ts b/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.ts index 996869aae2..81f4289a43 100644 --- a/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.ts +++ b/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.ts @@ -1,4 +1,13 @@ -import { AfterViewChecked, Component, inject, Input, PLATFORM_ID, ViewChild } from '@angular/core'; +import { + AfterViewChecked, + Component, + DestroyRef, + inject, + Input, + PLATFORM_ID, + ViewChild, +} from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { isPlatformBrowser } from '@angular/common'; import { @@ -15,7 +24,8 @@ import { } from '@sagebionetworks/agora/charts'; import { BoxPlotChartItem, RowChartItem } from '@sagebionetworks/agora/models'; import { HelperService } from '@sagebionetworks/agora/services'; -import { ModalLinkComponent } from '@sagebionetworks/agora/shared'; +import { LoggerService } from '@sagebionetworks/explorers/services'; +import { ModalLinkComponent } from '@sagebionetworks/explorers/util'; import { getStatisticalModels } from '../../helpers'; import { DownloadDomImageComponent } from '@sagebionetworks/explorers/ui'; import { GeneModelSelectorComponent } from '../gene-model-selector/gene-model-selector.component'; @@ -38,7 +48,10 @@ import { GeneNetworkComponent } from '../gene-network/gene-network.component'; styleUrls: ['./gene-evidence-rna.component.scss'], }) export class GeneEvidenceRnaComponent implements AfterViewChecked { + private readonly destroyRef = inject(DestroyRef); private readonly platformId: Record = inject(PLATFORM_ID); + private readonly logger = inject(LoggerService); + helperService = inject(HelperService); distributionService = inject(DistributionService); @@ -144,71 +157,78 @@ export class GeneEvidenceRnaComponent implements AfterViewChecked { return g.model === this.selectedStatisticalModel; }); - this.distributionService.getDistribution().subscribe((data) => { - const distribution = data.rna_differential_expression.filter((data) => { - return data.model === this.selectedStatisticalModel; - }); - - const differentialExpressionChartData: BoxPlotChartItem[] = []; + this.logger.log( + `GeneEvidenceRnaComponent: Loading distribution for model ${this.selectedStatisticalModel}`, + ); - this.differentialExpression.forEach((item) => { - const data = distribution.find((d) => { - return d.tissue === item.tissue; + this.distributionService + .getDistribution() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((data) => { + const distribution = data.rna_differential_expression.filter((data) => { + return data.model === this.selectedStatisticalModel; }); - if (data) { - const yAxisMin = item.logfc < data.min ? item.logfc : data.min; - const yAxisMax = item.logfc > data.max ? item.logfc : data.max; + const differentialExpressionChartData: BoxPlotChartItem[] = []; - if ( - this.differentialExpressionYAxisMin === undefined || - yAxisMin < this.differentialExpressionYAxisMin - ) { - this.differentialExpressionYAxisMin = yAxisMin; - } + this.differentialExpression.forEach((item) => { + const data = distribution.find((d) => { + return d.tissue === item.tissue; + }); - if ( - this.differentialExpressionYAxisMax === undefined || - yAxisMax > this.differentialExpressionYAxisMax - ) { - this.differentialExpressionYAxisMax = yAxisMax; + if (data) { + const yAxisMin = item.logfc < data.min ? item.logfc : data.min; + const yAxisMax = item.logfc > data.max ? item.logfc : data.max; + + if ( + this.differentialExpressionYAxisMin === undefined || + yAxisMin < this.differentialExpressionYAxisMin + ) { + this.differentialExpressionYAxisMin = yAxisMin; + } + + if ( + this.differentialExpressionYAxisMax === undefined || + yAxisMax > this.differentialExpressionYAxisMax + ) { + this.differentialExpressionYAxisMax = yAxisMax; + } + + differentialExpressionChartData.push({ + key: data.tissue, + value: [data.min, data.median, data.max], + circle: { + value: item.logfc, + tooltip: + (item.hgnc_symbol || item.ensembl_gene_id) + + ' is ' + + (item.adj_p_val <= 0.05 ? ' ' : 'not ') + + 'significantly differentially expressed in ' + + item.tissue + + ' with a log fold change value of ' + + this.helperService.getSignificantFigures(item.logfc, 3) + + ' and an adjusted p-value of ' + + this.helperService.getSignificantFigures(item.adj_p_val, 3) + + '.', + }, + quartiles: + data.first_quartile > data.third_quartile + ? [data.third_quartile, data.median, data.first_quartile] + : [data.first_quartile, data.median, data.third_quartile], + }); } + }); - differentialExpressionChartData.push({ - key: data.tissue, - value: [data.min, data.median, data.max], - circle: { - value: item.logfc, - tooltip: - (item.hgnc_symbol || item.ensembl_gene_id) + - ' is ' + - (item.adj_p_val <= 0.05 ? ' ' : 'not ') + - 'significantly differentially expressed in ' + - item.tissue + - ' with a log fold change value of ' + - this.helperService.getSignificantFigures(item.logfc, 3) + - ' and an adjusted p-value of ' + - this.helperService.getSignificantFigures(item.adj_p_val, 3) + - '.', - }, - quartiles: - data.first_quartile > data.third_quartile - ? [data.third_quartile, data.median, data.first_quartile] - : [data.first_quartile, data.median, data.third_quartile], - }); + if (this.differentialExpressionYAxisMin) { + this.differentialExpressionYAxisMin -= 0.2; } - }); - - if (this.differentialExpressionYAxisMin) { - this.differentialExpressionYAxisMin -= 0.2; - } - if (this.differentialExpressionYAxisMax) { - this.differentialExpressionYAxisMax += 0.2; - } + if (this.differentialExpressionYAxisMax) { + this.differentialExpressionYAxisMax += 0.2; + } - this.differentialExpressionChartData = differentialExpressionChartData; - }); + this.differentialExpressionChartData = differentialExpressionChartData; + }); } initConsistencyOfChange() { diff --git a/libs/agora/genes/src/lib/components/gene-experimental-validation/gene-experimental-validation.component.ts b/libs/agora/genes/src/lib/components/gene-experimental-validation/gene-experimental-validation.component.ts index 65b1937502..ea63f04bfc 100644 --- a/libs/agora/genes/src/lib/components/gene-experimental-validation/gene-experimental-validation.component.ts +++ b/libs/agora/genes/src/lib/components/gene-experimental-validation/gene-experimental-validation.component.ts @@ -1,6 +1,8 @@ -import { Component, inject, Input } from '@angular/core'; +import { Component, DestroyRef, inject, Input } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Gene, TeamService } from '@sagebionetworks/agora/api-client'; +import { LoggerService } from '@sagebionetworks/explorers/services'; import { ExperimentalValidationWithTeamData } from '../../models'; @Component({ @@ -10,6 +12,9 @@ import { ExperimentalValidationWithTeamData } from '../../models'; styleUrls: ['./gene-experimental-validation.component.scss'], }) export class ExperimentalValidationComponent { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + teamService = inject(TeamService); _gene: Gene | undefined; @@ -24,23 +29,30 @@ export class ExperimentalValidationComponent { experimentalValidationWithTeamData: ExperimentalValidationWithTeamData[] = []; init() { - this.teamService.listTeams().subscribe((response) => { - if ( - !this.gene || - !this.gene.experimental_validation || - !this.gene.experimental_validation.length - ) { - return; - } - - const teams = response.items; - if (teams) { - this.experimentalValidationWithTeamData = this.gene.experimental_validation.map((item) => { - const extendedItem: ExperimentalValidationWithTeamData = { ...item }; - extendedItem.team_data = teams.find((t) => t.team === item.team); - return extendedItem; - }); - } - }); + this.logger.log('ExperimentalValidationComponent: Loading teams for validation data'); + + this.teamService + .listTeams() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((response) => { + if ( + !this.gene || + !this.gene.experimental_validation || + !this.gene.experimental_validation.length + ) { + return; + } + + const teams = response.items; + if (teams) { + this.experimentalValidationWithTeamData = this.gene.experimental_validation.map( + (item) => { + const extendedItem: ExperimentalValidationWithTeamData = { ...item }; + extendedItem.team_data = teams.find((t) => t.team === item.team); + return extendedItem; + }, + ); + } + }); } } diff --git a/libs/agora/genes/src/lib/components/gene-network/gene-network.component.html b/libs/agora/genes/src/lib/components/gene-network/gene-network.component.html index 36ba0d04c6..3d28faccbd 100644 --- a/libs/agora/genes/src/lib/components/gene-network/gene-network.component.html +++ b/libs/agora/genes/src/lib/components/gene-network/gene-network.component.html @@ -9,7 +9,7 @@

    >0 @for (n of filters; track n) { -
    +
    { - this.selectedGene = gene; - }); + this.logger.log(`GeneNetworkComponent: Loading gene ${node.id}`); + + this.geneService + .getGene(node.id) + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((gene) => { + this.selectedGene = gene; + }); } navigateToSimilarGenes() { diff --git a/libs/agora/genes/src/lib/components/gene-nominations/gene-nominations.component.ts b/libs/agora/genes/src/lib/components/gene-nominations/gene-nominations.component.ts index 9655f0f015..cab8ecc454 100644 --- a/libs/agora/genes/src/lib/components/gene-nominations/gene-nominations.component.ts +++ b/libs/agora/genes/src/lib/components/gene-nominations/gene-nominations.component.ts @@ -1,6 +1,8 @@ -import { Component, inject, Input } from '@angular/core'; +import { Component, DestroyRef, inject, Input } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Gene, Team, TeamService } from '@sagebionetworks/agora/api-client'; +import { LoggerService } from '@sagebionetworks/explorers/services'; import { TargetNominationWithTeamData } from '../../models/TargetNominationWithTeamData'; @Component({ @@ -10,6 +12,9 @@ import { TargetNominationWithTeamData } from '../../models/TargetNominationWithT styleUrls: ['./gene-nominations.component.scss'], }) export class GeneNominationsComponent { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + teamService = inject(TeamService); _gene: Gene | undefined; @@ -35,11 +40,16 @@ export class GeneNominationsComponent { return; } - this.teamService.listTeams().subscribe((response) => { - if (response.items) { - this.nominations = this.sortNominations(response.items); - } - }); + this.logger.log('GeneNominationsComponent: Loading teams for nominations'); + + this.teamService + .listTeams() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((response) => { + if (response.items) { + this.nominations = this.sortNominations(response.items); + } + }); } sortNominations(teams: Team[]): TargetNominationWithTeamData[] { diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html index cc6c1ec07e..a8911b98cf 100644 --- a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html +++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html @@ -14,15 +14,14 @@

    Similar Genes

    @if (!gene.ensembl_gene_id) {

    Genes that are similar based on network coexpression.

    } - - + />
    @@ -44,7 +43,7 @@

    Similar Genes

    >
    - + Use Agora's Gene Comparison Tool to compare similar genes in this list. diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts index 88cf87d4a0..37aadd3ff2 100644 --- a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts +++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts @@ -1,9 +1,11 @@ -import { Component, inject, OnInit } from '@angular/core'; +import { Component, DestroyRef, inject, OnInit } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ActivatedRoute, ParamMap, Router, RouterLink } from '@angular/router'; import { Gene, GeneService } from '@sagebionetworks/agora/api-client'; import { DEFAULT_HERO_BACKGROUND_IMAGE_PATH } from '@sagebionetworks/agora/config'; import { HelperService } from '@sagebionetworks/agora/services'; -import { ModalLinkComponent, SvgIconComponent } from '@sagebionetworks/agora/shared'; +import { ErrorOverlayService, LoggerService } from '@sagebionetworks/explorers/services'; +import { ModalLinkComponent, SvgIconComponent } from '@sagebionetworks/explorers/util'; import { GeneTableComponent } from '../gene-table/gene-table.component'; interface TableColumn { @@ -20,6 +22,10 @@ interface TableColumn { styleUrls: ['./gene-similar.component.scss'], }) export class GeneSimilarComponent implements OnInit { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + private readonly errorOverlayService = inject(ErrorOverlayService); + route = inject(ActivatedRoute); router = inject(Router); geneService = inject(GeneService); @@ -58,20 +64,32 @@ export class GeneSimilarComponent implements OnInit { gctLink: { [key: string]: string } | undefined; ngOnInit() { - this.route.paramMap.subscribe((params: ParamMap) => { + this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params: ParamMap) => { if (params.get('id')) { + const geneId = params.get('id') as string; this.helperService.setLoading(true); - this.geneService.getGene(params.get('id') as string).subscribe((gene: Gene | null) => { - if (!gene) { - this.helperService.setLoading(false); - // https://github.com/angular/angular/issues/45202 - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.router.navigateByUrl('/404-not-found', { skipLocationChange: true }); - } else { - this.gene = gene; - this.init(); - } - }); + this.logger.log(`GeneSimilarComponent: Loading gene ${geneId}`); + + this.geneService + .getGene(geneId) + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe({ + next: (gene: Gene | null) => { + if (!gene) { + this.helperService.setLoading(false); + // https://github.com/angular/angular/issues/45202 + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.router.navigateByUrl('/not-found', { skipLocationChange: true }); + } else { + this.gene = gene; + this.init(); + } + }, + error: () => { + this.helperService.setLoading(false); + this.errorOverlayService.showError('Failed to load similar genes. Please try again.'); + }, + }); } }); } @@ -86,28 +104,38 @@ export class GeneSimilarComponent implements OnInit { ids_array.push(obj.ensembl_gene_id); }); - this.geneService.getGenes(ids_array.join(',')).subscribe((genes) => { - genes.forEach((de: Gene) => { - // Populate display fields & set default values - de.is_any_rna_changed_in_ad_brain_display_value = de.rna_brain_change_studied - ? de.is_any_rna_changed_in_ad_brain.toString() - : 'No data'; - de.is_any_protein_changed_in_ad_brain_display_value = de.protein_brain_change_studied - ? de.is_any_protein_changed_in_ad_brain.toString() - : 'No data'; - if (de.total_nominations) de.nominated_target_display_value = de.total_nominations > 0; - else de.nominated_target_display_value = false; - - // Populate Druggability display fields - if (de.druggability) { - de.pharos_class_display_value = de.druggability.pharos_class; - } - }); + this.logger.log(`GeneSimilarComponent: Loading ${ids_array.length} similar genes`); - this.genes = genes; - }); + this.geneService + .getGenes(ids_array.join(',')) + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe({ + next: (genes) => { + genes.forEach((de: Gene) => { + // Populate display fields & set default values + de.is_any_rna_changed_in_ad_brain_display_value = de.rna_brain_change_studied + ? de.is_any_rna_changed_in_ad_brain.toString() + : 'No data'; + de.is_any_protein_changed_in_ad_brain_display_value = de.protein_brain_change_studied + ? de.is_any_protein_changed_in_ad_brain.toString() + : 'No data'; + if (de.total_nominations) de.nominated_target_display_value = de.total_nominations > 0; + else de.nominated_target_display_value = false; + + // Populate Druggability display fields + if (de.druggability) { + de.pharos_class_display_value = de.druggability.pharos_class; + } + }); - this.helperService.setLoading(false); + this.genes = genes; + this.helperService.setLoading(false); + }, + error: () => { + this.helperService.setLoading(false); + this.errorOverlayService.showError('Failed to load similar genes data.'); + }, + }); } navigateToGeneComparisonTool() { diff --git a/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.html b/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.html index afc5f2e689..4646c497cc 100644 --- a/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.html +++ b/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.html @@ -9,8 +9,9 @@

    - - +
    @defer { diff --git a/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.ts b/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.ts index 1d1fdcdce6..9b603e18d9 100644 --- a/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.ts +++ b/libs/agora/genes/src/lib/components/gene-soe-charts/gene-soe-charts.component.ts @@ -1,4 +1,5 @@ -import { Component, inject, Input } from '@angular/core'; +import { Component, DestroyRef, inject, Input } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Distribution, @@ -7,7 +8,8 @@ import { OverallScoresDistribution, } from '@sagebionetworks/agora/api-client'; import { ScoreBarChartComponent } from '@sagebionetworks/agora/charts'; -import { PopoverLinkComponent } from '../popover-link/popover-link.component'; +import { LoggerService } from '@sagebionetworks/explorers/services'; +import { PopoverLinkComponent } from '@sagebionetworks/explorers/util'; export interface SOEChartProps { title: string; @@ -26,6 +28,9 @@ export interface SOEChartProps { styleUrls: ['./gene-soe-charts.component.scss'], }) export class GeneSoeChartsComponent { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + distributionService = inject(DistributionService); _gene: Gene | undefined; @@ -67,14 +72,19 @@ export class GeneSoeChartsComponent { } init() { - this.distributionService.getDistribution().subscribe((data: Distribution) => { - this.scoreDistributions = data.overall_scores; - this.customSortDistributions(this.scoreDistributions); - // remove literature score - this.scoreDistributions = this.scoreDistributions.filter( - (item: any) => item.name !== 'Literature Score', - ); - }); + this.logger.log('GeneSoeChartsComponent: Loading score distributions'); + + this.distributionService + .getDistribution() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((data: Distribution) => { + this.scoreDistributions = data.overall_scores; + this.customSortDistributions(this.scoreDistributions); + // remove literature score + this.scoreDistributions = this.scoreDistributions.filter( + (item: any) => item.name !== 'Literature Score', + ); + }); } getBarColor(chartName: string | undefined) { diff --git a/libs/agora/genes/src/lib/components/gene-table/gene-table.component.html b/libs/agora/genes/src/lib/components/gene-table/gene-table.component.html index 8959d20c2e..33e3b7b754 100644 --- a/libs/agora/genes/src/lib/components/gene-table/gene-table.component.html +++ b/libs/agora/genes/src/lib/components/gene-table/gene-table.component.html @@ -57,7 +57,7 @@ @for (column of columns; track column; let i = $index) {
    @@ -74,7 +74,7 @@ @for (column of columns; track column) { {{ item[column.field] | capitalizeBoolean }} diff --git a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.html b/libs/agora/genes/src/lib/components/popover-link/popover-link.component.html deleted file mode 100644 index b043b5995d..0000000000 --- a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
    - - -
    - @if (wikiId && isActive) { - - } -
    -     -
    diff --git a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.scss b/libs/agora/genes/src/lib/components/popover-link/popover-link.component.scss deleted file mode 100644 index 6cfbe01381..0000000000 --- a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use 'agora/styles/src/lib/mixins'; - -.popover-link-container { - button { - @include mixins.reset-button; - } - - .popover-link-inner { - display: flex; - - .popover-link-icon { - color: var(--color-gray-600); - transform: translateY(1px); - - &:not(:last-child) { - margin-right: 8px; - } - } - } -} - -.popover-link-content { - max-width: 425px; - padding: 40px; - background: #fff; -} diff --git a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.spec.ts b/libs/agora/genes/src/lib/components/popover-link/popover-link.component.spec.ts deleted file mode 100644 index c239859adf..0000000000 --- a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.spec.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { provideHttpClient } from '@angular/common/http'; -import { provideNoopAnimations } from '@angular/platform-browser/animations'; -import { SvgIconService, SynapseApiService } from '@sagebionetworks/agora/services'; -import { mockSvgTestId, SvgIconServiceStub, synapseWikiMock } from '@sagebionetworks/agora/testing'; -import { render, screen, waitFor } from '@testing-library/angular'; -import userEvent from '@testing-library/user-event'; -import { ButtonModule } from 'primeng/button'; -import { PopoverModule } from 'primeng/popover'; -import { of } from 'rxjs'; -import { PopoverLinkComponent } from './popover-link.component'; - -const mockRenderedHtml = 'Some wiki content'; -const mockSynapseApiService = { getWiki: jest.fn(), renderHtml: jest.fn() }; -mockSynapseApiService.getWiki.mockReturnValue(of(synapseWikiMock)); -mockSynapseApiService.renderHtml.mockReturnValue(mockRenderedHtml); - -async function setup(wikiId = '618276') { - const user = userEvent.setup(); - const component = await render(PopoverLinkComponent, { - providers: [ - provideHttpClient(), - { provide: SvgIconService, useClass: SvgIconServiceStub }, - provideNoopAnimations(), - ], - componentProperties: { - wikiId: wikiId, - }, - imports: [ButtonModule, PopoverLinkComponent, PopoverModule], - componentProviders: [{ provide: SynapseApiService, useValue: mockSynapseApiService }], - }); - return { user, component }; -} - -describe('Component: Popover Link', () => { - it('should create', async () => { - await setup(); - const icon = screen.getByTestId(mockSvgTestId); - expect(icon).toBeVisible(); - }); - - it('should open and close popover on click', async () => { - const { user } = await setup(); - - const button = screen.getByRole('button'); - await user.click(button); - - await waitFor(() => { - expect(mockSynapseApiService.getWiki).toHaveBeenCalledTimes(1); - expect(mockSynapseApiService.renderHtml).toHaveBeenCalledTimes(1); - }); - - const dialogContent = await screen.findByText(mockRenderedHtml); - expect(dialogContent).toBeInTheDocument(); - - await user.click(button); - await waitFor(() => { - expect(dialogContent).not.toBeInTheDocument(); - }); - }); -}); diff --git a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.ts b/libs/agora/genes/src/lib/components/popover-link/popover-link.component.ts deleted file mode 100644 index 5d7956334f..0000000000 --- a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.ts +++ /dev/null @@ -1,25 +0,0 @@ - -import { Component, Input, ViewChild } from '@angular/core'; -import { SvgIconComponent, WikiComponent } from '@sagebionetworks/agora/shared'; -import { ButtonModule } from 'primeng/button'; -import { Popover, PopoverModule } from 'primeng/popover'; - -@Component({ - selector: 'agora-popover-link', - imports: [SvgIconComponent, ButtonModule, PopoverModule, WikiComponent], - templateUrl: './popover-link.component.html', - styleUrls: ['./popover-link.component.scss'], -}) -export class PopoverLinkComponent { - @Input() ownerId: string | undefined; - @Input() wikiId: string | undefined; - - isActive = false; - - @ViewChild('popover') popover!: Popover; - - toggle(event: Event) { - this.isActive = true; - this.popover.toggle(event); - } -} diff --git a/libs/agora/models/index.ts b/libs/agora/models/index.ts index d15365f4b1..9f17cab06f 100644 --- a/libs/agora/models/index.ts +++ b/libs/agora/models/index.ts @@ -9,5 +9,4 @@ export * from './misc'; export * from './navigation-link'; export * from './ResourceCard'; export * from './scores'; -export * from './synapse-wiki'; export * from './unsub'; diff --git a/libs/agora/models/synapse-wiki.ts b/libs/agora/models/synapse-wiki.ts deleted file mode 100644 index fe09c9ce58..0000000000 --- a/libs/agora/models/synapse-wiki.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface SynapseWiki { - id: string; - title: string; - markdown: string; -} diff --git a/libs/agora/news/.eslintrc.json b/libs/agora/news/.eslintrc.json deleted file mode 100644 index 7a4a914a6d..0000000000 --- a/libs/agora/news/.eslintrc.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "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" - } - ], - "@angular-eslint/prefer-standalone": "off" - } - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] -} diff --git a/libs/agora/news/README.md b/libs/agora/news/README.md deleted file mode 100644 index 703262fa03..0000000000 --- a/libs/agora/news/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# agora-news - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `nx test agora-news` to execute the unit tests. diff --git a/libs/agora/news/jest.config.ts b/libs/agora/news/jest.config.ts deleted file mode 100644 index 3fa67010ad..0000000000 --- a/libs/agora/news/jest.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'agora-news', - preset: '../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, - coverageDirectory: '../../../coverage/libs/agora/news', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/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/news/project.json b/libs/agora/news/project.json deleted file mode 100644 index 3fda28ced6..0000000000 --- a/libs/agora/news/project.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "agora-news", - "$schema": "../../../node_modules/nx/schemas/project-schema.json", - "projectType": "library", - "sourceRoot": "libs/agora/news/src", - "prefix": "agora", - "tags": ["type:feature", "scope:agora", "language:typescript"], - "targets": { - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/libs/agora/news"], - "options": { - "jestConfig": "libs/agora/news/jest.config.ts", - "tsConfig": "libs/agora/news/tsconfig.spec.json" - } - }, - "lint": { - "executor": "@nx/eslint:lint" - }, - "lint-fix": { - "executor": "@nx/eslint:lint", - "options": { - "fix": true - } - } - } -} diff --git a/libs/agora/news/src/index.ts b/libs/agora/news/src/index.ts deleted file mode 100644 index a9f78455b9..0000000000 --- a/libs/agora/news/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './lib/news.routes'; diff --git a/libs/agora/news/src/lib/news.component.html b/libs/agora/news/src/lib/news.component.html deleted file mode 100644 index 886b0dba42..0000000000 --- a/libs/agora/news/src/lib/news.component.html +++ /dev/null @@ -1,16 +0,0 @@ -
    -
    -
    -

    Agora News

    -
    -
    -
    - -
    -
    -
    -

    What’s New in Agora

    - -
    -
    -
    diff --git a/libs/agora/news/src/lib/news.component.spec.ts b/libs/agora/news/src/lib/news.component.spec.ts deleted file mode 100644 index 1ca087b146..0000000000 --- a/libs/agora/news/src/lib/news.component.spec.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { NewsComponent } from './news.component'; -import { provideHttpClient } from '@angular/common/http'; - -describe('NewsComponent', () => { - let component: NewsComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [], - providers: [provideHttpClient()], - }).compileComponents(); - - fixture = TestBed.createComponent(NewsComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should have wiki component', () => { - expect(element.querySelector('agora-wiki')).toBeTruthy(); - }); -}); diff --git a/libs/agora/news/src/lib/news.component.stories.ts b/libs/agora/news/src/lib/news.component.stories.ts deleted file mode 100644 index 1cb74cf0d3..0000000000 --- a/libs/agora/news/src/lib/news.component.stories.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; -import { WikiComponent } from '@sagebionetworks/agora/shared'; -import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; -import { NewsComponent } from './news.component'; - -const meta: Meta = { - component: NewsComponent, - title: 'Pages/News', - decorators: [ - applicationConfig({ - providers: [provideHttpClient(withInterceptorsFromDi())], - }), - moduleMetadata({ - imports: [CommonModule, WikiComponent], - }), - ], -}; -export default meta; -type Story = StoryObj; - -export const News: Story = { - args: {}, -}; diff --git a/libs/agora/news/src/lib/news.component.ts b/libs/agora/news/src/lib/news.component.ts deleted file mode 100644 index 14de6c6c0f..0000000000 --- a/libs/agora/news/src/lib/news.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { DEFAULT_HERO_BACKGROUND_IMAGE_PATH } from '@sagebionetworks/agora/config'; -import { WikiComponent } from '@sagebionetworks/agora/shared'; - -@Component({ - selector: 'agora-news', - imports: [WikiComponent], - templateUrl: './news.component.html', - styleUrls: ['./news.component.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class NewsComponent { - wikiId = '611426'; - className = 'news-page-content'; - - readonly heroBackgroundImagePath = DEFAULT_HERO_BACKGROUND_IMAGE_PATH; -} diff --git a/libs/agora/news/src/lib/news.routes.ts b/libs/agora/news/src/lib/news.routes.ts deleted file mode 100644 index 9bd3d002c5..0000000000 --- a/libs/agora/news/src/lib/news.routes.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Routes } from '@angular/router'; -import { NewsComponent } from './news.component'; - -export const routes: Routes = [{ path: '', component: NewsComponent }]; diff --git a/libs/agora/news/src/test-setup.ts b/libs/agora/news/src/test-setup.ts deleted file mode 100644 index 4555f138a7..0000000000 --- a/libs/agora/news/src/test-setup.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; -setupZoneTestEnv(); diff --git a/libs/agora/news/tsconfig.json b/libs/agora/news/tsconfig.json deleted file mode 100644 index d7ad3f1294..0000000000 --- a/libs/agora/news/tsconfig.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "compilerOptions": { - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "target": "es2024", - "esModuleInterop": true - }, - "angularCompilerOptions": { - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/libs/agora/news/tsconfig.lib.json b/libs/agora/news/tsconfig.lib.json deleted file mode 100644 index 2403478901..0000000000 --- a/libs/agora/news/tsconfig.lib.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": [ - "src/test-setup.ts", - "**/*.spec.ts", - "**/*.test.ts", - "jest.config.ts", - "**/*.stories.ts" - ], - "include": ["**/*.ts"] -} diff --git a/libs/agora/news/tsconfig.spec.json b/libs/agora/news/tsconfig.spec.json deleted file mode 100644 index ee917263f3..0000000000 --- a/libs/agora/news/tsconfig.spec.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "target": "es2024", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts", "jest.config.ts"] -} diff --git a/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.html b/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.html index 66f74c99a6..e8a85d2677 100644 --- a/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.html +++ b/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.html @@ -29,14 +29,13 @@

    Nominated Target List

    that led to its nomination

    - - + />
    @@ -86,13 +85,13 @@

    Nominated Target List

    - + >
    Use { - if (!response.items) return; - const genes = response.items; - - genes.forEach((de: Gene) => { - let teamsArray: string[] = []; - let studyArray: string[] = []; - let programsArray: string[] = []; - let inputDataArray: string[] = []; - let initialNominationArray: number[] = []; - - if (de.total_nominations) { - if (!this.nominations.includes(de.total_nominations)) { - this.nominations.push(de.total_nominations); - this.nominations.sort(); + this.logger.log('NominatedTargetsComponent: Loading nominated genes'); + + this.apiService + .getNominatedGenes() + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((response) => { + if (!response.items) return; + const genes = response.items; + + genes.forEach((de: Gene) => { + let teamsArray: string[] = []; + let studyArray: string[] = []; + let programsArray: string[] = []; + let inputDataArray: string[] = []; + let initialNominationArray: number[] = []; + + if (de.total_nominations) { + if (!this.nominations.includes(de.total_nominations)) { + this.nominations.push(de.total_nominations); + this.nominations.sort(); + } } - } - - // Handle TargetNomination fields - // First map all entries nested in the data to a new array - if (de.target_nominations?.length) { - teamsArray = de.target_nominations.map((nt: TargetNomination) => nt.team); - studyArray = this.removeNullAndEmptyStrings( - de.target_nominations.map((nt: TargetNomination) => nt.study), - ); - programsArray = de.target_nominations.map((nt: TargetNomination) => nt.source); - inputDataArray = de.target_nominations.map((nt: TargetNomination) => nt.input_data); - - initialNominationArray = de.target_nominations - .map((nt: TargetNomination) => nt.initial_nomination) - .filter((item) => item !== undefined); - } - - // Check if there are any strings with commas inside, - // if there are separate those into new split strings - teamsArray = this.commaFlattenArray(teamsArray); - studyArray = this.commaFlattenArray(studyArray); - programsArray = this.commaFlattenArray(programsArray); - inputDataArray = this.commaFlattenArray(inputDataArray); - - // Populate targetNomination display fields - de.teams_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(teamsArray); - de.study_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(studyArray); - de.programs_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(programsArray); - de.input_data_display_value = - this.getCommaSeparatedStringOfUniqueSortedValues(inputDataArray); - - de.initial_nomination_display_value = initialNominationArray.length - ? Math.min(...initialNominationArray) - : undefined; - - // Populate Druggability display fields - if (de.druggability) { - de.pharos_class_display_value = de.druggability.pharos_class; - } - }); - this.genes = genes; - }); + // Handle TargetNomination fields + // First map all entries nested in the data to a new array + if (de.target_nominations?.length) { + teamsArray = de.target_nominations.map((nt: TargetNomination) => nt.team); + studyArray = this.removeNullAndEmptyStrings( + de.target_nominations.map((nt: TargetNomination) => nt.study), + ); + programsArray = de.target_nominations.map((nt: TargetNomination) => nt.source); + inputDataArray = de.target_nominations.map((nt: TargetNomination) => nt.input_data); + + initialNominationArray = de.target_nominations + .map((nt: TargetNomination) => nt.initial_nomination) + .filter((item) => item !== undefined); + } + + // Check if there are any strings with commas inside, + // if there are separate those into new split strings + teamsArray = this.commaFlattenArray(teamsArray); + studyArray = this.commaFlattenArray(studyArray); + programsArray = this.commaFlattenArray(programsArray); + inputDataArray = this.commaFlattenArray(inputDataArray); + + // Populate targetNomination display fields + de.teams_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(teamsArray); + de.study_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(studyArray); + de.programs_display_value = + this.getCommaSeparatedStringOfUniqueSortedValues(programsArray); + de.input_data_display_value = + this.getCommaSeparatedStringOfUniqueSortedValues(inputDataArray); + + de.initial_nomination_display_value = initialNominationArray.length + ? Math.min(...initialNominationArray) + : undefined; + + // Populate Druggability display fields + if (de.druggability) { + de.pharos_class_display_value = de.druggability.pharos_class; + } + }); + + this.genes = genes; + }); } removeNullAndEmptyStrings(items: (string | null)[]) { diff --git a/libs/agora/not-found/src/lib/not-found.component.stories.ts b/libs/agora/not-found/src/lib/not-found.component.stories.ts index ef9af87c06..430f0e6ea5 100644 --- a/libs/agora/not-found/src/lib/not-found.component.stories.ts +++ b/libs/agora/not-found/src/lib/not-found.component.stories.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; -import { WikiComponent } from '@sagebionetworks/agora/shared'; +import { WikiComponent } from '@sagebionetworks/explorers/util'; import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; import { NotFoundComponent } from './not-found.component'; diff --git a/libs/agora/services/src/index.ts b/libs/agora/services/src/index.ts index 225caf737a..ae21c8d96d 100644 --- a/libs/agora/services/src/index.ts +++ b/libs/agora/services/src/index.ts @@ -1,4 +1,3 @@ export * from './lib/error.service'; export * from './lib/helper.service'; export * from './lib/svg-icon.service'; -export * from './lib/synapse-api.service'; diff --git a/libs/agora/services/src/lib/synapse-api.service.spec.ts b/libs/agora/services/src/lib/synapse-api.service.spec.ts deleted file mode 100644 index 007e6c3083..0000000000 --- a/libs/agora/services/src/lib/synapse-api.service.spec.ts +++ /dev/null @@ -1,84 +0,0 @@ -/* eslint-disable no-template-curly-in-string */ -// -------------------------------------------------------------------------- // -// External -// -------------------------------------------------------------------------- // -import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; -import { TestBed } from '@angular/core/testing'; - -// -------------------------------------------------------------------------- // -// Internal -// -------------------------------------------------------------------------- // -import { provideHttpClient } from '@angular/common/http'; -import { synapseWikiMock } from '@sagebionetworks/agora/testing'; -import { SynapseApiService } from './synapse-api.service'; - -// -------------------------------------------------------------------------- // -// Tests -// -------------------------------------------------------------------------- // -describe('Service: Synapse API', () => { - let synapseApiService: SynapseApiService; - let httpMock: HttpTestingController; - - beforeEach(async () => { - TestBed.configureTestingModule({ - providers: [provideHttpClient(), provideHttpClientTesting(), SynapseApiService], - }); - - synapseApiService = TestBed.inject(SynapseApiService); - httpMock = TestBed.inject(HttpTestingController); - }); - - afterEach(() => { - httpMock.verify(); - }); - - it('should create', () => { - expect(synapseApiService).toBeDefined(); - }); - - it('should get data from Synapse API', () => { - synapseApiService.getWiki('syn25913473', synapseWikiMock.id).subscribe((response) => { - expect(response).toEqual(synapseWikiMock); - }); - - const req = httpMock.expectOne( - 'https://repo-prod.prod.sagebase.org/repo/v1/entity/syn25913473/wiki/' + synapseWikiMock.id, - ); - expect(req.request.method).toBe('GET'); - req.flush(synapseWikiMock); - }); - - it('should replace links', () => { - const res = synapseApiService.renderHtml('[test](https://test.com)'); - expect(res).toEqual('test'); - }); - - it('should replace synapse links', () => { - const res = synapseApiService.renderHtml('[test](syn123)'); - expect(res).toEqual('test'); - }); - - it('should replace bold', () => { - const res = synapseApiService.renderHtml('**test**'); - expect(res).toEqual('test'); - }); - - it('should replace email', () => { - const res = synapseApiService.renderHtml('agora@sagebionetworks.org'); - expect(res).toEqual( - '', - ); - }); - - it('should replace image', () => { - const res = synapseApiService.renderHtml('${?fileName=test.png}'); - expect(res).toEqual(''); - }); - - it('should replace video', () => { - const res = synapseApiService.renderHtml('${?vimeoId=123}'); - expect(res).toEqual( - '', - ); - }); -}); diff --git a/libs/agora/services/src/lib/synapse-api.service.ts b/libs/agora/services/src/lib/synapse-api.service.ts deleted file mode 100644 index 498ee90b11..0000000000 --- a/libs/agora/services/src/lib/synapse-api.service.ts +++ /dev/null @@ -1,120 +0,0 @@ -// -------------------------------------------------------------------------- // -// External -// -------------------------------------------------------------------------- // -import { HttpClient } from '@angular/common/http'; -import { inject, Injectable } from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { tap } from 'rxjs/operators'; -import sanitizeHtml from 'sanitize-html'; - -// -------------------------------------------------------------------------- // -// Internal -// -------------------------------------------------------------------------- // -import { SynapseWiki } from '@sagebionetworks/agora/models'; - -// -------------------------------------------------------------------------- // -// Service -// -------------------------------------------------------------------------- // -@Injectable({ - providedIn: 'root', -}) -export class SynapseApiService { - wikis: { [key: string]: any } = {}; - - private readonly http = inject(HttpClient); - - getWiki(ownerId: string, wikiId: string): Observable { - const key = ownerId + wikiId; - if (this.wikis[key]) { - return of(this.wikis[key]); - } else { - return this.http - .get('https://repo-prod.prod.sagebase.org/repo/v1/entity/' + ownerId + '/wiki/' + wikiId) - .pipe( - tap((wiki: any) => { - this.wikis[key] = wiki; - }), - ); - } - } - - renderHtml(html: string) { - // Sanitize - let sanitized = sanitizeHtml(html); - - // Add bold tags - sanitized = sanitized.replace(/\*\*(.*?)\*\*/g, this.replaceBold); - - // Add syn links - sanitized = sanitized.replace(/\[(.+?)\]\((.+?)\)/g, this.replaceLinks); - - // Add emails - sanitized = sanitized.replace( - /([a-zA-Z0-9.*_-]+@[a-zA-Z0-9 .*_-]+\.[a-zA-Z0-9*_-]+)/gi, - this.replaceEmail, - ); - - // Add variables - sanitized = sanitized.replace(/\${(.*?)}/g, this.replaceVariable); - - return sanitized; - } - - replaceLinks(match: string, text: string, url: string) { - const target = '_blank'; - - if (url.startsWith('syn')) { - url = 'https://synapse.org/#!Synapse:' + url; - } - - return ( - '' + text + '' - ); - } - - replaceBold(match: string, content: string) { - return '' + content + ''; - } - - replaceVariable(match: string, content: string) { - let params: any = null; - - try { - const contentArr = content.split('?'); - params = new URLSearchParams(contentArr.length > 1 ? contentArr[1] : contentArr[0]); - } catch (err) { - console.error(err); - } - - if (params) { - if (params.has('fileName')) { - return ( - '' + - (params.get('amp;altText') || '') + - '' - ); - } else if (params.has('vimeoId')) { - return ( - '' - ); - } - } - - return ''; - } - - replaceEmail(match: string, content: string) { - // Remove all spaces and * - content = content.replace(/(\s|\*)/g, ''); - - if (content) { - return ''; - } - - return content; - } -} diff --git a/libs/agora/shared/.eslintrc.json b/libs/agora/shared/.eslintrc.json deleted file mode 100644 index 7a4a914a6d..0000000000 --- a/libs/agora/shared/.eslintrc.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "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" - } - ], - "@angular-eslint/prefer-standalone": "off" - } - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] -} diff --git a/libs/agora/shared/README.md b/libs/agora/shared/README.md deleted file mode 100644 index 9450a94006..0000000000 --- a/libs/agora/shared/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# agora-shared - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `nx test agora-shared` to execute the unit tests. diff --git a/libs/agora/shared/jest.config.ts b/libs/agora/shared/jest.config.ts deleted file mode 100644 index 4591ebcc3a..0000000000 --- a/libs/agora/shared/jest.config.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'agora-shared', - preset: '../../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, - coverageDirectory: '../../../coverage/libs/agora/shared', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - testEnvironment: 'jest-fixed-jsdom', - transformIgnorePatterns: ['node_modules/(?!(.pnpm/.*/node_modules/)?(.*\\.mjs$|until-async))'], - 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/shared/project.json b/libs/agora/shared/project.json deleted file mode 100644 index 88146b9d6c..0000000000 --- a/libs/agora/shared/project.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "agora-shared", - "$schema": "../../../node_modules/nx/schemas/project-schema.json", - "projectType": "library", - "sourceRoot": "libs/agora/shared/src", - "prefix": "agora", - "tags": ["type:feature", "scope:agora", "language:typescript"], - "targets": { - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/libs/agora/shared"], - "options": { - "jestConfig": "libs/agora/shared/jest.config.ts", - "tsConfig": "libs/agora/shared/tsconfig.spec.json" - } - }, - "lint": { - "executor": "@nx/eslint:lint" - }, - "lint-fix": { - "executor": "@nx/eslint:lint", - "options": { - "fix": true - } - } - } -} diff --git a/libs/agora/shared/src/index.ts b/libs/agora/shared/src/index.ts deleted file mode 100644 index 4435ad1678..0000000000 --- a/libs/agora/shared/src/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { LoadingIconComponent } from './lib/loading-icon/loading-icon.component'; -export { ModalLinkComponent } from './lib/modal-link/modal-link.component'; -export { SvgIconComponent } from './lib/svg-icon/svg-icon.component'; -export { WikiComponent } from './lib/wiki/wiki.component'; diff --git a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.html b/libs/agora/shared/src/lib/loading-icon/loading-icon.component.html deleted file mode 100644 index 97f201c072..0000000000 --- a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.html +++ /dev/null @@ -1,25 +0,0 @@ -
    -
    - -
    -
    diff --git a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.scss b/libs/agora/shared/src/lib/loading-icon/loading-icon.component.scss deleted file mode 100644 index 9111ae6613..0000000000 --- a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.scss +++ /dev/null @@ -1,213 +0,0 @@ -@use 'agora/styles/src/lib/variables'; -@use 'agora/styles/src/lib/mixins'; - -.loading-icon { - position: relative; - width: 100px; - - .loading-icon-inner { - width: 100%; - padding-top: 100%; - } -} - -.spinner { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - animation: - rotation0 6s infinite linear, - resize3 6s infinite linear; -} - -.spinner-container { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; -} - -.hex0, -.hex120, -.hex240 { - position: absolute; - box-sizing: border-box; - width: 100%; - height: 57.74%; - left: 0; - top: 21.13%; - border-left: 2px solid var(--color-secondary); - border-right: 2px solid var(--color-secondary); -} - -.hex0 { - animation: rotation0 4s infinite linear; -} - -.hex120 { - transform: rotate(120deg); - animation: rotation120 4s infinite linear; -} - -.hex240 { - transform: rotate(240deg); - animation: rotation240 4s infinite linear; -} - -@keyframes rotation0 { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes rotation120 { - 0% { - transform: rotate(120deg); - } - - 100% { - transform: rotate(480deg); - } -} - -@keyframes rotation240 { - 0% { - transform: rotate(240deg); - } - - 100% { - transform: rotate(600deg); - } -} - -@keyframes resize1 { - 0%, - 50%, - 100% { - width: 100%; - height: 100%; - left: 0%; - top: 0%; - } - - 25%, - 75% { - width: 120%; - height: 120%; - left: -10%; - top: -10%; - } - - 12.5%, - 37.5%, - 62.5%, - 87.5% { - width: 70%; - height: 70%; - left: 15%; - top: 15%; - } -} - -@keyframes resize2 { - 0%, - 33.33%, - 66.66%, - 100% { - width: 100%; - height: 100%; - left: 0%; - top: 0%; - } - - 16.66%, - 49.99%, - 83.333% { - width: 70%; - height: 70%; - left: 15%; - top: 15%; - } -} - -@keyframes resize3 { - 0%, - 16.66%, - 33.33%, - 50%, - 66.66%, - 83.33%, - 100% { - width: 100%; - height: 100%; - top: 0; - left: 0; - } - - 2.77%, - 19.44%, - 36.11%, - 52.77%, - 69.44%, - 86.11% { - width: 93.5%; - height: 93.5%; - top: 3.25%; - left: 3.25%; - } - - 5.55%, - 22.22%, - 38.88%, - 55.55%, - 72.22%, - 88.88% { - width: 84.4%; - height: 84.4%; - top: 7.8%; - left: 7.8%; - } - - 8.33%, - 25%, - 41.66%, - 58.33%, - 75%, - 91.66% { - width: 73.2%; - height: 73.2%; - top: 13.4%; - left: 13.4%; - } - - 11.11%, - 27.77%, - 44.44%, - 61.11%, - 77.77%, - 94.44% { - width: 84.4%; - height: 84.4%; - top: 7.8%; - left: 7.8%; - } - - 13.88%, - 30.55%, - 47.22%, - 63.88%, - 80.55%, - 97.22% { - width: 93.5%; - height: 93.5%; - top: 3.25%; - left: 3.25%; - } -} diff --git a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.spec.ts b/libs/agora/shared/src/lib/loading-icon/loading-icon.component.spec.ts deleted file mode 100644 index f937b27c51..0000000000 --- a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { LoadingIconComponent } from './loading-icon.component'; - -describe('LoadingIcon', () => { - let component: LoadingIconComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [], - providers: [], - }).compileComponents(); - }); - - beforeEach(async () => { - fixture = TestBed.createComponent(LoadingIconComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts b/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts deleted file mode 100644 index d89c5565e9..0000000000 --- a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts +++ /dev/null @@ -1,11 +0,0 @@ - -import { Component, ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'agora-loading-icon', - imports: [], - templateUrl: './loading-icon.component.html', - styleUrls: ['./loading-icon.component.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class LoadingIconComponent {} diff --git a/libs/agora/shared/src/lib/modal-link/modal-link.component.html b/libs/agora/shared/src/lib/modal-link/modal-link.component.html deleted file mode 100644 index 7301e11083..0000000000 --- a/libs/agora/shared/src/lib/modal-link/modal-link.component.html +++ /dev/null @@ -1,33 +0,0 @@ -
    - - -
    - @if (wikiId && hasActivated) { - - } -
    -     -
    diff --git a/libs/agora/shared/src/lib/modal-link/modal-link.component.scss b/libs/agora/shared/src/lib/modal-link/modal-link.component.scss deleted file mode 100644 index 0e1d26f087..0000000000 --- a/libs/agora/shared/src/lib/modal-link/modal-link.component.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use 'agora/styles/src/lib/variables'; -@use 'agora/styles/src/lib/mixins'; - -button { - @include mixins.reset-button; -} - -.modal-link-container { - white-space: nowrap; - - .modal-link-inner { - display: flex; - align-items: center; - color: var(--color-gray-900); - gap: 8px; - cursor: pointer; - - &:hover { - color: var(--color-action-primary); - - @include mixins.link-hover; - } - - &:hover agora-svg-icon { - path { - fill: var(--color-action-primary); - } - } - - .modal-link-text { - @include mixins.link; - } - } -} - -.p-dialog-header { - display: flex; - align-items: center; - justify-content: space-between; - - .p-dialog-title { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - font-size: 28px; - font-weight: 400; - } -} - -.modal-link-content { - padding: 20px; -} diff --git a/libs/agora/shared/src/lib/modal-link/modal-link.component.spec.ts b/libs/agora/shared/src/lib/modal-link/modal-link.component.spec.ts deleted file mode 100644 index 355ed79a5c..0000000000 --- a/libs/agora/shared/src/lib/modal-link/modal-link.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { provideHttpClient } from '@angular/common/http'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SynapseApiService } from '@sagebionetworks/agora/services'; -import { DialogModule } from 'primeng/dialog'; -import { LoadingIconComponent } from '../loading-icon/loading-icon.component'; -import { SvgIconComponent } from '../svg-icon/svg-icon.component'; -import { WikiComponent } from '../wiki/wiki.component'; -import { ModalLinkComponent } from './modal-link.component'; - -describe('ModalLinkComponent', () => { - let fixture: ComponentFixture; - let component: ModalLinkComponent; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ - ModalLinkComponent, - CommonModule, - DialogModule, - SvgIconComponent, - WikiComponent, - LoadingIconComponent, - ], - providers: [SynapseApiService, provideHttpClient()], - }).compileComponents(); - - fixture = TestBed.createComponent(ModalLinkComponent); - component = fixture.componentInstance; - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/libs/agora/shared/src/lib/modal-link/modal-link.component.ts b/libs/agora/shared/src/lib/modal-link/modal-link.component.ts deleted file mode 100644 index 168a996af5..0000000000 --- a/libs/agora/shared/src/lib/modal-link/modal-link.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { Component, Input, ViewEncapsulation } from '@angular/core'; -import { DialogModule } from 'primeng/dialog'; -import { SvgIconComponent } from '../svg-icon/svg-icon.component'; -import { WikiComponent } from '../wiki/wiki.component'; - -@Component({ - selector: 'agora-modal-link', - imports: [CommonModule, DialogModule, SvgIconComponent, WikiComponent], - templateUrl: './modal-link.component.html', - styleUrls: ['./modal-link.component.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class ModalLinkComponent { - @Input() text = ''; - @Input() textColor = ''; - - @Input() title = ''; - - @Input() ownerId = ''; - @Input() wikiId = ''; - - @Input() iconWidth = 14; - @Input() iconHeight = 14; - @Input() enableHoverEffects = true; - - isActive = false; - hasActivated = false; - - toggle() { - this.hasActivated = true; - this.isActive = !this.isActive; - } - - getTextColor() { - return this.textColor ? { color: this.textColor } : {}; - } - - close() { - this.isActive = false; - } -} diff --git a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.html b/libs/agora/shared/src/lib/svg-icon/svg-icon.component.html deleted file mode 100644 index d40a1449ed..0000000000 --- a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
    diff --git a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.scss b/libs/agora/shared/src/lib/svg-icon/svg-icon.component.scss deleted file mode 100644 index 986ea52ac0..0000000000 --- a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.scss +++ /dev/null @@ -1,21 +0,0 @@ -.svg-icon, -.svg-icon-no-hover { - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 100%; - height: 100%; - } -} - -.svg-icon { - &:hover { - cursor: pointer; - - svg path { - fill: var(--color-action-primary); - } - } -} diff --git a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.spec.ts b/libs/agora/shared/src/lib/svg-icon/svg-icon.component.spec.ts deleted file mode 100644 index 3d5bdc8026..0000000000 --- a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.spec.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { provideHttpClient } from '@angular/common/http'; -import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; -import { DomSanitizer } from '@angular/platform-browser'; -import { SvgIconService } from '@sagebionetworks/agora/services'; -import { render, RenderResult } from '@testing-library/angular'; -import { of } from 'rxjs'; -import { SvgIconComponent } from './svg-icon.component'; - -// Mock SvgIconService -class MockSvgIconService { - getSvg = jest.fn(); -} - -describe('SvgIconComponent', () => { - let httpMock: HttpTestingController; - let renderResult: RenderResult; - let component: SvgIconComponent; - let svgService: SvgIconService; - let sanitizer: DomSanitizer; - - beforeEach(async () => { - renderResult = await render(SvgIconComponent, { - providers: [ - provideHttpClient(), - provideHttpClientTesting(), - { provide: SvgIconService, useClass: MockSvgIconService }, - ], - }); - - component = renderResult.fixture.componentInstance as SvgIconComponent; - httpMock = renderResult.fixture.debugElement.injector.get(HttpTestingController); - svgService = renderResult.fixture.debugElement.injector.get(SvgIconService); - sanitizer = renderResult.fixture.debugElement.injector.get(DomSanitizer); - - jest.clearAllMocks(); - }); - - afterEach(() => { - httpMock.verify(); - }); - - it('should create the component', async () => { - expect(component).toBeTruthy(); - }); - - it('should load SVG through service and set as svgContent', async () => { - const mockSvg = ''; - const validPath = 'agora-assets/icons/cog.svg'; - const sanitizedSvg = sanitizer.bypassSecurityTrustHtml(mockSvg); - - // Spy on service method - jest.spyOn(svgService, 'getSvg').mockReturnValue(of(sanitizedSvg)); - - // Set input and trigger ngOnInit - component.imagePath = validPath; - component.ngOnInit(); - - // Verify service was called - expect(svgService.getSvg).toHaveBeenCalledWith(validPath); - - // Verify component state - expect(component.svgContent).toBe(sanitizedSvg); - }); -}); diff --git a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.ts b/libs/agora/shared/src/lib/svg-icon/svg-icon.component.ts deleted file mode 100644 index 34db20a4e6..0000000000 --- a/libs/agora/shared/src/lib/svg-icon/svg-icon.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { HttpClient } from '@angular/common/http'; -import { Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/core'; -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; -import { SvgIconService } from '@sagebionetworks/agora/services'; - -@Component({ - selector: 'agora-svg-icon', - standalone: true, - imports: [CommonModule], - templateUrl: './svg-icon.component.html', - styleUrls: ['./svg-icon.component.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class SvgIconComponent implements OnInit { - @Input() imagePath!: string; - @Input() altText = ''; - @Input() width = 14; - @Input() height = 14; - @Input() color = 'inherit'; // Default to parent color - @Input() enableHoverEffects = true; - - http = inject(HttpClient); - sanitizer = inject(DomSanitizer); - svgService = inject(SvgIconService); - - svgContent: SafeHtml | null = null; - - className = 'svg-icon'; - - ngOnInit() { - if (!this.imagePath) return; - - this.className = this.enableHoverEffects ? 'svg-icon' : 'svg-icon-no-hover'; - - this.svgService.getSvg(this.imagePath).subscribe({ - next: (svg) => (this.svgContent = svg), - error: (error) => console.error('Error loading svg:', error), - }); - } -} diff --git a/libs/agora/shared/src/lib/wiki/wiki.component.html b/libs/agora/shared/src/lib/wiki/wiki.component.html deleted file mode 100644 index 3cf0d4ef0e..0000000000 --- a/libs/agora/shared/src/lib/wiki/wiki.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
    -
    -
    - -
    -
    diff --git a/libs/agora/shared/src/lib/wiki/wiki.component.scss b/libs/agora/shared/src/lib/wiki/wiki.component.scss deleted file mode 100644 index 7a57c66249..0000000000 --- a/libs/agora/shared/src/lib/wiki/wiki.component.scss +++ /dev/null @@ -1,68 +0,0 @@ -@use 'agora/styles/src/lib/variables'; -@use 'agora/styles/src/lib/mixins'; - -.wiki { - position: relative; - - .wiki-inner { - white-space: pre-wrap; - - a { - @include mixins.link; - } - - .email-link { - color: var(--color-text); - font-weight: 700; - text-decoration: none; - } - - .wiki-no-data { - color: var(--color-gray-400); - } - - table { - width: 100%; - border-collapse: collapse; - margin: 30px 0; - - th, - td { - padding: 15px; - } - - th { - text-align: left; - } - - tr:nth-child(odd) { - background-color: var(--color-gray-200); - } - } - } - - .wiki-overlay { - display: none; - position: absolute; - inset: 0; - background-color: #fff; - align-items: center; - justify-content: center; - } - - &.loading { - .wiki-inner { - min-height: 120px; - } - - .wiki-overlay { - display: flex; - } - } -} - -.wiki.news-page-content { - .wiki-inner { - white-space: normal; - } -} diff --git a/libs/agora/shared/src/lib/wiki/wiki.component.spec.ts b/libs/agora/shared/src/lib/wiki/wiki.component.spec.ts deleted file mode 100644 index 0d7a74d56e..0000000000 --- a/libs/agora/shared/src/lib/wiki/wiki.component.spec.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { provideHttpClient } from '@angular/common/http'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SynapseApiService } from '@sagebionetworks/agora/services'; -import { synapseWikiMock } from '@sagebionetworks/agora/testing'; -import { server } from '@sagebionetworks/agora/testing/msw'; -import { http, HttpResponse } from 'msw'; -import { WikiComponent } from './wiki.component'; - -describe('WikiComponent', () => { - beforeAll(() => server.listen()); - afterEach(() => server.restoreHandlers()); - afterAll(() => server.close()); - - let component: WikiComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [], - providers: [provideHttpClient(), SynapseApiService], - }).compileComponents(); - - fixture = TestBed.createComponent(WikiComponent); - component = fixture.componentInstance; - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('getWikiData', () => { - it('should get wiki data', async () => { - const expected = synapseWikiMock; - expect(component.loading).toBe(true); - - component.getWikiData(); - await fixture.whenStable(); - - expect(component.data.markdown).toBe(expected.markdown); - expect(component.loading).toBe(false); - }); - - it('should default to error content when api is unreachable', async () => { - const noDataContent = `
    No data found...
    `; - expect(component.loading).toBe(true); - - // simulate server error - const url = 'https://repo-prod.prod.sagebase.org/repo/v1/entity/syn25913473/wiki/'; - server.use( - http.get( - url, - () => { - return HttpResponse.error(); - }, - { - once: true, - }, - ), - ); - - component.getWikiData(); - await fixture.whenStable(); - - expect(component.safeHtml).toBe(noDataContent); - expect(component.loading).toBe(false); - }); - }); - - describe('getClassName', () => { - it('should default to the @Input className', () => { - const expectedValue = 'test'; - - component.className = expectedValue; - const result = component.getClassName(); - - expect(result.find((e) => e === expectedValue)).toBeTruthy(); - }); - - it('should have a "loading" className when loading variable is true', () => { - const expectedValue = 'loading'; - - // set loading variable to be true - component.loading = true; - - const result = component.getClassName(); - - expect(result.find((e) => e === expectedValue)).toBeTruthy(); - }); - }); -}); diff --git a/libs/agora/shared/src/lib/wiki/wiki.component.ts b/libs/agora/shared/src/lib/wiki/wiki.component.ts deleted file mode 100644 index e77cb47c92..0000000000 --- a/libs/agora/shared/src/lib/wiki/wiki.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { - Component, - inject, - Input, - OnChanges, - OnInit, - SimpleChanges, - ViewEncapsulation, -} from '@angular/core'; -import { SafeHtml, DomSanitizer } from '@angular/platform-browser'; -import { SynapseWiki } from '@sagebionetworks/agora/models'; -import { SynapseApiService } from '@sagebionetworks/agora/services'; -import { LoadingIconComponent } from '../loading-icon/loading-icon.component'; - -@Component({ - selector: 'agora-wiki', - imports: [CommonModule, LoadingIconComponent], - templateUrl: './wiki.component.html', - styleUrls: ['./wiki.component.scss'], - encapsulation: ViewEncapsulation.None, -}) -export class WikiComponent implements OnChanges, OnInit { - @Input() ownerId: string | undefined; - @Input() wikiId: string | undefined; - @Input() className = ''; - - loading = true; - - data: SynapseWiki = {} as SynapseWiki; - safeHtml: SafeHtml | null = '
    No data found...
    '; - - private readonly synapseApiService = inject(SynapseApiService); - private readonly domSanitizer = inject(DomSanitizer); - - ngOnChanges(changes: SimpleChanges): void { - if (changes['wikiId'] && !changes['wikiId'].firstChange) { - this.getWikiData(); - } - } - - ngOnInit() { - this.loading = true; - this.getWikiData(); - } - - getWikiData() { - this.synapseApiService.getWiki(this.ownerId || 'syn25913473', this.wikiId || '').subscribe({ - next: (wiki: SynapseWiki) => { - if (!wiki) { - this.loading = false; - return; - } - - this.data = wiki; - // Requires bypassSecurityTrustHtml to render iframes (e.g. videos) - this.safeHtml = this.domSanitizer.bypassSecurityTrustHtml( - this.synapseApiService.renderHtml(wiki.markdown), - ); - this.loading = false; - }, - error: (err) => { - console.error('Error fetching wiki: ', err); - console.warn('Service unavailable. Please try again later.'); - this.loading = false; - }, - complete: () => { - this.loading = false; - }, - }); - } - - getClassName() { - const className = [this.className]; - if (this.loading) { - className.push('loading'); - } - return className; - } -} diff --git a/libs/agora/shared/src/test-setup.ts b/libs/agora/shared/src/test-setup.ts deleted file mode 100644 index 4555f138a7..0000000000 --- a/libs/agora/shared/src/test-setup.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; -setupZoneTestEnv(); diff --git a/libs/agora/shared/tsconfig.json b/libs/agora/shared/tsconfig.json deleted file mode 100644 index d7ad3f1294..0000000000 --- a/libs/agora/shared/tsconfig.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "compilerOptions": { - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "target": "es2024", - "esModuleInterop": true - }, - "angularCompilerOptions": { - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/libs/agora/shared/tsconfig.lib.json b/libs/agora/shared/tsconfig.lib.json deleted file mode 100644 index b228a1a081..0000000000 --- a/libs/agora/shared/tsconfig.lib.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "declaration": true, - "declarationMap": true, - "inlineSources": true, - "types": [] - }, - "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/agora/shared/tsconfig.spec.json b/libs/agora/shared/tsconfig.spec.json deleted file mode 100644 index d3889a9881..0000000000 --- a/libs/agora/shared/tsconfig.spec.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"] -} diff --git a/libs/agora/styles/src/_index.scss b/libs/agora/styles/src/_index.scss index 9baac3647d..78d3f57a83 100644 --- a/libs/agora/styles/src/_index.scss +++ b/libs/agora/styles/src/_index.scss @@ -2,6 +2,8 @@ @import 'normalize.css'; @import './lib/mixins'; @import './lib/variables'; +@import './lib/general'; +@import './lib/wiki-pages'; @import './lib/components/button'; @import './lib/components/chart'; @import './lib/components/chart_d3'; @@ -15,4 +17,3 @@ @import './lib/components/table'; @import './lib/components/tooltip'; @import './lib/components/typography'; -@import './lib/general'; diff --git a/libs/agora/news/src/lib/news.component.scss b/libs/agora/styles/src/lib/_wiki-pages.scss similarity index 85% rename from libs/agora/news/src/lib/news.component.scss rename to libs/agora/styles/src/lib/_wiki-pages.scss index 63ac670760..6a4e11278b 100644 --- a/libs/agora/news/src/lib/news.component.scss +++ b/libs/agora/styles/src/lib/_wiki-pages.scss @@ -1,7 +1,11 @@ -@use 'agora/styles/src/lib/variables'; -@use 'agora/styles/src/lib/mixins'; +.about-page-content { + margin-top: 30px; + line-height: normal; +} .news-page-content { + margin-top: 30px; + h3 { font-size: var(--font-size-md); font-weight: 700; diff --git a/libs/agora/styles/src/lib/components/_typography.scss b/libs/agora/styles/src/lib/components/_typography.scss index cd24305f0b..79f24103e0 100644 --- a/libs/agora/styles/src/lib/components/_typography.scss +++ b/libs/agora/styles/src/lib/components/_typography.scss @@ -30,13 +30,13 @@ h3, h4, h5, h6 { - agora-modal-link { + explorers-modal-link { float: right; } } h2 { - agora-modal-link { + explorers-modal-link { transform: translateY(-3px); } } diff --git a/libs/agora/teams/jest.config.ts b/libs/agora/teams/jest.config.ts index 90abcdb605..b032c09fa4 100644 --- a/libs/agora/teams/jest.config.ts +++ b/libs/agora/teams/jest.config.ts @@ -14,7 +14,9 @@ export default { }, ], }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + transformIgnorePatterns: [ + 'node_modules/(?!(.pnpm/.*/node_modules/)?(.*\\.mjs$|@octokit/.*|universal-user-agent|before-after-hook))', + ], snapshotSerializers: [ 'jest-preset-angular/build/serializers/no-ng-attributes', 'jest-preset-angular/build/serializers/ng-snapshot', diff --git a/libs/agora/teams/src/lib/team-member-list/team-member-list.component.ts b/libs/agora/teams/src/lib/team-member-list/team-member-list.component.ts index 782b5a08c8..08c2ba3f5f 100644 --- a/libs/agora/teams/src/lib/team-member-list/team-member-list.component.ts +++ b/libs/agora/teams/src/lib/team-member-list/team-member-list.component.ts @@ -1,5 +1,7 @@ -import { Component, inject, Input } from '@angular/core'; +import { Component, DestroyRef, inject, Input } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Team, TeamMember, TeamService } from '@sagebionetworks/agora/api-client'; +import { LoggerService } from '@sagebionetworks/explorers/services'; import { map, Observable } from 'rxjs'; @Component({ @@ -9,6 +11,9 @@ import { map, Observable } from 'rxjs'; styleUrls: ['./team-member-list.component.scss'], }) export class TeamMemberListComponent { + private readonly destroyRef = inject(DestroyRef); + private readonly logger = inject(LoggerService); + readonly placeholderImagePath = 'agora-assets/images/team-member.svg'; teamService = inject(TeamService); @@ -31,12 +36,16 @@ export class TeamMemberListComponent { team.members.forEach((member: TeamMember) => { const name = member.name.toLowerCase().replace(/[- ]/g, '-'); - this.getTeamMemberImageUrl(name).subscribe((url) => { - if (!url) { - return; - } - this.images[member.name] = url; - }); + this.logger.log(`TeamMemberListComponent: Loading image for ${name}`); + + this.getTeamMemberImageUrl(name) + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((url) => { + if (!url) { + return; + } + this.images[member.name] = url; + }); }); this.sort(team.members); diff --git a/libs/agora/teams/src/lib/teams.component.ts b/libs/agora/teams/src/lib/teams.component.ts index 49a81b8cca..fb4d1630f4 100644 --- a/libs/agora/teams/src/lib/teams.component.ts +++ b/libs/agora/teams/src/lib/teams.component.ts @@ -1,9 +1,10 @@ -import { CommonModule } from '@angular/common'; -import { Component, DestroyRef, inject, OnInit } from '@angular/core'; +import { CommonModule, isPlatformBrowser } from '@angular/common'; +import { Component, DestroyRef, inject, OnInit, PLATFORM_ID } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Team, TeamService, TeamsList } from '@sagebionetworks/agora/api-client'; import { DEFAULT_HERO_BACKGROUND_IMAGE_PATH } from '@sagebionetworks/agora/config'; import { HelperService } from '@sagebionetworks/agora/services'; +import { ErrorOverlayService, LoggerService } from '@sagebionetworks/explorers/services'; import { catchError, finalize, map, Observable, of } from 'rxjs'; import { TeamListComponent } from './team-list/team-list.component'; @@ -15,6 +16,9 @@ import { TeamListComponent } from './team-list/team-list.component'; }) export class TeamsComponent implements OnInit { private readonly destroyRef = inject(DestroyRef); + private readonly platformId = inject(PLATFORM_ID); + private readonly logger = inject(LoggerService); + private readonly errorOverlayService = inject(ErrorOverlayService); helperService = inject(HelperService); teamService = inject(TeamService); @@ -28,16 +32,19 @@ export class TeamsComponent implements OnInit { } loadTeams() { - this.helperService.setLoading(true); + if (isPlatformBrowser(this.platformId)) { + this.helperService.setLoading(true); + this.logger.log('TeamsComponent: Loading teams'); - this.teams$ = this.teamService.listTeams().pipe( - takeUntilDestroyed(this.destroyRef), - map((res: TeamsList) => res.items || []), - catchError((error: Error) => { - console.error('Error loading teams:', error.message); - return of([]); - }), - finalize(() => this.helperService.setLoading(false)), - ); + this.teams$ = this.teamService.listTeams().pipe( + takeUntilDestroyed(this.destroyRef), + map((res: TeamsList) => res.items || []), + catchError(() => { + this.errorOverlayService.showError('Failed to load teams. Please try again later.'); + return of([]); + }), + finalize(() => this.helperService.setLoading(false)), + ); + } } } diff --git a/libs/agora/testing/src/lib/handlers/synapse-handlers.ts b/libs/agora/testing/src/lib/handlers/synapse-handlers.ts index 6ddfc4beeb..0ee41756b6 100644 --- a/libs/agora/testing/src/lib/handlers/synapse-handlers.ts +++ b/libs/agora/testing/src/lib/handlers/synapse-handlers.ts @@ -1,8 +1,8 @@ import { http, HttpResponse } from 'msw'; -import { synapseWikiMock } from '../mocks/synapse-mocks'; +import { synapseWikiMarkdownMock } from '../mocks/synapse-mocks'; export const synapseHandlers = [ - http.get('https://repo-prod.prod.sagebase.org/repo/v1/entity/syn25913473/wiki', () => { - return HttpResponse.json(synapseWikiMock); + http.get('https://repo-prod.prod.sagebase.org/repo/v1/entity/:ownerId/wiki/:wikiId', () => { + return HttpResponse.json(synapseWikiMarkdownMock); }), ]; diff --git a/libs/agora/testing/src/lib/mocks/index.ts b/libs/agora/testing/src/lib/mocks/index.ts index 95c3558e74..e19d4f4164 100644 --- a/libs/agora/testing/src/lib/mocks/index.ts +++ b/libs/agora/testing/src/lib/mocks/index.ts @@ -15,4 +15,3 @@ export * from './activated-route-stub'; export * from './api-service-stub'; export * from './genes-service-stub'; export * from './svg-icon-service-stub'; -export * from './synapse-api-service-stub'; diff --git a/libs/agora/testing/src/lib/mocks/synapse-api-service-stub.ts b/libs/agora/testing/src/lib/mocks/synapse-api-service-stub.ts deleted file mode 100644 index ef92271a70..0000000000 --- a/libs/agora/testing/src/lib/mocks/synapse-api-service-stub.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable */ - -// -------------------------------------------------------------------------- // -// External -// -------------------------------------------------------------------------- // -import { Injectable } from '@angular/core'; -import { Observable, of } from 'rxjs'; - -// -------------------------------------------------------------------------- // -// Internal -// -------------------------------------------------------------------------- // -import { SynapseWiki } from '@sagebionetworks/agora/models'; -import { synapseWikiMock } from '.'; - -// -------------------------------------------------------------------------- // -// Stub -// -------------------------------------------------------------------------- // -@Injectable() -export class SynapseApiServiceStub { - constructor() {} - - getWiki(ownerId: string, wikiId: string): Observable { - return of(synapseWikiMock); - } - - renderHtml(html: string) { - return ''; - } -} diff --git a/libs/agora/testing/src/lib/mocks/synapse-mocks.ts b/libs/agora/testing/src/lib/mocks/synapse-mocks.ts index 42b74d5605..59622dfbdd 100644 --- a/libs/agora/testing/src/lib/mocks/synapse-mocks.ts +++ b/libs/agora/testing/src/lib/mocks/synapse-mocks.ts @@ -1,6 +1,6 @@ -import { SynapseWiki } from '@sagebionetworks/agora/models'; +import { SynapseWikiMarkdown } from '@sagebionetworks/explorers/models'; -export const synapseWikiMock: SynapseWiki = { +export const synapseWikiMarkdownMock: SynapseWikiMarkdown = { id: '612058', title: 'About', markdown: diff --git a/libs/agora/ui/src/lib/components/search-input/search-input.component.ts b/libs/agora/ui/src/lib/components/search-input/search-input.component.ts index ab786c7603..76a405aafa 100644 --- a/libs/agora/ui/src/lib/components/search-input/search-input.component.ts +++ b/libs/agora/ui/src/lib/components/search-input/search-input.component.ts @@ -4,6 +4,7 @@ import { Router } from '@angular/router'; import { GeneService, SearchResult } from '@sagebionetworks/agora/api-client'; import { ROUTE_PATHS } from '@sagebionetworks/agora/config'; import { isEnsemblId, sanitizeSearchQuery } from '@sagebionetworks/agora/util'; +import { LoggerService } from '@sagebionetworks/explorers/services'; import { SearchInputComponent as ExplorersSearchInputComponent } from '@sagebionetworks/explorers/ui'; import { Observable, tap } from 'rxjs'; @@ -14,6 +15,8 @@ import { Observable, tap } from 'rxjs'; styleUrls: ['./search-input.component.scss'], }) export class SearchInputComponent { + private readonly logger = inject(LoggerService); + router = inject(Router); geneService = inject(GeneService); destroyRef = inject(DestroyRef); @@ -52,6 +55,8 @@ export class SearchInputComponent { } getSearchResults = (query: string): Observable => { + this.logger.log(`SearchInputComponent: Searching for "${query}"`); + return this.geneService.searchGeneEnhanced(query).pipe( tap((results) => { this.getHgncSymbolCounts(results); diff --git a/libs/explorers/comparison-tool/src/lib/comparison-tool-header/comparison-tool-header.component.html b/libs/explorers/comparison-tool/src/lib/comparison-tool-header/comparison-tool-header.component.html index 7603ab2211..c349843ed9 100644 --- a/libs/explorers/comparison-tool/src/lib/comparison-tool-header/comparison-tool-header.component.html +++ b/libs/explorers/comparison-tool/src/lib/comparison-tool-header/comparison-tool-header.component.html @@ -6,7 +6,7 @@

    {{ viewConfig().headerTitle }}

    @if (viewConfig().headerTitleWikiParams) { - + }
    diff --git a/libs/explorers/services/src/lib/logger.service.ts b/libs/explorers/services/src/lib/logger.service.ts index 77cbf5c749..f4c6702eb8 100644 --- a/libs/explorers/services/src/lib/logger.service.ts +++ b/libs/explorers/services/src/lib/logger.service.ts @@ -5,7 +5,11 @@ import * as Sentry from '@sentry/angular'; export class LoggerService { log(message: string, data?: Record) { if (isDevMode()) { - console.log('[LOG]', message, data); + if (data) { + console.log('[LOG]', message, data); + } else { + console.log('[LOG]', message); + } } Sentry.addBreadcrumb({ message, @@ -15,7 +19,11 @@ export class LoggerService { } warn(message: string, data?: Record) { - console.warn('[WARN]', message, data); + if (data) { + console.warn('[WARN]', message, data); + } else { + console.warn('[WARN]', message); + } Sentry.addBreadcrumb({ message, level: 'warning', @@ -29,7 +37,11 @@ export class LoggerService { * as a Sentry event. */ error(message: string, error?: unknown) { - console.error('[ERROR]', message, error); + if (error) { + console.error('[ERROR]', message, error); + } else { + console.error('[ERROR]', message); + } if (error) { Sentry.captureException(error); diff --git a/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.html b/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.html index 460d3ac282..b451fd1a97 100644 --- a/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.html +++ b/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.html @@ -4,13 +4,14 @@ [backgroundImagePath]="heroBackgroundImagePathOrDefault()" />
    - @if (isLoading) { + @if (isLoading()) {
    + } @else { +
    + +
    } -
    - -
    diff --git a/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.scss b/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.scss index 0b14335bdd..3e860574fc 100644 --- a/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.scss +++ b/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.scss @@ -19,10 +19,10 @@ } .loading-icon { + flex: 1; display: flex; - justify-content: center; align-items: center; - width: min(vars.$main-content-desktop-width, 100%); + justify-content: center; } .terms-of-service-content { diff --git a/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.ts b/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.ts index d636c50880..0c79a6d5e4 100644 --- a/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.ts +++ b/libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.ts @@ -1,3 +1,4 @@ +import { isPlatformBrowser } from '@angular/common'; import { Component, computed, @@ -5,6 +6,8 @@ import { inject, input, OnInit, + PLATFORM_ID, + signal, ViewEncapsulation, } from '@angular/core'; @@ -26,9 +29,10 @@ import { finalize } from 'rxjs/operators'; export class TermsOfServiceComponent implements OnInit { synapseService = inject(SynapseApiService); private readonly destroyRef = inject(DestroyRef); + private readonly platformId = inject(PLATFORM_ID); content = ''; - isLoading = true; + isLoading = signal(true); heroBackgroundImagePath = input(); heroBackgroundImagePathOrDefault = computed( @@ -36,7 +40,9 @@ export class TermsOfServiceComponent implements OnInit { ); ngOnInit() { - this.loadTOS(); + if (isPlatformBrowser(this.platformId)) { + this.loadTOS(); + } } loadTOS() { @@ -45,7 +51,7 @@ export class TermsOfServiceComponent implements OnInit { .pipe( takeUntilDestroyed(this.destroyRef), finalize(() => { - this.isLoading = false; + this.isLoading.set(false); }), ) .subscribe({ diff --git a/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.html b/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.html index d9e4736c52..b5ccdaa73f 100644 --- a/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.html +++ b/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.html @@ -1,11 +1,11 @@
    - +
    diff --git a/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.scss b/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.scss index 3a93f9da40..9dbf9886cc 100644 --- a/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.scss +++ b/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.scss @@ -11,7 +11,6 @@ display: flex; flex-direction: column; align-items: center; - justify-content: start; @media (width < vars.$main-content-total-width) { // adds consistent margin when the screen is smaller @@ -19,6 +18,9 @@ } .wiki-hero-content { + flex: 1 1 auto; + display: flex; + flex-direction: column; font-size: 16px; font-weight: 400; line-height: 1.5; diff --git a/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.ts b/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.ts index 0e4db0dfd1..41e20207ce 100644 --- a/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.ts +++ b/libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.ts @@ -1,4 +1,4 @@ -import { Component, input } from '@angular/core'; +import { Component, computed, input } from '@angular/core'; import { HeroComponent } from '@sagebionetworks/explorers/ui'; import { WikiComponent } from '@sagebionetworks/explorers/util'; @@ -11,7 +11,12 @@ import { SynapseWikiParams } from '@sagebionetworks/explorers/models'; styleUrls: ['./wiki-hero.component.scss'], }) export class WikiHeroComponent { - wikiParams = input(); // from the route data + wikiParams = input.required(); // from the route data heroTitle = input('heroTitle'); // from the route data - className = 'wiki-hero-page-content'; + heroBackgroundImagePath = input(); // from the route data + className = input(''); // from the route data + + heroBackgroundImagePathOrDefault = computed( + () => this.heroBackgroundImagePath() ?? 'explorers-assets/images/background.svg', + ); } diff --git a/libs/explorers/testing/src/lib/mocks/components/wiki-component-mock.ts b/libs/explorers/testing/src/lib/mocks/components/wiki-component-mock.ts index 263bba93f2..0a464de000 100644 --- a/libs/explorers/testing/src/lib/mocks/components/wiki-component-mock.ts +++ b/libs/explorers/testing/src/lib/mocks/components/wiki-component-mock.ts @@ -7,5 +7,5 @@ import { SynapseWikiParams } from '@sagebionetworks/explorers/models'; template: '
    wiki
    ', }) export class MockWikiComponent { - wikiParams = input(); + wikiParams = input.required(); } diff --git a/libs/explorers/util/src/lib/modal-link/modal-link.component.ts b/libs/explorers/util/src/lib/modal-link/modal-link.component.ts index b67d5dce73..15545411eb 100644 --- a/libs/explorers/util/src/lib/modal-link/modal-link.component.ts +++ b/libs/explorers/util/src/lib/modal-link/modal-link.component.ts @@ -16,7 +16,7 @@ export class ModalLinkComponent { text = input(''); textColor = input(''); title = input(''); - wikiParams = input(); + wikiParams = input.required(); iconWidth = input(14); iconHeight = input(14); enableHoverEffects = input(true); @@ -29,7 +29,7 @@ export class ModalLinkComponent { } getTextColor() { - return this.textColor ? { color: this.textColor } : {}; + return this.textColor() ? { color: this.textColor() } : {}; } close() { diff --git a/libs/explorers/util/src/lib/popover-link/popover-link.component.html b/libs/explorers/util/src/lib/popover-link/popover-link.component.html index b0c195f986..a01592b4f7 100644 --- a/libs/explorers/util/src/lib/popover-link/popover-link.component.html +++ b/libs/explorers/util/src/lib/popover-link/popover-link.component.html @@ -13,7 +13,7 @@
    - @if (wikiParams() && isActive) { + @if (isActive) { }
    diff --git a/libs/explorers/util/src/lib/popover-link/popover-link.component.ts b/libs/explorers/util/src/lib/popover-link/popover-link.component.ts index 338ecfc7e9..caf8ba1f48 100644 --- a/libs/explorers/util/src/lib/popover-link/popover-link.component.ts +++ b/libs/explorers/util/src/lib/popover-link/popover-link.component.ts @@ -12,7 +12,7 @@ import { WikiComponent } from '../wiki/wiki.component'; styleUrls: ['./popover-link.component.scss'], }) export class PopoverLinkComponent { - wikiParams = input(); + wikiParams = input.required(); isActive = false; diff --git a/libs/explorers/util/src/lib/wiki/wiki.component.html b/libs/explorers/util/src/lib/wiki/wiki.component.html index b663b7fafc..9f86f6ea23 100644 --- a/libs/explorers/util/src/lib/wiki/wiki.component.html +++ b/libs/explorers/util/src/lib/wiki/wiki.component.html @@ -1,6 +1,9 @@ -
    -
    - -
    -
    +
    + @if (isLoading()) { +
    + +
    + } @else { +
    + }
    diff --git a/libs/explorers/util/src/lib/wiki/wiki.component.scss b/libs/explorers/util/src/lib/wiki/wiki.component.scss index 3eff313086..f5538c543b 100644 --- a/libs/explorers/util/src/lib/wiki/wiki.component.scss +++ b/libs/explorers/util/src/lib/wiki/wiki.component.scss @@ -1,8 +1,17 @@ @use 'explorers/styles/src/lib/variables'; @use 'explorers/styles/src/lib/mixins'; +explorers-wiki { + display: flex; + flex-direction: column; + flex: 1 1 auto; +} + .wiki { - position: relative; + flex: 1 1 auto; + display: flex; + flex-direction: column; + align-items: center; .wiki-inner { white-space: pre-wrap; @@ -41,11 +50,9 @@ } } - .wiki-loading { - display: none; - position: absolute; - inset: 0; - background-color: #fff; + .loading-icon { + flex: 1 1 auto; + display: flex; align-items: center; justify-content: center; } diff --git a/libs/explorers/util/src/lib/wiki/wiki.component.spec.ts b/libs/explorers/util/src/lib/wiki/wiki.component.spec.ts index 4e37f28b05..6cda659a79 100644 --- a/libs/explorers/util/src/lib/wiki/wiki.component.spec.ts +++ b/libs/explorers/util/src/lib/wiki/wiki.component.spec.ts @@ -63,7 +63,7 @@ describe('WikiComponent', () => { const { component } = await setup(validWikiParams[0]); await waitFor(() => { - expect(component.isLoading).toBe(false); + expect(component.isLoading()).toBe(false); expect(mockDomSanitizer.bypassSecurityTrustHtml).toHaveBeenCalled(); expect(component.safeHtml).toContain(validMarkdown); }); @@ -85,7 +85,7 @@ describe('WikiComponent', () => { const { component } = await setup(invalidWikiParam); await waitFor(() => { - expect(component.isLoading).toBe(false); + expect(component.isLoading()).toBe(false); expect(component.safeHtml).toBe('
    No data found...
    '); }); }); diff --git a/libs/explorers/util/src/lib/wiki/wiki.component.ts b/libs/explorers/util/src/lib/wiki/wiki.component.ts index e75268c709..d6d54b9750 100644 --- a/libs/explorers/util/src/lib/wiki/wiki.component.ts +++ b/libs/explorers/util/src/lib/wiki/wiki.component.ts @@ -1,74 +1,77 @@ -import { CommonModule } from '@angular/common'; -import { Component, DestroyRef, effect, inject, input, ViewEncapsulation } from '@angular/core'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { isPlatformBrowser } from '@angular/common'; +import { + Component, + DestroyRef, + inject, + input, + OnInit, + PLATFORM_ID, + signal, + ViewEncapsulation, +} from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { SynapseWikiMarkdown, SynapseWikiParams } from '@sagebionetworks/explorers/models'; -import { SynapseApiService } from '@sagebionetworks/explorers/services'; -import { finalize } from 'rxjs/operators'; +import { + ErrorOverlayService, + LoggerService, + SynapseApiService, +} from '@sagebionetworks/explorers/services'; import { LoadingIconComponent } from '../loading-icon/loading-icon.component'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { finalize } from 'rxjs'; @Component({ selector: 'explorers-wiki', - imports: [CommonModule, LoadingIconComponent], + imports: [LoadingIconComponent], templateUrl: './wiki.component.html', styleUrls: ['./wiki.component.scss'], encapsulation: ViewEncapsulation.None, }) -export class WikiComponent { +export class WikiComponent implements OnInit { + private readonly platformId = inject(PLATFORM_ID); + private readonly logger = inject(LoggerService); + private readonly errorOverlayService = inject(ErrorOverlayService); synapseApiService = inject(SynapseApiService); domSanitizer = inject(DomSanitizer); private readonly destroyRef = inject(DestroyRef); - wikiParams = input(); + wikiParams = input.required(); + className = input(''); - className = ''; - isLoading = true; + isLoading = signal(true); safeHtml: SafeHtml | null = '
    No data found...
    '; - constructor() { - effect(() => { - const params = this.wikiParams(); - if (params) { - this.getWikiMarkdown(); - } - }); + ngOnInit() { + this.getWikiMarkdown(); } getWikiMarkdown() { - const ownerId = this.wikiParams()?.ownerId; - const wikiId = this.wikiParams()?.wikiId; - if (!ownerId || !wikiId) { - console.error('Wiki parameter(s) missing'); - return; - } + if (isPlatformBrowser(this.platformId)) { + const { ownerId, wikiId } = this.wikiParams(); - this.isLoading = true; - - this.synapseApiService - .getWikiMarkdown(ownerId, wikiId) - .pipe( - takeUntilDestroyed(this.destroyRef), - finalize(() => { - this.isLoading = false; - }), - ) - .subscribe({ - next: (wiki: SynapseWikiMarkdown) => { - // Requires bypassSecurityTrustHtml to render iframes (e.g. videos) - this.safeHtml = this.domSanitizer.bypassSecurityTrustHtml( - this.synapseApiService.renderHtml(wiki.markdown), - ); - }, - error: (err) => { - console.error('Error fetching wiki: ', err); - }, - }); - } + this.isLoading.set(true); + this.logger.log('WikiComponent: Loading wiki content', { ownerId, wikiId }); - getClassName() { - const className = [this.className]; - if (this.isLoading) { - className.push('loading'); + this.synapseApiService + .getWikiMarkdown(ownerId, wikiId) + .pipe( + takeUntilDestroyed(this.destroyRef), + finalize(() => { + this.isLoading.set(false); + }), + ) + .subscribe({ + next: (wiki: SynapseWikiMarkdown) => { + // Requires bypassSecurityTrustHtml to render iframes (e.g. videos) + this.safeHtml = this.domSanitizer.bypassSecurityTrustHtml( + this.synapseApiService.renderHtml(wiki.markdown), + ); + }, + error: () => { + this.errorOverlayService.showError( + 'Failed to load wiki content. Please try again later.', + ); + }, + }); } - return className; } } diff --git a/tsconfig.base.json b/tsconfig.base.json index 86dffc9a31..69d3ddcf16 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -17,7 +17,6 @@ "strict": true, "baseUrl": ".", "paths": { - "@sagebionetworks/agora/about": ["libs/agora/about/src/index.ts"], "@sagebionetworks/agora/api-client": ["libs/agora/api-client-angular/src/index.ts"], "@sagebionetworks/agora/charts": ["libs/agora/charts/src/index.ts"], "@sagebionetworks/agora/config": ["libs/agora/config/src/index.ts"], @@ -27,11 +26,9 @@ "@sagebionetworks/agora/genes": ["libs/agora/genes/src/index.ts"], "@sagebionetworks/agora/home": ["libs/agora/home/src/index.ts"], "@sagebionetworks/agora/models": ["libs/agora/models/index.ts"], - "@sagebionetworks/agora/news": ["libs/agora/news/src/index.ts"], "@sagebionetworks/agora/nominated-targets": ["libs/agora/nominated-targets/src/index.ts"], "@sagebionetworks/agora/not-found": ["libs/agora/not-found/src/index.ts"], "@sagebionetworks/agora/services": ["libs/agora/services/src/index.ts"], - "@sagebionetworks/agora/shared": ["libs/agora/shared/src/index.ts"], "@sagebionetworks/agora/storybook": ["libs/agora/storybook/src/index.ts"], "@sagebionetworks/agora/teams": ["libs/agora/teams/src/index.ts"], "@sagebionetworks/agora/testing": ["libs/agora/testing/src/index.ts"],