feat(explorers): enhance shared wiki, modal-link, and popover-link components

- Make wikiParams a required input on wiki, popover-link, and modal-link components
- Switch wiki component from effect-based to OnInit lifecycle for data fetching
- Add isPlatformBrowser guard to wiki and terms-of-service components
- Improve wiki/wiki-hero layout with flexbox for better loading state display
- Convert wiki isLoading to signal for reactive state management
- Add className input to wiki and wiki-hero components for external styling
- Add heroBackgroundImagePath input to wiki-hero for customizable backgrounds
- Fix logger service to not log undefined when optional data/error params are omitted
- Add non-null assertion for optional headerTitleWikiParams in comparison-tool-header

Author: sagely1

libs/explorers/comparison-tool/src/lib/comparison-tool-header/comparison-tool-header.component.html

@@ -6,7 +6,7 @@
     <div class="comparison-tool-header-title">
       <h1>{{ viewConfig().headerTitle }}</h1>
       @if (viewConfig().headerTitleWikiParams) {
-        <explorers-popover-link [wikiParams]="viewConfig().headerTitleWikiParams" />
+        <explorers-popover-link [wikiParams]="viewConfig().headerTitleWikiParams!" />
       }
     </div>
     <explorers-comparison-tool-share-url-button />

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<string, unknown>) {
     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<string, unknown>) {
-    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);

libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.html

@@ -4,13 +4,14 @@
     [backgroundImagePath]="heroBackgroundImagePathOrDefault()"
   />
   <div class="terms-of-service">
-    @if (isLoading) {
+    @if (isLoading()) {
       <div class="loading-icon">
         <explorers-loading-icon />
       </div>
+    } @else {
+      <div class="terms-of-service-content">
+        <markdown [data]="content" />
+      </div>
     }
-    <div class="terms-of-service-content">
-      <markdown [data]="content" />
-    </div>
   </div>
 </div>

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 {

libs/explorers/shared/src/lib/components/terms-of-service/terms-of-service.component.ts

@@ -1,10 +1,13 @@
+import { isPlatformBrowser } from '@angular/common';
 import {
   Component,
   computed,
   DestroyRef,
   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<string | undefined>();
 
   heroBackgroundImagePathOrDefault = computed(
@@ -40,21 +44,23 @@ export class TermsOfServiceComponent implements OnInit {
   }
 
   loadTOS() {
-    this.synapseService
-      .getTermsOfService()
-      .pipe(
-        takeUntilDestroyed(this.destroyRef),
-        finalize(() => {
-          this.isLoading = false;
-        }),
-      )
-      .subscribe({
-        next: (markdown) => {
-          this.content = markdown;
-        },
-        error: (error) => {
-          console.error('Error loading terms of service:', error);
-        },
-      });
+    if (isPlatformBrowser(this.platformId)) {
+      this.synapseService
+        .getTermsOfService()
+        .pipe(
+          takeUntilDestroyed(this.destroyRef),
+          finalize(() => {
+            this.isLoading.set(false);
+          }),
+        )
+        .subscribe({
+          next: (markdown) => {
+            this.content = markdown;
+          },
+          error: (error) => {
+            console.error('Error loading terms of service:', error);
+          },
+        });
+    }
   }
 }

libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.html

@@ -1,11 +1,11 @@
 <div id="wiki-hero-container">
   <explorers-hero
     [title]="heroTitle()"
-    backgroundImagePath="explorers-assets/images/background.svg"
+    [backgroundImagePath]="heroBackgroundImagePathOrDefault()"
   />
   <div class="wiki-hero">
     <div class="wiki-hero-content">
-      <explorers-wiki [wikiParams]="wikiParams()" [className]="className" />
+      <explorers-wiki [wikiParams]="wikiParams()" [className]="className()" />
     </div>
   </div>
 </div>

libs/explorers/shared/src/lib/components/wiki-hero/wiki-hero.component.scss

@@ -11,14 +11,16 @@
     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
       margin: 0 vars.$main-content-margin;
     }
 
     .wiki-hero-content {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
       font-size: 16px;
       font-weight: 400;
       line-height: 1.5;

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<SynapseWikiParams>(); // from the route data
+  wikiParams = input.required<SynapseWikiParams>(); // from the route data
   heroTitle = input('heroTitle'); // from the route data
-  className = 'wiki-hero-page-content';
+  heroBackgroundImagePath = input<string | undefined>(); // from the route data
+  className = input<string>(''); // from the route data
+
+  heroBackgroundImagePathOrDefault = computed(
+    () => this.heroBackgroundImagePath() ?? 'explorers-assets/images/background.svg',
+  );
 }

libs/explorers/testing/src/lib/mocks/components/wiki-component-mock.ts

@@ -7,5 +7,5 @@ import { SynapseWikiParams } from '@sagebionetworks/explorers/models';
   template: '<div>wiki</div>',
 })
 export class MockWikiComponent {
-  wikiParams = input<SynapseWikiParams>();
+  wikiParams = input.required<SynapseWikiParams>();
 }

libs/explorers/util/src/lib/modal-link/modal-link.component.html

@@ -9,7 +9,7 @@
       altText="info"
     />
     @if (text()) {
-      <span class="modal-link-text" [ngStyle]="getTextColor()">
+      <span class="modal-link-text" [ngStyle]="textColorStyle()">
         {{ text() }}
       </span>
     }