Features fusions

client/src/app/components/events/event-timeline-item/event-timeline-item.component.html

@@ -64,19 +64,16 @@
 
     <!-- subject -->
     <ng-container
-        *ngIf="tagDisplay != 'hideSubject' && event.subject as subject">
+      *ngIf="tagDisplay != 'hideSubject' && event.subject as subject">
       @switch (subject.__typename) {
         @case ('Feature') {
-          <cvc-feature-tag
-            [feature]="subject"></cvc-feature-tag>
+          <cvc-feature-tag [feature]="subject"></cvc-feature-tag>
         }
         @case ('Assertion') {
-          <cvc-assertion-tag
-            [assertion]="subject"></cvc-assertion-tag>
+          <cvc-assertion-tag [assertion]="subject"></cvc-assertion-tag>
         }
         @case ('EvidenceItem') {
-          <cvc-evidence-tag
-            [evidence]="subject"></cvc-evidence-tag>
+          <cvc-evidence-tag [evidence]="subject"></cvc-evidence-tag>
         }
         @case ('GeneVariant') {
           <cvc-feature-variant-tag
@@ -86,9 +83,12 @@
           <cvc-feature-variant-tag
             [variant]="subject"></cvc-feature-variant-tag>
         }
+        @case ('FusionVariant') {
+          <cvc-feature-variant-tag
+            [variant]="subject"></cvc-feature-variant-tag>
+        }
         @case ('Revision') {
-          <cvc-revision-tag
-            [revision]="$any(subject)"></cvc-revision-tag>
+          <cvc-revision-tag [revision]="$any(subject)"></cvc-revision-tag>
         }
         @case ('VariantGroup') {
           <cvc-variant-group-tag

client/src/app/components/features/features-table/features-table.component.html

@@ -152,6 +152,10 @@
               [nzValue]="featureTypes.Factor"
               nzLabel="Factor">
             </nz-option>
+            <nz-option
+              [nzValue]="featureTypes.Fusion"
+              nzLabel="Fusion">
+            </nz-option>
           </nz-select>
         </th>
         <th>

client/src/app/components/fusions/fusion-summary/fusion-summary.page.html

@@ -0,0 +1,183 @@
+<nz-row [nzGutter]="[8, 16]">
+  <nz-col nzSpan="12">
+    <!-- LEFT COLUMN -->
+    <nz-row [nzGutter]="[8, 8]">
+      <!-- fusion description, sources block -->
+      <nz-col nzSpan="24">
+        <!-- description, sources -->
+        <nz-descriptions
+          nzLayout="vertical"
+          nzSize="small"
+          nzBordered="true"
+          [nzColumn]="1">
+          <!-- description -->
+          <nz-descriptions-item nzTitle="Description">
+            <p
+              *ngIf="fusion.description; else noDescription"
+              nz-typography
+              nzEllipsis
+              nzExpandable
+              [nzEllipsisRows]="8">
+              {{ fusion.description }}
+            </p>
+
+            <!-- noDescription Tpl -->
+            <ng-template #noDescription>
+              <cvc-empty-revisable notification="No description provided">
+              </cvc-empty-revisable>
+            </ng-template>
+          </nz-descriptions-item>
+        </nz-descriptions>
+      </nz-col>
+
+      <!-- sources, aliases, resource block -->
+      <nz-col nzSpan="24">
+        <nz-descriptions
+          nzLayout="horizontal"
+          nzSize="small"
+          [nzColumn]="1"
+          nzBordered="true">
+          <!-- sources -->
+          <nz-descriptions-item nzTitle="Sources">
+            <ng-container *ngIf="fusion.sources.length > 0; else noSources">
+              <cvc-tag-list>
+                <cvc-source-tag
+                  *ngFor="let source of fusion.sources"
+                  [source]="source"></cvc-source-tag>
+              </cvc-tag-list>
+            </ng-container>
+            <ng-template #noSources>
+              <span
+                nz-typography
+                nzType="secondary"
+                >None specified</span
+              >
+            </ng-template>
+          </nz-descriptions-item>
+
+          <!-- aliases -->
+          <nz-descriptions-item nzTitle="Aliases">
+            <ng-container
+              *ngIf="fusion.featureAliases.length > 0; else noAliases">
+              <nz-tag *ngFor="let alias of fusion.featureAliases">{{
+                alias
+              }}</nz-tag>
+            </ng-container>
+          </nz-descriptions-item>
+          <ng-template #noAliases>
+            <span
+              nz-typography
+              nzType="secondary"
+              >None specified</span
+            >
+          </ng-template>
+        </nz-descriptions>
+      </nz-col>
+    </nz-row>
+  </nz-col>
+
+  <!-- last revision submitted/accepted, mygeneinfo col -->
+  <nz-col nzSpan="12">
+    <!-- BLOCK: creation and deprecation events -->
+    <nz-descriptions
+      nzLayout="vertical"
+      nzSize="small"
+      [nzColumn]="{ xxl: 2, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }"
+      nzBordered="true">
+      <!-- creation/deprecation curation events -->
+      <ng-container *ngIf="fusion.creationActivity">
+        <nz-descriptions-item [nzTitle]="createdTitle">
+          by
+          <cvc-user-tag [user]="fusion.creationActivity.user"></cvc-user-tag>
+        </nz-descriptions-item>
+        <ng-template #createdTitle>
+          Created
+          <span
+            nz-typography
+            nzType="secondary">
+            ({{ fusion.creationActivity.createdAt | timeAgo }})
+          </span>
+        </ng-template>
+      </ng-container>
+      <ng-container *ngIf="fusion.deprecationActivity">
+        <nz-descriptions-item [nzTitle]="deprecatedTitle">
+          by
+          <cvc-user-tag [user]="fusion.deprecationActivity.user"></cvc-user-tag>
+        </nz-descriptions-item>
+        <ng-template #deprecatedTitle>
+          Deprecated
+          <span
+            nz-typography
+            nzType="secondary">
+            ({{ fusion.deprecationActivity.createdAt | timeAgo }})
+          </span>
+        </ng-template>
+      </ng-container>
+    </nz-descriptions>
+    <br />
+  </nz-col>
+</nz-row>
+<nz-row [nzGutter]="[8, 16]">
+  <!-- Five Prime Partner -->
+  <nz-col nzSpan="12">
+    <nz-card
+      *ngIf="fusion.fivePrimeGene"
+      nzTitle="5' Partner"
+      [nzExtra]="fivePrimeExtra">
+      <cvc-gene-base-summary
+        *ngIf="fusion.fivePrimeGene"
+        [gene]="fusion.fivePrimeGene"></cvc-gene-base-summary>
+      <ng-template #fivePrimeExtra>
+        <cvc-feature-tag [feature]="fusion.fivePrimeGene"></cvc-feature-tag>
+      </ng-template>
+    </nz-card>
+    <nz-card
+      *ngIf="!fusion.fivePrimeGene"
+      nzTitle="5' Partner"
+      [nzExtra]="fusion.fivePrimePartnerStatus | enumToTitle">
+      <ng-container
+        *ngTemplateOutlet="
+          partnerStatusDescription;
+          context: { $implicit: fusion.fivePrimePartnerStatus }
+        ">
+      </ng-container>
+    </nz-card>
+  </nz-col>
+  <!-- Three Prime Partner -->
+  <nz-col nzSpan="12">
+    <nz-card
+      *ngIf="fusion.threePrimeGene"
+      nzTitle="3' Partner"
+      [nzExtra]="threePrimeExtra">
+      <cvc-gene-base-summary
+        *ngIf="fusion.threePrimeGene"
+        [gene]="fusion.threePrimeGene"></cvc-gene-base-summary>
+      <ng-template #threePrimeExtra>
+        <cvc-feature-tag [feature]="fusion.threePrimeGene"></cvc-feature-tag>
+      </ng-template>
+    </nz-card>
+    <nz-card
+      *ngIf="!fusion.threePrimeGene"
+      nzTitle="3' Partner"
+      [nzExtra]="fusion.threePrimePartnerStatus | enumToTitle">
+      <ng-container
+        *ngTemplateOutlet="
+          partnerStatusDescription;
+          context: { $implicit: fusion.threePrimePartnerStatus }
+        ">
+      </ng-container>
+    </nz-card>
+    <ng-template
+      #partnerStatusDescription
+      let-status>
+      @switch (status) {
+        @case ('MULTIPLE') {
+          There are Multiple possible fusion partners.
+        }
+        @case ('UNKNOWN') {
+          The fusion partner is unknown.
+        }
+      }
+    </ng-template>
+  </nz-col>
+</nz-row>

client/src/app/components/fusions/fusion-summary/fusion-summary.page.less

@@ -0,0 +1,9 @@
+@import "themes/overrides/descriptions-overrides.less";
+:host {
+  display: block;
+}
+
+nz-space,
+nz-space-item {
+  width: 100%;
+}

client/src/app/components/fusions/fusion-summary/fusion-summary.page.ts

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, OnInit } from '@angular/core'
+import { CvcEmptyRevisableModule } from '@app/components/shared/empty-revisable/empty-revisable.module'
+import { CvcLinkTagModule } from '@app/components/shared/link-tag/link-tag.module'
+import { CvcTagListModule } from '@app/components/shared/tag-list/tag-list.module'
+import { CvcSourceTagModule } from '@app/components/sources/source-tag/source-tag.module'
+
+import {
+  FusionSummaryFieldsFragment,
+  SubscribableEntities,
+  SubscribableInput,
+} from '@app/generated/civic.apollo'
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'
+import { NzGridModule } from 'ng-zorro-antd/grid'
+import { NzSpaceModule } from 'ng-zorro-antd/space'
+import { NzTagModule } from 'ng-zorro-antd/tag'
+import { NzTypographyModule } from 'ng-zorro-antd/typography'
+import { CvcPipesModule } from '@app/core/pipes/pipes.module'
+import { CvcUserTagModule } from '@app/components/users/user-tag/user-tag.module'
+import { CvcGeneBaseSummaryComponent } from '@app/components/genes/gene-base-summary/gene-base-summary.page'
+import { NzCardModule } from 'ng-zorro-antd/card'
+import { CvcFeatureTagModule } from '@app/components/features/feature-tag/feature-tag.module'
+
+@Component({
+  standalone: true,
+  selector: 'cvc-fusion-summary',
+  templateUrl: './fusion-summary.page.html',
+  styleUrls: ['./fusion-summary.page.less'],
+  imports: [
+    CommonModule,
+    NzGridModule,
+    NzDescriptionsModule,
+    NzTypographyModule,
+    NzSpaceModule,
+    NzTagModule,
+    NzCardModule,
+    CvcEmptyRevisableModule,
+    CvcTagListModule,
+    CvcSourceTagModule,
+    CvcLinkTagModule,
+    CvcPipesModule,
+    CvcUserTagModule,
+    CvcGeneBaseSummaryComponent,
+    CvcFeatureTagModule,
+  ],
+})
+export class FusionSummaryComponent implements OnInit {
+  @Input() fusion!: FusionSummaryFieldsFragment
+  @Input() featureId!: number
+
+  subscribableEntity?: SubscribableInput
+
+  ngOnInit() {
+    if (this.fusion == undefined) {
+      throw new Error('Must pass a Fusion into fusion summary')
+    } else if (this.featureId === undefined) {
+      throw new Error('Must pass a feature id into fusion summary')
+    } else {
+      this.subscribableEntity = {
+        id: this.featureId,
+        entityType: SubscribableEntities.Feature,
+      }
+    }
+  }
+}

client/src/app/components/fusions/fusions-menu/fusions-menu.component.html

@@ -0,0 +1,62 @@
+<nz-spin [nzSpinning]="loading$ | ngrxPush">
+  <ng-container *ngIf="menuFusions$ | ngrxPush as fusions">
+    <nz-card [nzTitle]="cardTitle">
+      <ng-template #cardTitle>
+        <ng-container *ngIf="totalFusions$ | ngrxPush as total">
+          <span
+            nz-typography
+            nzType="secondary"
+            >{{ total }} Total</span
+          >
+          <span
+            nz-typography
+            *ngIf="total > fusions.length"
+            nzType="secondary"
+            >({{ fusions.length }} displayed)</span
+          >
+        </ng-container>
+      </ng-template>
+
+      <nz-row>
+        <nz-col nzSpan="24">
+          <cvc-tag-list size="sm">
+            <ng-container *ngFor="let fusion of fusions">
+              <cvc-feature-tag
+                *ngIf="fusion"
+                [feature]="fusion"></cvc-feature-tag>
+            </ng-container>
+          </cvc-tag-list>
+        </nz-col>
+      </nz-row>
+      <ng-container *ngIf="pageInfo$ | ngrxPush as pageInfo">
+        <nz-row
+          id="load-more-btn"
+          *ngIf="pageInfo.hasNextPage && pageInfo.endCursor">
+          <button
+            nz-button
+            nzType="default"
+            nzSize="small"
+            style="width: 95%"
+            (click)="fetchMore(pageInfo.endCursor)">
+            Load More
+          </button>
+          <nz-select
+            [(ngModel)]="this.pageSize"
+            style="width: 5%"
+            nzSize="small">
+            <nz-option
+              nzLabel="50"
+              [nzValue]="50"></nz-option>
+            <nz-option
+              nzLabel="100"
+              [nzValue]="100"></nz-option>
+            <nz-option
+              nzLabel="300"
+              [nzValue]="300"></nz-option>
+          </nz-select>
+        </nz-row>
+      </ng-container>
+    </nz-card>
+  </ng-container>
+</nz-spin>
+

client/src/app/components/fusions/fusions-menu/fusions-menu.component.less

@@ -0,0 +1,24 @@
+@import "themes/global-variables.less";
+
+:host {
+  display: block;
+}
+
+#variant-filters {
+  // need to specify a width to the filters form, or the name filter
+  // input will change its width depending on if its nameInputClearTpl is displayed
+  // displayed
+  #name-filter-group {
+    width: 175px;
+  }
+  // all form items get a right margin which creates an unsightly gap on the right :(
+  // so we remove that here
+  nz-form-item:last-child {
+    margin-right: 0;
+  }
+}
+
+#load-more-btn {
+  // apply the same margin to the button row as the card margin
+  margin-top: @default-padding-sm;
+}