-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
- Loading branch information
There are no files selected for viewing
Large diffs are not rendered by default.
This file was deleted.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
This file was deleted.
This file was deleted.
Large diffs are not rendered by default.
This file was deleted.
This file was deleted.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
This file was deleted.
Large diffs are not rendered by default.
This file was deleted.
Large diffs are not rendered by default.
This file was deleted.
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,85 +1,12 @@ | ||
import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
import { Locus, Settings, Source } from '@ngx-structure-viewer'; | ||
import { BehaviorSubject, map, Observable, shareReplay } from 'rxjs'; | ||
import { ThemeSelectorService } from '../theme-selector/theme-selector.service'; | ||
|
||
@Component({ | ||
// eslint-disable-next-line @angular-eslint/component-selector | ||
selector : 'page-structure-viewer', | ||
// Handle representation | ||
templateUrl : './page-structure-viewer.component.html', | ||
styleUrl : './page-structure-viewer.component.scss', | ||
changeDetection : ChangeDetectionStrategy.OnPush, | ||
// eslint-disable-next-line @angular-eslint/component-selector | ||
selector : 'page-structure-viewer', | ||
}) | ||
export class PageStructureViewerComponent { | ||
|
||
readonly LIGHT: Partial<Settings> = { | ||
'background-color' : '#dee2e6', | ||
'backbone-color' : '#1a1d2080', | ||
}; | ||
|
||
readonly DARK: Partial<Settings> = { | ||
'background-color' : '#1a1d20', | ||
'backbone-color' : '#dee2e680', | ||
}; | ||
|
||
// Define source | ||
source$ = new BehaviorSubject<Source>({ | ||
link : 'https://files.rcsb.org/download/1XXXXX.cif', | ||
format : 'mmcif', | ||
type : 'remote', | ||
label : '3HHR', | ||
binary : false, | ||
}); | ||
|
||
// NOTE Used the IBM colorblind palette | ||
loci: Locus[] = [ | ||
// { chain: 'A', color: '#ff000080' }, // Color chain A (only chain available) | ||
{start : '43', end : '43', chain : 'A', color : '#648fff'}, // Color first beta strand | ||
{start : '43', end : '43', chain : 'B', color : '#ff048b'}, // Color first beta strand | ||
// { start: '32', end: '35', chain: 'A', color: '#785EF080' }, // Color second beta strand | ||
// { start: '23', end: '30', chain: 'A', color: '#DC267F80' }, // Color first alpha helix | ||
// { start: '7', end: '19', chain: 'A', color: '#FE610080' }, // Color second alpha helix | ||
]; | ||
|
||
public settings$: Observable<Partial<Settings>>; | ||
|
||
public hideStructureComponent$ = new BehaviorSubject<boolean>(false); | ||
|
||
constructor(public themeSelectorService: ThemeSelectorService) { | ||
// Define settings observable | ||
this.settings$ = this.themeSelectorService.theme$.pipe( | ||
// Map theme to settings | ||
map((theme) => theme === 'light' ? this.LIGHT : this.DARK), | ||
// Cache results | ||
shareReplay(1), | ||
); | ||
} | ||
|
||
changeSource() { | ||
this.source$.next({ | ||
link : 'https://files.rcsb.org/download/1TSR.cif', | ||
format : 'mmcif', | ||
type : 'remote', | ||
label : '1TSR', | ||
binary : false, | ||
}); // Change source | ||
|
||
|
||
const locis = [ | ||
{start : '1', end : '10', chain : 'A', color : '#2fe500'}, // Color first beta strand | ||
{start : '10', end : '20', chain : 'A', color : '#5e46c7'}, // Color first beta strand | ||
{start : '20', end : '30', chain : 'A', color : '#b71db0'}, // Color first beta strand | ||
] | ||
|
||
const idx = Math.random() * locis.length | 0; | ||
|
||
this.hideStructureComponent$.next(false); | ||
|
||
this.loci = [locis[idx]]; | ||
} | ||
|
||
structureLoadFailed() { | ||
this.hideStructureComponent$.next(true); | ||
} | ||
} |