feature/improve-navigator-ordering

src/app/complex/complex-results/complex-navigator/table-structure/model/navigator-component.model.ts

@@ -30,7 +30,7 @@ export interface INavigatorComponent {
 
   get timesAppearing(): number;
 
-  get indexAppearing(): number;
+  get indexAppearing(): number[];
 
   get isOrthologGroup(): boolean;
 
@@ -40,7 +40,7 @@ export interface INavigatorComponent {
 
   set timesAppearing(value: number);
 
-  set indexAppearing(value: number);
+  set indexAppearing(value: number[]);
 
   get componentIds(): string[];
 

src/app/complex/complex-results/complex-navigator/table-structure/model/navigator-ortholog-group.model.ts

@@ -9,15 +9,15 @@ export class NavigatorOrthologGroup implements INavigatorComponent {
   private _expanded: boolean;
   private _subComponents: INavigatorComponent[];
   private _timesAppearing: number;
-  private _indexAppearing: number;
+  private _indexAppearing: number[];
 
   constructor(orthologXref: XRef, subComponents: INavigatorComponent[]) {
     this._orthologXref = orthologXref;
     this._subComponents = subComponents;
     this._hidden = false;
     this._expanded = false;
     this._timesAppearing = 0;
-    this._indexAppearing = 0;
+    this._indexAppearing = [];
   }
 
   get isOrthologGroup(): boolean {
@@ -94,7 +94,7 @@ export class NavigatorOrthologGroup implements INavigatorComponent {
     return this._timesAppearing;
   }
 
-  get indexAppearing(): number {
+  get indexAppearing(): number[] {
     return this._indexAppearing;
   }
 
@@ -110,7 +110,7 @@ export class NavigatorOrthologGroup implements INavigatorComponent {
     this._timesAppearing = value;
   }
 
-  set indexAppearing(value: number) {
+  set indexAppearing(value: number[]) {
     this._indexAppearing = value;
   }
 

src/app/complex/complex-results/complex-navigator/table-structure/model/navigator-simple-component.model.ts

@@ -11,15 +11,15 @@ export class NavigatorSimpleComponent implements INavigatorComponent {
   private _subComponents: INavigatorComponent[];
 
   private _timesAppearing: number;
-  private _indexAppearing: number;
+  private _indexAppearing: number[];
 
   constructor(interactor: ComplexComponent, isSubComplex: boolean) {
     this._interactor = interactor;
     this._isSubComplex = isSubComplex;
     this._hidden = false;
     this._expanded = false;
     this._timesAppearing = 0;
-    this._indexAppearing = 0;
+    this._indexAppearing = [];
     this._complexComponents = null;
     this._subComponents = null;
   }
@@ -80,7 +80,7 @@ export class NavigatorSimpleComponent implements INavigatorComponent {
     return this._timesAppearing;
   }
 
-  get indexAppearing(): number {
+  get indexAppearing(): number[] {
     return this._indexAppearing;
   }
 
@@ -101,7 +101,7 @@ export class NavigatorSimpleComponent implements INavigatorComponent {
     this._timesAppearing = value;
   }
 
-  set indexAppearing(value: number) {
+  set indexAppearing(value: number[]) {
     this._indexAppearing = value;
   }
 

src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.html

@@ -1,7 +1,7 @@
 <div class="Complex-navigator">
   <table class="interactors-table"
          [ngClass]="{'inheritedWidth': complexes().length > 6}">
-    @for (interactor of navigatorComponents(); track i; let i = $index) {
+    @for (interactor of sortedNavigatorComponents(); track i; let i = $index) {
       @if (!interactor.hidden) {
         <tr [class.ortholog]="!!interactor.isOrthologGroup && state.mergeOrthologs()">
           @for (range of ranges; track range.value) {
@@ -41,7 +41,7 @@
               <cp-table-main-interactor
                 [complex]="complex"
                 [i]="i"
-                [navigatorComponents]="navigatorComponents()"
+                [navigatorComponents]="sortedNavigatorComponents()"
               ></cp-table-main-interactor>
             </td>
           }
@@ -78,7 +78,7 @@
                     [complex]="complex"
                     [i]="i"
                     [j]="j"
-                    [navigatorComponents]="navigatorComponents()"/>
+                    [navigatorComponents]="sortedNavigatorComponents()"/>
                 </td>
               }
               @if (navigatorComplexes.length > 6) {

src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.ts

@@ -3,10 +3,7 @@ import {Complex} from '../../../../shared/model/complex-results/complex.model';
 import {NavigatorComplex} from '../model/navigator-complex.model';
 import {INavigatorComponent} from '../model/navigator-component.model';
 import {findComponentInComplex} from '../../complex-navigator-utils';
-import {
-  NavigatorComponentSorting,
-  NavigatorStateService
-} from '../../service/state/complex-navigator-display.service';
+import {NavigatorComponentSorting, NavigatorStateService} from '../../service/state/complex-navigator-display.service';
 
 interface Range {
   value: string;
@@ -26,6 +23,8 @@ export class TableInteractorColumnComponent {
 
   isOrganismSorting = computed(() => this.state.componentsSorting() === NavigatorComponentSorting.ORGANISM);
 
+  sortedNavigatorComponents = computed(() => this.calculateTimesAppearing(this.complexes(), this.navigatorComponents()));
+
   navigatorComplexes: NavigatorComplex[];
   ranges: Range[] = [];
 
@@ -35,8 +34,7 @@ export class TableInteractorColumnComponent {
   };
 
   constructor(public state: NavigatorStateService) {
-    effect(() => this.calculateTimesAppearing(this.complexes(), this.navigatorComponents()));
-    effect(() => this.sortNavigatorComponents(this.navigatorComponents(), this.complexes(), this.state.componentsSorting()));
+    effect(() => this.sortNavigatorComponents(this.sortedNavigatorComponents(), this.complexes(), this.state.componentsSorting()));
   }
 
   private sortNavigatorComponents(navigatorComponents: INavigatorComponent[],
@@ -45,66 +43,67 @@ export class TableInteractorColumnComponent {
     if (!!navigatorComponents && !!complexes) {
       // When we sort, we update the local variable in the component instead of just sorting inside the navigatorInteractors object.
       // This way we enforce an update on the objects used in the HTML and angular needs to re-run the signals to draw the table.
-      this.classifyComponents(componentsSorting);
-      this.navigatorComplexes = this.createNavigatorComplexes(complexes);
+      this.classifyComponents(navigatorComponents, componentsSorting);
+      this.navigatorComplexes = this.createNavigatorComplexes(navigatorComponents, complexes);
     }
   }
 
-  private classifyComponents(componentsSorting: NavigatorComponentSorting): void {
-    if (!!componentsSorting && !!this.navigatorComponents() && this.navigatorComponents().length > 0) {
+  private classifyComponents(navigatorComponents: INavigatorComponent[],
+                             componentsSorting: NavigatorComponentSorting): void {
+    if (!!componentsSorting && !!navigatorComponents && navigatorComponents.length > 0) {
       if (componentsSorting === NavigatorComponentSorting.TYPE || componentsSorting === NavigatorComponentSorting.ORGANISM) {
-        this.classifyBy(componentsSorting);
+        this.classifyBy(navigatorComponents, componentsSorting);
       } else {
-        this.classifyComponentsByOccurrence();
+        this.classifyComponentsByOccurrence(navigatorComponents);
       }
     }
   }
 
   toggleSubcomplexExpandable(i: number): void {
-    this.navigatorComponents()[i].expanded = !this.navigatorComponents()[i].expanded;
+    this.sortedNavigatorComponents()[i].expanded = !this.sortedNavigatorComponents()[i].expanded;
 
-    if (this.navigatorComponents()[i].expanded) {
-      this.collapseAllButOne(i);
-      this.hideRowsDisplayedAsSubcomponents(i);
+    if (this.sortedNavigatorComponents()[i].expanded) {
+      this.collapseAllButOne(this.sortedNavigatorComponents(), i);
+      this.hideRowsDisplayedAsSubcomponents(this.sortedNavigatorComponents(), i);
     } else {
-      this.displayAllRows();
+      this.displayAllRows(this.sortedNavigatorComponents());
     }
 
     // Something has been expanded or collapsed, we need to sort and recalculate the start and end indexes for the lines
-    this.sortNavigatorComponents(this.navigatorComponents(), this.complexes(), this.state.componentsSorting());
+    this.sortNavigatorComponents(this.sortedNavigatorComponents(), this.complexes(), this.state.componentsSorting());
   }
 
-  private collapseAllButOne(rowIndex: number): void {
-    for (let i = 0; i < this.navigatorComponents().length; i++) {
+  private collapseAllButOne(navigatorComponents: INavigatorComponent[], rowIndex: number): void {
+    for (let i = 0; i < navigatorComponents.length; i++) {
       if (rowIndex !== i) {
-        this.navigatorComponents()[i].expanded = false;
+        navigatorComponents[i].expanded = false;
       }
     }
   }
 
-  private hideRowsDisplayedAsSubcomponents(rowIndex: number): void {
-    if (!!this.navigatorComponents()[rowIndex].subComponents) {
+  private hideRowsDisplayedAsSubcomponents(navigatorComponents: INavigatorComponent[], rowIndex: number): void {
+    if (!!navigatorComponents[rowIndex].subComponents) {
       const subInteractorIds: string[] =
-        this.navigatorComponents()[rowIndex].subComponents.map(component => component.identifier);
-      for (let i = 0; i < this.navigatorComponents().length; i++) {
+        navigatorComponents[rowIndex].subComponents.map(component => component.identifier);
+      for (let i = 0; i < navigatorComponents.length; i++) {
         if (rowIndex !== i) {
-          this.navigatorComponents()[i].hidden =
-            !!subInteractorIds.includes(this.navigatorComponents()[i].identifier);
+          navigatorComponents[i].hidden =
+            !!subInteractorIds.includes(navigatorComponents[i].identifier);
         }
       }
     }
   }
 
-  private displayAllRows(): void {
-    for (let i = 0; i < this.navigatorComponents().length; i++) {
-      this.navigatorComponents()[i].hidden = false;
+  private displayAllRows(navigatorComponents: INavigatorComponent[]): void {
+    for (let i = 0; i < navigatorComponents.length; i++) {
+      navigatorComponents[i].hidden = false;
     }
   }
 
-  private createNavigatorComplexes(complexes: Complex[]): NavigatorComplex[] {
+  private createNavigatorComplexes(navigatorComponents: INavigatorComponent[], complexes: Complex[]): NavigatorComplex[] {
     const navigatorComplexes: NavigatorComplex[] = [];
     for (const complex of complexes) {
-      navigatorComplexes.push(this.calculateStartAndEndIndexes(complex));
+      navigatorComplexes.push(this.calculateStartAndEndIndexes(navigatorComponents, complex));
     }
     return navigatorComplexes;
   }
@@ -129,7 +128,7 @@ export class TableInteractorColumnComponent {
     return Math.max(valueA, valueB);
   }
 
-  private calculateStartAndEndIndexes(complex: Complex): NavigatorComplex {
+  private calculateStartAndEndIndexes(navigatorComponents: INavigatorComponent[], complex: Complex): NavigatorComplex {
     const navigatorComplex: NavigatorComplex = {
       complex,
       startComponentIndex: null,
@@ -140,17 +139,17 @@ export class TableInteractorColumnComponent {
 
     // We iterate through the components to find the first and last one part of the complex
     // We do this to be able to draw a line connecting all components in the complex
-    for (let i = 0; i < this.navigatorComponents().length; i++) {
-      if (!this.navigatorComponents()[i].hidden) {
-        if (!!findComponentInComplex(complex, this.navigatorComponents()[i].componentIds, this.navigatorComponents())) {
-          this.updateComponentIndexes(navigatorComplex, i);
-        } else if (this.navigatorComponents()[i].expanded) {
+    for (let i = 0; i < navigatorComponents.length; i++) {
+      if (!navigatorComponents[i].hidden) {
+        if (!!findComponentInComplex(complex, navigatorComponents[i].componentIds, navigatorComponents)) {
+          this.updateComponentIndexes(navigatorComponents, navigatorComplex, i);
+        } else if (navigatorComponents[i].expanded) {
           // The component is not part of the complex, but it has subcomponents and it is expanded.
           // This means the subcomponents are visible, and any of them could be part of the complex.
           // In that case, the line could start or end on any of those subcomponents
-          for (let j = 0; j < this.navigatorComponents()[i].subComponents.length; j++) {
+          for (let j = 0; j < navigatorComponents[i].subComponents.length; j++) {
             if (!!findComponentInComplex(
-              complex, [this.navigatorComponents()[i].subComponents[j].identifier], this.navigatorComponents())) {
+              complex, [navigatorComponents[i].subComponents[j].identifier], navigatorComponents)) {
 
               this.updateSubcomponentIndexes(navigatorComplex, i, j);
             }
@@ -162,15 +161,16 @@ export class TableInteractorColumnComponent {
     return navigatorComplex;
   }
 
-  private updateComponentIndexes(navigatorComplex: NavigatorComplex,
+  private updateComponentIndexes(navigatorComponents: INavigatorComponent[],
+                                 navigatorComplex: NavigatorComplex,
                                  componentIndex: number): void {
 
     // The component is part of the complex, we update the start and end indices for the component
     // line as it may start in this component
     navigatorComplex.startComponentIndex = this.getMinValue(navigatorComplex.startComponentIndex, componentIndex);
     navigatorComplex.endComponentIndex = this.getMaxValue(navigatorComplex.endComponentIndex, componentIndex);
 
-    const navigatorComponent: INavigatorComponent = this.navigatorComponents()[componentIndex];
+    const navigatorComponent: INavigatorComponent = navigatorComponents[componentIndex];
     if (navigatorComponent.expanded) {
       // If the component has subcomponents, as the component is part of the complex, the line started at the component or before,
       // so it must connect from the component to the subcomponents, so we start it at -1 to make sure it starts at the component cell
@@ -186,7 +186,7 @@ export class TableInteractorColumnComponent {
         // to know where the line ends
         for (let j = 0; j < navigatorComponent.subComponents.length; j++) {
           if (!!findComponentInComplex(
-            navigatorComplex.complex, [navigatorComponent.subComponents[j].identifier], this.navigatorComponents())) {
+            navigatorComplex.complex, [navigatorComponent.subComponents[j].identifier], navigatorComponents)) {
             this.updateSubcomponentIndexes(navigatorComplex, componentIndex, j);
           }
         }
@@ -206,42 +206,45 @@ export class TableInteractorColumnComponent {
   }
 
   private compareFn(a: INavigatorComponent, b: INavigatorComponent) {
-    return -(b.indexAppearing - a.indexAppearing) || // First by order of appearance (staircase effect)
-      -(b.timesAppearing - a.timesAppearing); // Then by reversed occurrence, in order to minimize edge length
-  }
+    for (let i = 0; i < Math.max(a.indexAppearing.length, b.indexAppearing.length); i++) {
+      const comparator = (a.indexAppearing[i] || 0) - (b.indexAppearing[i] || 0);
+      if (comparator !== 0) return comparator;
+    }
+    return 0;
+ }
 
-  private classifyComponentsByOccurrence() {
-    this.navigatorComponents().sort(this.compareFn.bind(this));
+  private classifyComponentsByOccurrence(navigatorComponents: INavigatorComponent[]) {
+    navigatorComponents.sort(this.compareFn.bind(this));
     this.ranges = [];
   }
 
-  public classifyBy(componentsSorting: NavigatorComponentSorting) {
+  public classifyBy(navigatorComponents: INavigatorComponent[], componentsSorting: NavigatorComponentSorting) {
     const key = componentsSorting.valueOf();
-    this.navigatorComponents().sort((a, b) => {
+    navigatorComponents.sort((a, b) => {
       const aValue = this.getValueOfSortingField(a, componentsSorting);
       const bValue = this.getValueOfSortingField(b, componentsSorting);
       return this.timesAppearingBy[key].get(bValue) - this.timesAppearingBy[key].get(aValue) ||
         bValue.localeCompare(aValue) ||
         this.compareFn(a, b);
     });
-    this.calculateRangesBy(componentsSorting);
+    this.calculateRangesBy(navigatorComponents, componentsSorting);
   }
 
-  private calculateRangesBy(componentsSorting: NavigatorComponentSorting) {
+  private calculateRangesBy(navigatorComponents: INavigatorComponent[], componentsSorting: NavigatorComponentSorting) {
     const ranges: Range[] = [];
     let length = 0;
     let start = null;
-    for (let i = 0; i < this.navigatorComponents().length; i++) {
-      if (!this.navigatorComponents()[i].hidden) {
+    for (let i = 0; i < navigatorComponents.length; i++) {
+      if (!navigatorComponents[i].hidden) {
         length += 1;
         if (start === null) {
           start = i;
         }
       }
-      const value = this.getValueOfSortingField(this.navigatorComponents()[i], componentsSorting);
-      if (!this.navigatorComponents()[i + 1]
-        || (this.navigatorComponents()[i].expanded)
-        || value !== this.getValueOfSortingField(this.navigatorComponents()[i + 1], componentsSorting)) {
+      const value = this.getValueOfSortingField(navigatorComponents[i], componentsSorting);
+      if (!navigatorComponents[i + 1]
+        || (navigatorComponents[i].expanded)
+        || value !== this.getValueOfSortingField(navigatorComponents[i + 1], componentsSorting)) {
         if (start !== null) {
           ranges.push({value, start, length});
           start = null;
@@ -252,10 +255,6 @@ export class TableInteractorColumnComponent {
     this.ranges = ranges;
   }
 
-  // isComponentsSortingSet() {
-  //   return this.state.componentsSorting() === 'Type' || this.state.componentsSorting() === 'Organism';
-  // }
-
   getExpandedRowClass(i: number, length: number): string {
     if (i === 0) {
       if (length === 1) {
@@ -270,6 +269,8 @@ export class TableInteractorColumnComponent {
   }
 
   private calculateTimesAppearing(complexes: Complex[], navigatorComponents: INavigatorComponent[]) {
+    const sortedNavigatorComponents: INavigatorComponent[] = [];
+
     // Initialise times appearing by type or organism
     for (const map of Object.values(this.timesAppearingBy)) {
       map.clear();
@@ -291,7 +292,9 @@ export class TableInteractorColumnComponent {
           }
         }
       }
+      sortedNavigatorComponents.push(component);
     }
+    return sortedNavigatorComponents;
   }
 
   private getValueOfSortingField(component: INavigatorComponent, componentsSorting: string): string {