Skip to content

Commit 91e0606

Browse files
noatgnunoatgnu
committed
update
1 parent 7ded9c2 commit 91e0606

16 files changed

Lines changed: 1191 additions & 343 deletions

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
<body>
1717
<app-root></app-root>
1818
<noscript>Please enable JavaScript to continue using this application.</noscript>
19-
<link rel="modulepreload" href="chunk-54PYZ7RU.js"><link rel="modulepreload" href="chunk-N57AJHA5.js"><script src="polyfills-S3KRBCMK.js" type="module"></script><script src="scripts-TSGU23AO.js" defer></script><script src="main-OSEZLS2M.js" type="module"></script></body>
19+
<link rel="modulepreload" href="chunk-54PYZ7RU.js"><link rel="modulepreload" href="chunk-N57AJHA5.js"><script src="polyfills-S3KRBCMK.js" type="module"></script><script src="scripts-TSGU23AO.js" defer></script><script src="main-GNPAPNKB.js" type="module"></script></body>
2020
</html>

docs/main-OSEZLS2M.js renamed to docs/main-GNPAPNKB.js

Lines changed: 214 additions & 213 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/ngsw.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"configVersion": 1,
3-
"timestamp": 1771436855551,
3+
"timestamp": 1772385526192,
44
"index": "/index.html",
55
"assetGroups": [
66
{
@@ -17,7 +17,7 @@
1717
"/chunk-OPKXG5HT.js",
1818
"/favicon.ico",
1919
"/index.html",
20-
"/main-OSEZLS2M.js",
20+
"/main-GNPAPNKB.js",
2121
"/manifest.webmanifest",
2222
"/polyfills-S3KRBCMK.js",
2323
"/scripts-TSGU23AO.js",
@@ -128,8 +128,8 @@
128128
"/chunk-OCTNWOGV.js": "c9ad5963b12e020ff37bd36c579a5e8b955c999c",
129129
"/chunk-OPKXG5HT.js": "d5030108cbfe5a8b71c1160d31ac71d9b73d38c0",
130130
"/favicon.ico": "22f6a4a3bcaafafb0254e0f2fa4ceb89e505e8b2",
131-
"/index.html": "7dce2dcd9949c3d05cf14169b3ea367a9eb0c467",
132-
"/main-OSEZLS2M.js": "7b38a411702ea4d3829f8f216d9e1c2e30078e8a",
131+
"/index.html": "4b953957783293b193c7f2bfd43939271f1d8c79",
132+
"/main-GNPAPNKB.js": "5f7856d3db4e2a886a4b09cf89a6376c858afe78",
133133
"/manifest.webmanifest": "0f6d8f1c753e9f503daf4cd303ebecc6b0b0a04b",
134134
"/polyfills-S3KRBCMK.js": "666124c1a3df4ed7eb66e54da096791013fab792",
135135
"/scripts-TSGU23AO.js": "e172440274ca0257fbf1b7e414f5bd41b03b202f",

‎src/app/components/correlation-matrix/correlation-matrix.component.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,15 @@ <h5 class="modal-title" id="correlationMatrixTitle">
2323
<div class="accordion" id="settingsAccordion">
2424
<div class="accordion-item">
2525
<h2 class="accordion-header">
26-
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#methodSettings" aria-expanded="true">
26+
<button
27+
[ngClass]="{'accordion-button': true, 'collapsed': isMethodSettingsCollapsed}"
28+
type="button"
29+
(click)="isMethodSettingsCollapsed = !isMethodSettingsCollapsed"
30+
[attr.aria-expanded]="!isMethodSettingsCollapsed">
2731
<i class="bi bi-sliders me-2"></i>Method & Display
2832
</button>
2933
</h2>
30-
<div id="methodSettings" class="accordion-collapse collapse show" data-bs-parent="#settingsAccordion">
34+
<div id="methodSettings" [(ngbCollapse)]="isMethodSettingsCollapsed">
3135
<div class="accordion-body">
3236
<div class="mb-3">
3337
<label class="form-label fw-semibold">Correlation Method</label>
@@ -88,12 +92,16 @@ <h2 class="accordion-header">
8892

8993
<div class="accordion-item">
9094
<h2 class="accordion-header">
91-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sampleSettings" aria-expanded="false">
95+
<button
96+
[ngClass]="{'accordion-button': true, 'collapsed': isSampleSettingsCollapsed}"
97+
type="button"
98+
(click)="isSampleSettingsCollapsed = !isSampleSettingsCollapsed"
99+
[attr.aria-expanded]="!isSampleSettingsCollapsed">
92100
<i class="bi bi-list-check me-2"></i>Sample Selection
93101
<span class="badge bg-primary ms-2">{{ selectedSamples.length }}/{{ allSamples.length }}</span>
94102
</button>
95103
</h2>
96-
<div id="sampleSettings" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
104+
<div id="sampleSettings" [(ngbCollapse)]="isSampleSettingsCollapsed">
97105
<div class="accordion-body">
98106
<div class="d-flex gap-2 mb-3">
99107
<button class="btn btn-outline-primary btn-sm flex-fill" (click)="selectAllSamples()" [disabled]="selectedSamples.length === allSamples.length">
@@ -149,11 +157,15 @@ <h2 class="accordion-header">
149157

150158
<div class="accordion-item">
151159
<h2 class="accordion-header">
152-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#statsPanel" aria-expanded="false">
160+
<button
161+
[ngClass]="{'accordion-button': true, 'collapsed': isStatsCollapsed}"
162+
type="button"
163+
(click)="isStatsCollapsed = !isStatsCollapsed"
164+
[attr.aria-expanded]="!isStatsCollapsed">
153165
<i class="bi bi-bar-chart me-2"></i>Statistics
154166
</button>
155167
</h2>
156-
<div id="statsPanel" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
168+
<div id="statsPanel" [(ngbCollapse)]="isStatsCollapsed">
157169
<div class="accordion-body">
158170
@if (correlationMatrix.length > 0) {
159171
<table class="table table-sm table-borderless mb-0">
@@ -221,8 +233,8 @@ <h2 class="accordion-header">
221233
<button class="btn btn-outline-secondary" (click)="copyToClipboard()" [disabled]="correlationMatrix.length === 0" title="Copy to clipboard">
222234
<i class="bi bi-clipboard me-1"></i>Copy
223235
</button>
224-
<button class="btn btn-outline-secondary" (click)="exportCSV()" [disabled]="correlationMatrix.length === 0" title="Export as CSV">
225-
<i class="bi bi-filetype-csv me-1"></i>CSV
236+
<button class="btn btn-outline-secondary" (click)="exportTSV()" [disabled]="correlationMatrix.length === 0" title="Export as TSV">
237+
<i class="bi bi-file-earmark-spreadsheet me-1"></i>TSV
226238
</button>
227239
<div class="btn-group" ngbDropdown>
228240
<button class="btn btn-outline-success" ngbDropdownToggle [disabled]="correlationMatrix.length === 0">

‎src/app/components/correlation-matrix/correlation-matrix.component.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ export class CorrelationMatrixComponent implements OnInit, OnDestroy {
4949
loading = false;
5050
loadingMessage = '';
5151

52+
isMethodSettingsCollapsed = false;
53+
isSampleSettingsCollapsed = true;
54+
isStatsCollapsed = true;
55+
5256
zmin = 0;
5357
zmax = 1;
5458

@@ -452,25 +456,25 @@ export class CorrelationMatrixComponent implements OnInit, OnDestroy {
452456
this.web.downloadPlotlyImage(format, 'correlation-matrix', 'correlationMatrix');
453457
}
454458

455-
exportCSV(): void {
459+
exportTSV(): void {
456460
const headers = ['Sample', ...this.selectedSamples];
457461
const rows = this.selectedSamples.map((sample, i) => {
458462
return [sample, ...this.correlationMatrix[i].map(v => v.toFixed(4))];
459463
});
460464

461-
const csvContent = [
462-
headers.join(','),
463-
...rows.map(row => row.join(','))
465+
const tsvContent = [
466+
headers.join('\t'),
467+
...rows.map(row => row.join('\t'))
464468
].join('\n');
465469

466-
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
470+
const blob = new Blob([tsvContent], { type: 'text/tab-separated-values;charset=utf-8;' });
467471
const link = document.createElement('a');
468472
link.href = URL.createObjectURL(blob);
469-
link.download = `correlation-matrix-${this.correlationMethod}.csv`;
473+
link.download = `correlation-matrix-${this.correlationMethod}.tsv`;
470474
link.click();
471475
URL.revokeObjectURL(link.href);
472476

473-
this.toast.show("Export", "Correlation matrix exported to CSV").then();
477+
this.toast.show("Export", "Correlation matrix exported to TSV").then();
474478
}
475479

476480
copyToClipboard(): void {

‎src/app/components/protein-domain-plot/protein-domain-plot.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -196,10 +196,10 @@
196196
</button>
197197
<button
198198
class="btn btn-outline-secondary"
199-
(click)="exportCSV()"
199+
(click)="exportTSV()"
200200
[disabled]="domains.length === 0"
201-
title="Export as CSV">
202-
<i class="bi bi-filetype-csv"></i>
201+
title="Export as TSV">
202+
<i class="bi bi-file-earmark-spreadsheet"></i>
203203
</button>
204204
<div class="btn-group btn-group-sm" ngbDropdown>
205205
<button

‎src/app/components/protein-domain-plot/protein-domain-plot.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ export class ProteinDomainPlotComponent implements OnInit, OnDestroy {
366366
this.web.downloadPlotlyImage(format, "domain", this.geneName + "domain").then();
367367
}
368368

369-
exportCSV(): void {
369+
exportTSV(): void {
370370
if (this.domains.length === 0) {
371371
this.toast.show("Export", "No domain data to export").then();
372372
return;
@@ -381,23 +381,23 @@ export class ProteinDomainPlotComponent implements OnInit, OnDestroy {
381381
((d.length / this.proteinLength) * 100).toFixed(2)
382382
]);
383383

384-
const csvContent = [
384+
const tsvContent = [
385385
`# Protein: ${this.geneName}`,
386386
`# Length: ${this.proteinLength} aa`,
387387
`# Total Domains: ${this.domains.length}`,
388388
'',
389-
headers.join(','),
390-
...rows.map(row => row.map(cell => `"${cell}"`).join(','))
389+
headers.join('\t'),
390+
...rows.map(row => row.join('\t'))
391391
].join('\n');
392392

393-
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
393+
const blob = new Blob([tsvContent], { type: 'text/tab-separated-values;charset=utf-8;' });
394394
const link = document.createElement('a');
395395
link.href = URL.createObjectURL(blob);
396-
link.download = `protein-domains-${this.geneName}.csv`;
396+
link.download = `protein-domains-${this.geneName}.tsv`;
397397
link.click();
398398
URL.revokeObjectURL(link.href);
399399

400-
this.toast.show("Export", "Domain data exported to CSV").then();
400+
this.toast.show("Export", "Domain data exported to TSV").then();
401401
}
402402

403403
copyToClipboard(): void {

‎src/app/components/proteomics-db/proteomics-db.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,9 +177,9 @@
177177
</button>
178178
<button
179179
class="btn btn-outline-secondary"
180-
(click)="exportCSV()"
181-
title="Export as CSV">
182-
<i class="bi bi-filetype-csv"></i>
180+
(click)="exportTSV()"
181+
title="Export as TSV">
182+
<i class="bi bi-file-earmark-spreadsheet"></i>
183183
</button>
184184
<div class="btn-group btn-group-sm" ngbDropdown>
185185
<button

‎src/app/components/proteomics-db/proteomics-db.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export class ProteomicsDbComponent implements OnInit, OnDestroy {
300300
this.web.downloadPlotlyImage(format, "proteomicsDB", this._uniprotID + "bar").then();
301301
}
302302

303-
exportCSV(): void {
303+
exportTSV(): void {
304304
const dataToExport = this.filteredData.length > 0 ? this.filteredData : this.rawData;
305305
if (dataToExport.length === 0) {
306306
this.toast.show("Export", "No data to export").then();
@@ -310,19 +310,19 @@ export class ProteomicsDbComponent implements OnInit, OnDestroy {
310310
const headers = ['Category', 'Normalized Intensity'];
311311
const rows = dataToExport.map(d => [d.name, d.value.toString()]);
312312

313-
const csvContent = [
314-
headers.join(','),
315-
...rows.map(row => row.map(cell => `"${cell}"`).join(','))
313+
const tsvContent = [
314+
headers.join('\t'),
315+
...rows.map(row => row.join('\t'))
316316
].join('\n');
317317

318-
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
318+
const blob = new Blob([tsvContent], { type: 'text/tab-separated-values;charset=utf-8;' });
319319
const link = document.createElement('a');
320320
link.href = URL.createObjectURL(blob);
321-
link.download = `proteomicsdb-${this._uniprotID}-${this.form.value["selected"]}.csv`;
321+
link.download = `proteomicsdb-${this._uniprotID}-${this.form.value["selected"]}.tsv`;
322322
link.click();
323323
URL.revokeObjectURL(link.href);
324324

325-
this.toast.show("Export", "Data exported to CSV").then();
325+
this.toast.show("Export", "Data exported to TSV").then();
326326
}
327327

328328
copyToClipboard(): void {

‎src/app/components/rank-plot/rank-plot.component.html‎

Lines changed: 102 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,105 @@
1-
<div class="d-grid gap-2 d-md-flex justify-content-md-end" role="toolbar" aria-label="Rank plot controls">
2-
<button class="btn btn-primary" (click)="hideAllSelected()" aria-label="Hide all selected data series from the plot">Hide All Selected Data</button>
3-
<button class="btn btn-primary" (click)="hideAllNonSelected()" aria-label="Hide all non-selected data series from the plot">Hide All Non-Selected Data</button>
4-
<button class="btn btn-primary" (click)="openTextEditor()" aria-label="Open annotation text editor dialog">Annotation Text Editor</button>
5-
<button class="btn btn-primary" (click)="openColorEditor()" aria-label="Open color editor dialog">Color Editor</button>
1+
<div class="rank-plot-controls mb-3">
2+
<div class="row g-2 align-items-end">
3+
<div class="col-auto">
4+
<label class="form-label small mb-1">Search Proteins</label>
5+
<div class="input-group input-group-sm">
6+
<input
7+
type="text"
8+
class="form-control"
9+
placeholder="Gene name or ID..."
10+
[(ngModel)]="searchTerm"
11+
(input)="onSearchChange()"
12+
style="min-width: 150px;">
13+
@if (searchTerm) {
14+
<button class="btn btn-outline-secondary" (click)="clearSearch()" title="Clear search">
15+
<i class="bi bi-x"></i>
16+
</button>
17+
}
18+
</div>
19+
@if (highlightedProteins.size > 0) {
20+
<small class="text-muted">{{ highlightedProteins.size }} found</small>
21+
}
22+
</div>
23+
24+
<div class="col-auto">
25+
<label class="form-label small mb-1">Top N</label>
26+
<input
27+
type="number"
28+
class="form-control form-control-sm"
29+
[(ngModel)]="topN"
30+
(change)="onTopNChange()"
31+
min="0"
32+
placeholder="0 = all"
33+
style="width: 80px;">
34+
</div>
35+
36+
<div class="col-auto">
37+
<label class="form-label small mb-1">Marker Size</label>
38+
<input
39+
type="range"
40+
class="form-range"
41+
[(ngModel)]="markerSize"
42+
(input)="onMarkerSizeChange()"
43+
min="2"
44+
max="15"
45+
style="width: 80px;">
46+
</div>
47+
48+
<div class="col-auto">
49+
<div class="form-check form-switch mt-4">
50+
<input
51+
class="form-check-input"
52+
type="checkbox"
53+
id="showPercentiles"
54+
[checked]="showPercentiles"
55+
(change)="togglePercentiles()">
56+
<label class="form-check-label small" for="showPercentiles">Percentiles</label>
57+
</div>
58+
</div>
59+
60+
<div class="col-auto ms-auto">
61+
<div class="btn-group btn-group-sm">
62+
<button class="btn btn-outline-primary" (click)="showAllConditions()" title="Show all conditions">
63+
<i class="bi bi-eye"></i> Show All
64+
</button>
65+
<button class="btn btn-outline-primary" (click)="hideAllSelected()" title="Hide selected data">
66+
Hide Selected
67+
</button>
68+
<button class="btn btn-outline-primary" (click)="hideAllNonSelected()" title="Hide non-selected data">
69+
Hide Others
70+
</button>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div class="row g-2 mt-2">
76+
<div class="col-auto">
77+
<div class="btn-group btn-group-sm">
78+
<button class="btn btn-outline-secondary" (click)="openTextEditor()" title="Edit annotations">
79+
<i class="bi bi-fonts"></i> Annotations
80+
</button>
81+
<button class="btn btn-outline-secondary" (click)="openColorEditor()" title="Edit colors">
82+
<i class="bi bi-palette"></i> Colors
83+
</button>
84+
</div>
85+
</div>
86+
87+
<div class="col-auto ms-auto">
88+
<div class="btn-group btn-group-sm">
89+
<button class="btn btn-outline-success" (click)="exportRankedData()" title="Export data to TSV">
90+
<i class="bi bi-file-earmark-spreadsheet"></i> Export TSV
91+
</button>
92+
<button class="btn btn-outline-success" (click)="downloadSVG()" title="Download as SVG">
93+
<i class="bi bi-filetype-svg"></i> SVG
94+
</button>
95+
<button class="btn btn-outline-success" (click)="downloadPNG()" title="Download as PNG">
96+
<i class="bi bi-filetype-png"></i> PNG
97+
</button>
98+
</div>
99+
</div>
100+
</div>
6101
</div>
102+
7103
<div role="img" aria-label="Rank abundance plot showing protein expression levels ranked by abundance" tabindex="0">
8104
<span class="visually-hidden" id="rankplot-description">
9105
Interactive scatter plot displaying log2 abundance values ranked from highest to lowest. Use the legend to toggle visibility of data series.
@@ -13,6 +109,7 @@
13109
[divId]="'rankplot'"
14110
[data]="graphData"
15111
[layout]="graphLayout"
112+
[revision]="revision"
16113
[updateOnDataChange]="true"
17114
[updateOnLayoutChange]="true"
18115
(legendClick)="handleClick($event)">

0 commit comments

Comments
 (0)