Enhancement/standalone optimize by iimpulse · Pull Request #329 · TheJacksonLaboratory/hpo-web

iimpulse · 2025-12-29T17:34:54Z

upgrades to 7.8.1 rxjs
components to standalone
reset lint

- Upgrade rxjs dependency to ^7.8.1 - Replace deprecated publishReplay/refCount with shareReplay in utility.service.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Convert HighlightPipe, SafeHtmlPipe, TranslatePipe to standalone - Delete ExtrasModule (no longer needed) - Update AppModule, BrowserHPOModule, SearchModule to import standalone pipes - Fix test files to use standalone pipes in imports instead of declarations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Components converted to standalone with specific Material imports: - FooterComponent (RouterModule, MatButtonModule) - NoPageFoundComponent (CommonModule, RouterModule, MatButtonModule) - FloatingFeedbackComponent (RouterModule, MatButtonModule, MatIconModule, MatTooltipModule) - AboutComponent (RouterModule, MatButtonModule, MatIconModule) - FeedbackComponent - All resource components (license, citation, contact, disclaimer, funding, faq) - All tools components (phenomizer, external, exomiser, genomiser, hpobrowser, phenogramviz, loinc) - All data components (api-doc, annotations-download, ontology-download, translation, indigenous, layperson) Updated modules to import standalone components instead of declaring them. Updated all test files to use imports array for standalone components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Convert remaining NgModule-declared components to standalone: - AppComponent, NavbarComponent - HomeComponent, NewsComponent - SearchComponent - TermComponent, DiseaseComponent, GeneComponent - SearchResultsComponent, ProfileSearchComponent - DialogExcelDownloadComponent, PublicationsComponent Each component now declares its own specific Material imports instead of relying on GlobalMaterialModules. Module files updated to import standalone components rather than declare them. Test files updated to use TestBed.configureTestingModule with components in imports array instead of declarations. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Major changes: - Converted from platformBrowserDynamic().bootstrapModule() to bootstrapApplication() with provideRouter/provideHttpClient/provideAnimations - Created new .routes.ts files exporting route arrays for all feature areas - Deleted all NgModule files (app.module, browser.module, static.module, data.module, resources.module, tools.module, search.module) - Deleted all *-routing.module.ts files in favor of .routes.ts - Deleted GlobalMaterialModules - each component now has its own Material imports - Updated test files to remove GlobalMaterialModules dependencies The app now uses pure standalone architecture with no NgModules. Bundle size reduced by ~18KB (from 1.21MB to 991KB initial). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR migrates the Angular application from NgModules to standalone components and upgrades RxJS from version 6.5.4 to 7.8.1. The migration involves converting all components to standalone, replacing module-based routing with route files, and updating deprecated RxJS operators.

Key Changes

Migration to standalone components architecture across the entire application
RxJS upgrade from 6.5.4 to 7.8.1 with operator replacements (publishReplay/refCount → shareReplay)
Module-based routing replaced with route configuration files
Addition of a new feedback feature with floating feedback button

Reviewed changes

Copilot reviewed 106 out of 109 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/main.ts	Replaced module bootstrapping with standalone component bootstrapping using `bootstrapApplication`
src/app/app.component.ts	Converted to standalone component with direct imports
src/app/app.routes.ts	New routing configuration replacing app-routing.module.ts
src/app/static/*/.component.ts	Converted all static page components to standalone
src/app/browser/pages/*/.component.ts	Converted all browser page components to standalone
src/app/shared/*/.component.ts	Converted shared components (navbar, footer, search) to standalone
src/app/shared/pipes/*.pipe.ts	Added `standalone: true` to all pipes
src/app/shared/utility/utility.service.ts	Updated RxJS operators from `publishReplay/refCount` to `shareReplay`
src/app/shared/news/news.service.ts	Updated RxJS operators and changed to root-provided service
*/.spec.ts	Updated test configurations to import standalone components
package.json	Updated RxJS to 7.8.1 and various dev dependencies
.eslintrc.json	Updated ESLint configuration and added accessibility rules

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-29T17:35:58Z

src/app/shared/search/search/search.component.html

        Phenotypes - {{terms.length}} of {{termsCount}} displayed
      </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">


The CSS classes 'flex' and 'flex-column' appear to be Tailwind utility classes, but this component's stylesheet is using SCSS. These classes should either be defined in the component's SCSS file or the component should consistently use one styling approach.

Copilot · 2025-12-29T17:35:58Z

src/app/shared/search/search/search.component.html

+          <div class="id">{{item.id}}</div>
          <br>


Using <br> tags for layout is an anti-pattern. The layout spacing should be controlled through CSS (margin/padding) in the component's SCSS file for better maintainability.

Copilot · 2025-12-29T17:35:58Z

src/app/shared/search/search/search.component.html

+          <div class="id">{{item.id}}</div>
          <br>


Using <br> tags for layout is an anti-pattern. The layout spacing should be controlled through CSS (margin/padding) in the component's SCSS file for better maintainability.

Copilot · 2025-12-29T17:35:58Z

src/app/static/feedback/feedback.component.ts

+  styleUrls: ['./feedback.component.scss']
+})
+export class FeedbackComponent {
+  private formUrl = 'https://docs.google.com/forms/d/e/1FAIpQLSfID5F6is5J7GSJUlFzIYZ7FOsXEebjLjLZwXhLdFPELVBVMQ/viewform?usp=dialog';


The Google Forms URL should be extracted to an environment configuration file rather than hardcoded in the component. This allows for easier configuration between development, staging, and production environments.

@copilot open a new pull request to apply changes based on this feedback

src/app/static/feedback/feedback.component.html

Copilot · 2025-12-29T17:35:59Z

src/app/static/feedback/feedback.component.html

+      marginheight="0"
+      marginwidth="0">


The marginheight and marginwidth attributes are deprecated in HTML5. These should be removed or replaced with CSS padding/margin styles if needed.

Suggested change

marginheight="0"

marginwidth="0">

style="margin: 0; padding: 0;">

Copilot · 2025-12-29T17:35:59Z

package.json

-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
+    "baseline-browser-mapping": "^2.9.11",


The baseline-browser-mapping package appears to be a new devDependency added in this PR. However, there's no visible usage of this package in the reviewed code changes. If it's not being used, it should be removed to avoid unnecessary dependencies.

Suggested change

"baseline-browser-mapping": "^2.9.11",

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot · 2026-02-11T19:19:02Z

@iimpulse I've opened a new pull request, #340, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: iimpulse <7397665+iimpulse@users.noreply.github.com>

Extract feedback form URL to environment configuration

Copilot

Pull request overview

Copilot reviewed 122 out of 125 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-11T19:42:21Z

src/environments/environment.ts

+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const packageJson = require('../../package.json');


require('../../package.json') in an Angular environment file can break or complicate ESM/bundler builds (and usually isn’t tree-shakeable). Prefer a JSON import (with resolveJsonModule), or inject/version-stamp at build time (e.g., file replacement, define plugin, or a generated version.ts), and remove the inline eslint disable.

Copilot · 2026-02-11T19:42:22Z

src/environments/environment.ts

  production: false,

-  VERSION: require('../../package.json').version,
+  VERSION: packageJson.version,


require('../../package.json') in an Angular environment file can break or complicate ESM/bundler builds (and usually isn’t tree-shakeable). Prefer a JSON import (with resolveJsonModule), or inject/version-stamp at build time (e.g., file replacement, define plugin, or a generated version.ts), and remove the inline eslint disable.

Copilot · 2026-02-11T19:42:22Z

src/app/shared/search/service/search.service.ts

+      terms: this.ontologyService.search(query, limit).pipe(
+        catchError((e) => {
+          console.error(e);
+          return of<OntologySearchResponse>({ terms: [] });


The catchError fallback for terms returns { terms: [] }, but callers previously relied on totalCount (and your UI still displays “x of y”). If OntologySearchResponse includes totalCount, return a complete fallback (e.g., { terms: [], totalCount: 0 }) to prevent undefined totals and inconsistent UI behavior.

Suggested change

return of<OntologySearchResponse>({ terms: [] });

return of<OntologySearchResponse>({ terms: [], totalCount: 0 });

Copilot · 2026-02-11T19:42:22Z

src/app/shared/search/search/search.component.ts

          this.diseases = diseases.results;
          this.genes = genes.results;
-          this.termsCount = terms.totalCount;
+          this.termsCount = terms.terms.length;


termsCount is assigned terms.terms.length, which makes the “displayed of total” UI always show the same value for phenotypes. If the API provides a total (previous code used terms.totalCount), keep and display that value instead.

Suggested change

this.termsCount = terms.terms.length;

this.termsCount = terms.totalCount;

Copilot · 2026-02-11T19:42:23Z

src/app/shared/pipes/highlight.pipe.ts

          // lookahead -> lookbehind not suitable for production yet.
          // Limited implementation to favor ending strings
-          const regex = new RegExp(subHighlight[x] + '(?!\#)', 'gi');
+          const regex = new RegExp(subHighlight[x] + '(?!#)', 'gi');


This builds a RegExp directly from user-provided input without escaping special characters. Queries containing regex metacharacters (e.g., (, [, \) can throw at runtime, and certain patterns can cause performance issues (regex backtracking). Escape the query tokens before constructing the regex (e.g., replace /[.*+?^${}()|[\]\\]/g), and consider bounding token length.

Copilot · 2026-02-11T19:42:23Z

src/app/browser/models/models.ts

  catLabel: string;
  annotationCount: number;
-  termSource: any;
+  termSource: MatTableDataSource<{frequency: string, onset: string, sources: string[]}>;


models.ts now depends on Angular Material (MatTableDataSource) via TermCategory, which couples domain models to a UI framework and can make reuse/testing harder. Prefer keeping models framework-agnostic (e.g., termSourceRows: { frequency: string; onset: string; sources: string[] }[]) and construct MatTableDataSource inside the relevant component instead.

Copilot · 2026-02-11T19:42:23Z

src/app/shared/search/search/search.component.html

      </div>
      <div class="result-list flex flex-column">
-        <div class="result" (click)="closeDropDown()" routerLink="/browse/term/{{item.id}}"
+        <div class="result" (click)="closeDropDown()" (keydown.enter)="closeDropDown()" tabindex="0" routerLink="/browse/term/{{item.id}}"


Using string interpolation inside routerLink attributes is brittle. Prefer property binding so route parameters are composed safely and consistently, e.g. [routerLink]="['/browse/term', item.id]" (same applies to disease/gene links below).

Copilot · 2026-02-11T19:42:24Z

src/app/static/data/ontology-download/ontology-download.component.html

        <a [href]="otherReleases" target="_blank">Older Versions</a>
      </div>
-      <div class="download-banner-wrapper mat-elevation-z4 flex flex-row" (click)="utilityService.downloadFile(oboUrl)">
+      <div class="download-banner-wrapper mat-elevation-z4 flex flex-row" (click)="utilityService.downloadFile(oboUrl)" (keydown.enter)="utilityService.downloadFile(oboUrl)" tabindex="0" role="button">


Elements with role="button" should generally support both Enter and Space activation. Add a Space key handler (and prevent default scrolling) or use a semantic <button> element styled to match; this will also align better with the enabled template accessibility lint rules.

iimpulse and others added 9 commits December 26, 2025 11:00

update lint to default, lint fix

ab96927

Phase 1: Update RxJS 6.5.4 to 7.8.1

0958a2f

- Upgrade rxjs dependency to ^7.8.1 - Replace deprecated publishReplay/refCount with shareReplay in utility.service.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package updates

75dfa43

update ignore and some missed service upgrades

d253e7e

remove hidden caches

0cf566b

iimpulse requested a review from Copilot December 29, 2025 17:34

iimpulse self-assigned this Dec 29, 2025

Copilot AI reviewed Dec 29, 2025

View reviewed changes

iimpulse and others added 7 commits February 10, 2026 13:30

lint fix, type enforcement

ae09eeb

lint fix env

669078b

style bugfix

ab53b74

Merge branch 'main' into enhancement/standalone-optimize

655ac1a

remove unused

ec800b4

Update src/app/static/feedback/feedback.component.html

48ea6a3

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Initial plan

0ec71af

Copilot AI mentioned this pull request Feb 11, 2026

Extract feedback form URL to environment configuration #340

Merged

Copilot AI and others added 2 commits February 11, 2026 19:20

Extract feedback form URL to environment configuration

6188eba

Co-authored-by: iimpulse <7397665+iimpulse@users.noreply.github.com>

Merge pull request #340 from TheJacksonLaboratory/copilot/sub-pr-329

730a6c6

Extract feedback form URL to environment configuration

iimpulse requested a review from Copilot February 11, 2026 19:39

Copilot AI reviewed Feb 11, 2026

View reviewed changes

Rev 2.1.3

eddc625

iimpulse merged commit 645f815 into main Feb 11, 2026
1 check passed

	marginheight="0"
	marginwidth="0">
	style="margin: 0; padding: 0;">

		// eslint-disable-next-line @typescript-eslint/no-var-requires
		const packageJson = require('../../package.json');

	return of<OntologySearchResponse>({ terms: [] });
	return of<OntologySearchResponse>({ terms: [], totalCount: 0 });

	this.termsCount = terms.terms.length;
	this.termsCount = terms.totalCount;

Conversation

iimpulse commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

iimpulse Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Feb 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

iimpulse commented Dec 29, 2025 •

edited

Loading