Skip to content

Commit

Permalink
Updates demo-showcase. Updates structure viewer page.
Browse files Browse the repository at this point in the history
  • Loading branch information
damiclem committed Sep 12, 2024
1 parent 6c04a5c commit 9ebd303
Show file tree
Hide file tree
Showing 32 changed files with 6,401 additions and 6,362 deletions.
4 changes: 2 additions & 2 deletions docs/404.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>@charset "UTF-8";:root{--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;--bs-yellow: #ffc107;--bs-green: #198754;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #000;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #0d6efd;--bs-secondary: #6c757d;--bs-success: #198754;--bs-info: #0dcaf0;--bs-warning: #ffc107;--bs-danger: #dc3545;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-primary-rgb: 13, 110, 253;--bs-secondary-rgb: 108, 117, 125;--bs-success-rgb: 25, 135, 84;--bs-info-rgb: 13, 202, 240;--bs-warning-rgb: 255, 193, 7;--bs-danger-rgb: 220, 53, 69;--bs-light-rgb: 248, 249, 250;--bs-dark-rgb: 33, 37, 41;--bs-primary-text-emphasis: #052c65;--bs-secondary-text-emphasis: #2b2f32;--bs-success-text-emphasis: #0a3622;--bs-info-text-emphasis: #055160;--bs-warning-text-emphasis: #664d03;--bs-danger-text-emphasis: #58151c;--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: #cfe2ff;--bs-secondary-bg-subtle: #e2e3e5;--bs-success-bg-subtle: #d1e7dd;--bs-info-bg-subtle: #cff4fc;--bs-warning-bg-subtle: #fff3cd;--bs-danger-bg-subtle: #f8d7da;--bs-light-bg-subtle: #fcfcfd;--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: #9ec5fe;--bs-secondary-border-subtle: #c4c8cb;--bs-success-border-subtle: #a3cfbb;--bs-info-border-subtle: #9eeaf9;--bs-warning-border-subtle: #ffe69c;--bs-danger-border-subtle: #f1aeb5;--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 0, 0, 0;--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size: 1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #212529;--bs-body-color-rgb: 33, 37, 41;--bs-body-bg: #fff;--bs-body-bg-rgb: 255, 255, 255;--bs-emphasis-color: #000;--bs-emphasis-color-rgb: 0, 0, 0;--bs-secondary-color: rgba(33, 37, 41, .75);--bs-secondary-color-rgb: 33, 37, 41;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233, 236, 239;--bs-tertiary-color: rgba(33, 37, 41, .5);--bs-tertiary-color-rgb: 33, 37, 41;--bs-tertiary-bg: #f8f9fa;--bs-tertiary-bg-rgb: 248, 249, 250;--bs-heading-color: inherit;--bs-link-color: #0d6efd;--bs-link-color-rgb: 13, 110, 253;--bs-link-decoration: underline;--bs-link-hover-color: #0a58ca;--bs-link-hover-color-rgb: 10, 88, 202;--bs-code-color: #d63384;--bs-highlight-color: #212529;--bs-highlight-bg: #fff3cd;--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #dee2e6;--bs-border-color-translucent: rgba(0, 0, 0, .175);--bs-border-radius: .375rem;--bs-border-radius-sm: .25rem;--bs-border-radius-lg: .5rem;--bs-border-radius-xl: 1rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width: .25rem;--bs-focus-ring-opacity: .25;--bs-focus-ring-color: rgba(13, 110, 253, .25);--bs-form-valid-color: #198754;--bs-form-valid-border-color: #198754;--bs-form-invalid-color: #dc3545;--bs-form-invalid-border-color: #dc3545}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs: 0;--bs-breakpoint-sm: 576px;--bs-breakpoint-md: 768px;--bs-breakpoint-lg: 992px;--bs-breakpoint-xl: 1200px;--bs-breakpoint-xxl: 1400px}html,body{height:100vh}body{display:flex;flex-direction:column;flex-wrap:nowrap}
</style><link rel="stylesheet" href="styles-P6OGNY5R.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-P6OGNY5R.css"></noscript><link rel="modulepreload" href="chunk-7HSU2V6S.js"><link rel="modulepreload" href="chunk-AIDIBLDN.js"></head>
</style><link rel="stylesheet" href="styles-V5LV47QP.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-V5LV47QP.css"></noscript><link rel="modulepreload" href="chunk-7IXBJGWD.js"><link rel="modulepreload" href="chunk-AIDIBLDN.js"></head>
<body>
<app-root></app-root>
<script src="polyfills-6EAL64PA.js" type="module"></script><script src="scripts-FR7HA4WI.js" defer></script><script src="main-PX7JUVYW.js" type="module"></script></body>
<script src="polyfills-SCHOHYNV.js" type="module"></script><script src="scripts-FR7HA4WI.js" defer></script><script src="main-ZGHTIOLU.js" type="module"></script></body>
</html>
1 change: 1 addition & 0 deletions docs/chunk-2YY2TUG6.js

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions docs/chunk-7HSU2V6S.js

This file was deleted.

6 changes: 6 additions & 0 deletions docs/chunk-7IXBJGWD.js

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions docs/chunk-AUHQXMB5.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/chunk-DXJMA4ZL.js

This file was deleted.

6,118 changes: 0 additions & 6,118 deletions docs/chunk-GEITL44J.js

This file was deleted.

15 changes: 15 additions & 0 deletions docs/chunk-IYUAAIGS.js

Large diffs are not rendered by default.

24 changes: 0 additions & 24 deletions docs/chunk-LMDH6WN4.js

This file was deleted.

11 changes: 0 additions & 11 deletions docs/chunk-MO2H4WBL.js

This file was deleted.

6 changes: 6 additions & 0 deletions docs/chunk-UXGPRRX3.js

Large diffs are not rendered by default.

6,102 changes: 6,102 additions & 0 deletions docs/chunk-VFAIDUQW.js

Large diffs are not rendered by default.

15 changes: 0 additions & 15 deletions docs/chunk-ZHWCBLNK.js

This file was deleted.

4 changes: 2 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>@charset "UTF-8";:root{--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;--bs-yellow: #ffc107;--bs-green: #198754;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #000;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #0d6efd;--bs-secondary: #6c757d;--bs-success: #198754;--bs-info: #0dcaf0;--bs-warning: #ffc107;--bs-danger: #dc3545;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-primary-rgb: 13, 110, 253;--bs-secondary-rgb: 108, 117, 125;--bs-success-rgb: 25, 135, 84;--bs-info-rgb: 13, 202, 240;--bs-warning-rgb: 255, 193, 7;--bs-danger-rgb: 220, 53, 69;--bs-light-rgb: 248, 249, 250;--bs-dark-rgb: 33, 37, 41;--bs-primary-text-emphasis: #052c65;--bs-secondary-text-emphasis: #2b2f32;--bs-success-text-emphasis: #0a3622;--bs-info-text-emphasis: #055160;--bs-warning-text-emphasis: #664d03;--bs-danger-text-emphasis: #58151c;--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: #cfe2ff;--bs-secondary-bg-subtle: #e2e3e5;--bs-success-bg-subtle: #d1e7dd;--bs-info-bg-subtle: #cff4fc;--bs-warning-bg-subtle: #fff3cd;--bs-danger-bg-subtle: #f8d7da;--bs-light-bg-subtle: #fcfcfd;--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: #9ec5fe;--bs-secondary-border-subtle: #c4c8cb;--bs-success-border-subtle: #a3cfbb;--bs-info-border-subtle: #9eeaf9;--bs-warning-border-subtle: #ffe69c;--bs-danger-border-subtle: #f1aeb5;--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 0, 0, 0;--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size: 1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #212529;--bs-body-color-rgb: 33, 37, 41;--bs-body-bg: #fff;--bs-body-bg-rgb: 255, 255, 255;--bs-emphasis-color: #000;--bs-emphasis-color-rgb: 0, 0, 0;--bs-secondary-color: rgba(33, 37, 41, .75);--bs-secondary-color-rgb: 33, 37, 41;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233, 236, 239;--bs-tertiary-color: rgba(33, 37, 41, .5);--bs-tertiary-color-rgb: 33, 37, 41;--bs-tertiary-bg: #f8f9fa;--bs-tertiary-bg-rgb: 248, 249, 250;--bs-heading-color: inherit;--bs-link-color: #0d6efd;--bs-link-color-rgb: 13, 110, 253;--bs-link-decoration: underline;--bs-link-hover-color: #0a58ca;--bs-link-hover-color-rgb: 10, 88, 202;--bs-code-color: #d63384;--bs-highlight-color: #212529;--bs-highlight-bg: #fff3cd;--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #dee2e6;--bs-border-color-translucent: rgba(0, 0, 0, .175);--bs-border-radius: .375rem;--bs-border-radius-sm: .25rem;--bs-border-radius-lg: .5rem;--bs-border-radius-xl: 1rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width: .25rem;--bs-focus-ring-opacity: .25;--bs-focus-ring-color: rgba(13, 110, 253, .25);--bs-form-valid-color: #198754;--bs-form-valid-border-color: #198754;--bs-form-invalid-color: #dc3545;--bs-form-invalid-border-color: #dc3545}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs: 0;--bs-breakpoint-sm: 576px;--bs-breakpoint-md: 768px;--bs-breakpoint-lg: 992px;--bs-breakpoint-xl: 1200px;--bs-breakpoint-xxl: 1400px}html,body{height:100vh}body{display:flex;flex-direction:column;flex-wrap:nowrap}
</style><link rel="stylesheet" href="styles-P6OGNY5R.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-P6OGNY5R.css"></noscript><link rel="modulepreload" href="chunk-7HSU2V6S.js"><link rel="modulepreload" href="chunk-AIDIBLDN.js"></head>
</style><link rel="stylesheet" href="styles-V5LV47QP.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-V5LV47QP.css"></noscript><link rel="modulepreload" href="chunk-7IXBJGWD.js"><link rel="modulepreload" href="chunk-AIDIBLDN.js"></head>
<body>
<app-root></app-root>
<script src="polyfills-6EAL64PA.js" type="module"></script><script src="scripts-FR7HA4WI.js" defer></script><script src="main-PX7JUVYW.js" type="module"></script></body>
<script src="polyfills-SCHOHYNV.js" type="module"></script><script src="scripts-FR7HA4WI.js" defer></script><script src="main-ZGHTIOLU.js" type="module"></script></body>
</html>
2 changes: 1 addition & 1 deletion docs/main-PX7JUVYW.js → docs/main-ZGHTIOLU.js

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions docs/polyfills-6EAL64PA.js

This file was deleted.

2 changes: 2 additions & 0 deletions docs/polyfills-SCHOHYNV.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/styles-P6OGNY5R.css

This file was deleted.

1 change: 1 addition & 0 deletions docs/styles-V5LV47QP.css

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,10 @@ <h1>Structure viewer</h1>
releases of Angular and automatized the most common features of Mol*.
</p>
</div>
<!-- TODO Remove this -->
<div class="row">
<button class="btn btn-primary" (click)="changeSource()">
Change source
</button>
<!-- Sequence viewer -->
<div class="col-6" [ngClass]="{'visually-hidden': hideStructureComponent$ | async}">
<!-- Define squared container -->
<div class="position-relative overflow-hidden squared rounded">
<!-- Define placeholder -->
<div class="position-absolute left-0 top-0 w-100 h-100 placeholder"></div>
<!-- Define the viewer -->
<ngx-structure-viewer [loci]="loci"
[settings]="settings$ | async"
[source]="source$ | async"
(structureLoadFail$)="structureLoadFailed()"/>
</div>
<!-- Change settings -->
<div class="col-3">
<!-- -->
</div>
</div>
<!-- Section: example -->
<div class="mb-3">
<!-- Section: choose sources -->
<!-- <app-section-sources></app-section-sources> -->
<app-section-sources></app-section-sources>
<!-- Section: color chains -->
<!-- <app-section-chains></app-section-chains> -->
<!-- Section: show contacts -->
Expand Down
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);
}
}
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
// import { SectionInteractionsComponent } from './sections/section-interactions.component';
// import { SectionSourcesComponent } from './sections/section-sources.component';
import { SectionSourcesComponent } from './sections/section-sources.component';
// import { SectionChainsComponent } from './sections/section-chains.component';
import { PageStructureViewerComponent } from './page-structure-viewer.component';
import { NgxStructureViewerComponent } from "@ngx-structure-viewer";
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

// Define sub-routes
const routes: Routes = [{ path: '', component: PageStructureViewerComponent }];

@NgModule({
declarations: [
PageStructureViewerComponent,
// SectionInteractionsComponent,
// SectionSourcesComponent,
SectionSourcesComponent,
// SectionChainsComponent,
],
imports: [
NgxStructureViewerComponent,
RouterModule.forChild(routes),
RouterModule.forChild([
{ path: '', component: PageStructureViewerComponent }
]),
HttpClientModule,
CommonModule,
]
Expand Down
Loading

0 comments on commit 9ebd303

Please sign in to comment.