Hugging Face's logo

Spaces:
nmtalhp
/
Manufacturing-Data-Overview
Running

App Files Community
nmtalhp commited on
Commit
938a51b
·
verified ·
1 Parent(s): f2b3619

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +920 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bio Research Datasheet
3
- emoji: 🏢
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: bio-research-datasheet
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,920 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Advanced BioResearch Dashboard | Data Visualization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.1.0/dist/chartjs-plugin-annotation.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-error-bars@1.0.4/build/chartjs-plugin-error-bars.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.0/dist/chartjs-plugin-zoom.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
+ <style>
15
+ .chart-container {
16
+ position: relative;
17
+ height: 100%;
18
+ width: 100%;
19
+ }
20
+ .lab-value {
21
+ font-family: 'Courier New', monospace;
22
+ }
23
+ .critical-value {
24
+ animation: pulse 2s infinite;
25
+ }
26
+ @keyframes pulse {
27
+ 0% { background-color: white; }
28
+ 50% { background-color: #fee2e2; }
29
+ 100% { background-color: white; }
30
+ }
31
+ .qc-pass {
32
+ border-left: 4px solid #10B981;
33
+ }
34
+ .qc-fail {
35
+ border-left: 4px solid #EF4444;
36
+ }
37
+ .plate-well {
38
+ width: 30px;
39
+ height: 30px;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ font-size: 0.7rem;
44
+ cursor: pointer;
45
+ transition: all 0.2s;
46
+ }
47
+ .plate-well:hover {
48
+ transform: scale(1.1);
49
+ z-index: 10;
50
+ box-shadow: 0 0 5px rgba(0,0,0,0.3);
51
+ }
52
+ .data-table {
53
+ max-height: 400px;
54
+ overflow-y: auto;
55
+ }
56
+ .gene-expression {
57
+ background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
58
+ }
59
+ .data-highlight {
60
+ background-color: #fefce8;
61
+ }
62
+ @media (max-width: 1024px) {
63
+ .dashboard-grid {
64
+ grid-template-columns: 1fr !important;
65
+ }
66
+ .panel-section {
67
+ min-width: 100% !important;
68
+ }
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-50 font-sans">
73
+ <div class="container mx-auto px-4 py-6">
74
+ <!-- Header with Lab Info -->
75
+ <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 border-b pb-4">
76
+ <div>
77
+ <h1 class="text-2xl md:text-3xl font-bold text-gray-800 flex items-center">
78
+ <i class="fas fa-database text-blue-600 mr-3"></i>
79
+ Advanced BioResearch Data Explorer
80
+ </h1>
81
+ <div class="flex flex-wrap gap-4 mt-2">
82
+ <div class="flex items-center text-sm text-gray-600">
83
+ <i class="fas fa-user-md mr-1"></i>
84
+ <span>PI: Dr. Samantha Chen | Lab: Systems Biology</span>
85
+ </div>
86
+ <div class="flex items-center text-sm text-gray-600">
87
+ <i class="fas fa-calendar-alt mr-1"></i>
88
+ <span>Experiment: CR-2023-0482 (RNA-seq + Proteomics)</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <div class="mt-4 md:mt-0 flex flex-col md:flex-row items-start md:items-center space-y-2 md:space-y-0 md:space-x-4">
93
+ <div class="bg-blue-50 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center">
94
+ <i class="fas fa-circle text-xs mr-1"></i>
95
+ <span>Status: Active Analysis</span>
96
+ </div>
97
+ <button class="bg-gray-800 hover:bg-gray-900 text-white py-2 px-4 rounded flex items-center text-sm">
98
+ <i class="fas fa-file-export mr-2"></i> Export Full Dataset
99
+ </button>
100
+ </div>
101
+ </header>
102
+
103
+ <!-- Data Explorer Controls -->
104
+ <div class="bg-white rounded-lg shadow p-4 mb-6">
105
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
106
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
107
+ <i class="fas fa-sliders-h text-blue-600 mr-2"></i>
108
+ Data Explorer Controls
109
+ </h2>
110
+ <div class="mt-2 md:mt-0 flex space-x-2">
111
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center text-sm">
112
+ <i class="fas fa-play mr-2"></i> Execute Analysis
113
+ </button>
114
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center text-sm">
115
+ <i class="fas fa-redo mr-2"></i> Reset Filters
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
121
+ <!-- Sample Selection -->
122
+ <div class="border rounded p-3">
123
+ <label class="block text-sm font-medium text-gray-700 mb-1">Sample Groups</label>
124
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm" multiple>
125
+ <option selected>Control (n=12)</option>
126
+ <option selected>Treatment A (n=12)</option>
127
+ <option selected>Treatment B (n=12)</option>
128
+ <option>Outliers (n=3)</option>
129
+ </select>
130
+ <div class="mt-2 text-xs text-gray-500">
131
+ <span class="font-medium">36</span> samples selected
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Data Type -->
136
+ <div class="border rounded p-3">
137
+ <label class="block text-sm font-medium text-gray-700 mb-1">Data Types</label>
138
+ <div class="space-y-1 mt-1">
139
+ <div class="flex items-center">
140
+ <input id="rna-seq" name="data-type" type="checkbox" checked class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
141
+ <label for="rna-seq" class="ml-2 text-sm text-gray-700">RNA-seq</label>
142
+ </div>
143
+ <div class="flex items-center">
144
+ <input id="proteomics" name="data-type" type="checkbox" checked class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
145
+ <label for="proteomics" class="ml-2 text-sm text-gray-700">Proteomics</label>
146
+ </div>
147
+ <div class="flex items-center">
148
+ <input id="phospho" name="data-type" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
149
+ <label for="phospho" class="ml-2 text-sm text-gray-700">Phosphoproteomics</label>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Statistical Filters -->
155
+ <div class="border rounded p-3">
156
+ <label class="block text-sm font-medium text-gray-700 mb-1">Statistical Filters</label>
157
+ <div class="mt-1">
158
+ <label class="block text-xs text-gray-500">Fold Change ≥</label>
159
+ <input type="number" value="1.5" step="0.1" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
160
+ </div>
161
+ <div class="mt-2">
162
+ <label class="block text-xs text-gray-500">Adj. p-value ≤</label>
163
+ <input type="number" value="0.05" step="0.01" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Gene/Protein Input -->
168
+ <div class="border rounded p-3">
169
+ <label class="block text-sm font-medium text-gray-700 mb-1">Gene/Protein Search</label>
170
+ <textarea rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm" placeholder="Enter gene symbols or IDs (comma separated)">TP53, MYC, CDKN1A, BAX, BCL2</textarea>
171
+ <div class="mt-1 text-xs text-gray-500">
172
+ <span class="font-medium">5</span> genes entered
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Main Dashboard Grid -->
179
+ <div class="dashboard-grid grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
180
+ <!-- Multi-Omics Correlation -->
181
+ <div class="panel-section bg-white rounded-lg shadow p-4 lg:col-span-2">
182
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
183
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
184
+ <i class="fas fa-project-diagram text-purple-600 mr-2"></i>
185
+ Multi-Omics Correlation Analysis
186
+ </h2>
187
+ <div class="mt-2 sm:mt-0 flex space-x-2">
188
+ <select class="bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 rounded text-sm">
189
+ <option>Pearson Correlation</option>
190
+ <option>Spearman Correlation</option>
191
+ <option>Partial Correlation</option>
192
+ </select>
193
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
194
+ <i class="fas fa-expand mr-1"></i> Fullscreen
195
+ </button>
196
+ </div>
197
+ </div>
198
+ <div class="chart-container" style="height: 400px;">
199
+ <canvas id="correlationChart"></canvas>
200
+ </div>
201
+ <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
202
+ <div class="bg-gray-50 p-3 rounded border">
203
+ <p class="text-xs text-gray-500">Top Positive Correlation</p>
204
+ <p class="text-sm font-mono">MYC (r=0.89)</p>
205
+ </div>
206
+ <div class="bg-gray-50 p-3 rounded border">
207
+ <p class="text-xs text-gray-500">Top Negative Correlation</p>
208
+ <p class="text-sm font-mono">CDKN1A (r=-0.76)</p>
209
+ </div>
210
+ <div class="bg-gray-50 p-3 rounded border">
211
+ <p class="text-xs text-gray-500">Significant Pairs</p>
212
+ <p class="text-sm font-mono">142/210 (67.6%)</p>
213
+ </div>
214
+ <div class="bg-gray-50 p-3 rounded border">
215
+ <p class="text-xs text-gray-500">Mean Absolute Correlation</p>
216
+ <p class="text-sm font-mono">0.42 ± 0.18</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Gene Expression Heatmap -->
222
+ <div class="panel-section bg-white rounded-lg shadow p-4">
223
+ <div class="flex justify-between items-center mb-4">
224
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
225
+ <i class="fas fa-fire text-red-600 mr-2"></i>
226
+ Gene Expression Heatmap
227
+ </h2>
228
+ <div class="flex items-center space-x-2">
229
+ <button class="text-gray-500 hover:text-gray-700">
230
+ <i class="fas fa-chevron-left"></i>
231
+ </button>
232
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">Cluster 1/5</span>
233
+ <button class="text-gray-500 hover:text-gray-700">
234
+ <i class="fas fa-chevron-right"></i>
235
+ </button>
236
+ </div>
237
+ </div>
238
+ <div class="chart-container" style="height: 400px;">
239
+ <canvas id="heatmapChart"></canvas>
240
+ </div>
241
+ <div class="mt-4 flex justify-between items-center">
242
+ <div class="flex items-center">
243
+ <div class="w-4 h-4 bg-blue-700 rounded mr-1"></div>
244
+ <div class="w-4 h-4 bg-blue-400 rounded mr-1"></div>
245
+ <div class="w-4 h-4 bg-white rounded border mr-1"></div>
246
+ <div class="w-4 h-4 bg-red-400 rounded mr-1"></div>
247
+ <div class="w-4 h-4 bg-red-700 rounded"></div>
248
+ </div>
249
+ <span class="text-xs text-gray-500">Z-score normalized expression</span>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Sample Data Table -->
254
+ <div class="panel-section bg-white rounded-lg shadow p-4 lg:col-span-3">
255
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
256
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
257
+ <i class="fas fa-table text-green-600 mr-2"></i>
258
+ Differential Expression Data
259
+ </h2>
260
+ <div class="mt-2 sm:mt-0 flex space-x-2">
261
+ <input type="text" placeholder="Search genes..." class="bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 rounded text-sm">
262
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
263
+ <i class="fas fa-download mr-1"></i> Export
264
+ </button>
265
+ </div>
266
+ </div>
267
+ <div class="data-table overflow-auto">
268
+ <table class="min-w-full divide-y divide-gray-200">
269
+ <thead class="bg-gray-50 sticky top-0">
270
+ <tr>
271
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gene</th>
272
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">BaseMean</th>
273
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Log2FC</th>
274
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">lfcSE</th>
275
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stat</th>
276
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P-value</th>
277
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adj. P</th>
278
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Protein FC</th>
279
+ </tr>
280
+ </thead>
281
+ <tbody class="bg-white divide-y divide-gray-200">
282
+ <tr class="data-highlight">
283
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MYC</td>
284
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1245.6</td>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono font-bold">3.21</td>
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.32</td>
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10.03</td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2e-22</td>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.8e-20</td>
290
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono font-bold">2.87</td>
291
+ </tr>
292
+ <tr>
293
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CDKN1A</td>
294
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">876.3</td>
295
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">2.45</td>
296
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.28</td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.75</td>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.4e-18</td>
299
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9.2e-16</td>
300
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">2.12</td>
301
+ </tr>
302
+ <tr class="data-highlight">
303
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TP53</td>
304
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1023.8</td>
305
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono font-bold">2.78</td>
306
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.31</td>
307
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.97</td>
308
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.1e-19</td>
309
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.3e-17</td>
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono font-bold">1.89</td>
311
+ </tr>
312
+ <tr>
313
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">BAX</td>
314
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">543.2</td>
315
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.87</td>
316
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.25</td>
317
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.48</td>
318
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.5e-14</td>
319
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.7e-12</td>
320
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.45</td>
321
+ </tr>
322
+ <tr>
323
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">BCL2</td>
324
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">765.4</td>
325
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">-1.23</td>
326
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.18</td>
327
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-6.83</td>
328
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.2e-12</td>
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.1e-09</td>
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">-0.98</td>
331
+ </tr>
332
+ <tr>
333
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MDM2</td>
334
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">432.1</td>
335
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.56</td>
336
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.22</td>
337
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.09</td>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.3e-12</td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.4e-10</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.32</td>
341
+ </tr>
342
+ <tr>
343
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CCND1</td>
344
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">678.9</td>
345
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.34</td>
346
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.19</td>
347
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.05</td>
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.8e-12</td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.1e-10</td>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.21</td>
351
+ </tr>
352
+ <tr>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RB1</td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">587.6</td>
355
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">1.12</td>
356
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.17</td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.59</td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.3e-11</td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.9e-09</td>
360
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">0.87</td>
361
+ </tr>
362
+ </tbody>
363
+ </table>
364
+ </div>
365
+ <div class="mt-4 flex justify-between items-center">
366
+ <span class="text-sm text-gray-500">Showing 8 of 142 significant genes (FDR < 0.05)</span>
367
+ <div class="flex space-x-2">
368
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
369
+ <i class="fas fa-chevron-left"></i>
370
+ </button>
371
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
372
+ <i class="fas fa-chevron-right"></i>
373
+ </button>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Gene Expression Profile -->
379
+ <div class="panel-section bg-white rounded-lg shadow p-4 lg:col-span-2">
380
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
381
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
382
+ <i class="fas fa-chart-line text-blue-600 mr-2"></i>
383
+ Gene Expression Profile
384
+ </h2>
385
+ <div class="mt-2 sm:mt-0 flex space-x-2">
386
+ <select id="geneSelect" class="bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 rounded text-sm">
387
+ <option>MYC</option>
388
+ <option>TP53</option>
389
+ <option>CDKN1A</option>
390
+ <option>BAX</option>
391
+ <option>BCL2</option>
392
+ </select>
393
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
394
+ <i class="fas fa-plus mr-1"></i> Add
395
+ </button>
396
+ </div>
397
+ </div>
398
+ <div class="chart-container" style="height: 300px;">
399
+ <canvas id="geneExpressionChart"></canvas>
400
+ </div>
401
+ <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
402
+ <div class="bg-gray-50 p-3 rounded border">
403
+ <p class="text-xs text-gray-500">RNA-seq Log2FC</p>
404
+ <p class="text-lg font-mono font-bold">3.21</p>
405
+ </div>
406
+ <div class="bg-gray-50 p-3 rounded border">
407
+ <p class="text-xs text-gray-500">Protein Log2FC</p>
408
+ <p class="text-lg font-mono font-bold">2.87</p>
409
+ </div>
410
+ <div class="bg-gray-50 p-3 rounded border">
411
+ <p class="text-xs text-gray-500">Adj. p-value</p>
412
+ <p class="text-lg font-mono font-bold">4.8e-20</p>
413
+ </div>
414
+ <div class="bg-gray-50 p-3 rounded border">
415
+ <p class="text-xs text-gray-500">Correlation</p>
416
+ <p class="text-lg font-mono font-bold">0.89</p>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Pathway Enrichment -->
422
+ <div class="panel-section bg-white rounded-lg shadow p-4">
423
+ <div class="flex justify-between items-center mb-4">
424
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
425
+ <i class="fas fa-sitemap text-green-600 mr-2"></i>
426
+ Pathway Enrichment
427
+ </h2>
428
+ <button class="text-gray-500 hover:text-gray-700">
429
+ <i class="fas fa-expand"></i>
430
+ </button>
431
+ </div>
432
+ <div class="space-y-3">
433
+ <div class="p-3 rounded border">
434
+ <div class="flex justify-between items-start">
435
+ <div>
436
+ <h3 class="text-sm font-medium">p53 signaling pathway</h3>
437
+ <p class="text-xs text-gray-500">KEGG:04115</p>
438
+ </div>
439
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">FDR=1.2e-10</span>
440
+ </div>
441
+ <div class="mt-2">
442
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
443
+ <span>5/87 genes</span>
444
+ <span>5.7%</span>
445
+ </div>
446
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
447
+ <div class="bg-green-600 h-1.5 rounded-full" style="width: 45%"></div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ <div class="p-3 rounded border">
452
+ <div class="flex justify-between items-start">
453
+ <div>
454
+ <h3 class="text-sm font-medium">Cell cycle</h3>
455
+ <p class="text-xs text-gray-500">KEGG:04110</p>
456
+ </div>
457
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">FDR=3.4e-08</span>
458
+ </div>
459
+ <div class="mt-2">
460
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
461
+ <span>4/124 genes</span>
462
+ <span>3.2%</span>
463
+ </div>
464
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
465
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 32%"></div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ <div class="p-3 rounded border">
470
+ <div class="flex justify-between items-start">
471
+ <div>
472
+ <h3 class="text-sm font-medium">Apoptosis</h3>
473
+ <p class="text-xs text-gray-500">KEGG:04210</p>
474
+ </div>
475
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">FDR=0.0021</span>
476
+ </div>
477
+ <div class="mt-2">
478
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
479
+ <span>3/87 genes</span>
480
+ <span>3.4%</span>
481
+ </div>
482
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
483
+ <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 24%"></div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ <div class="p-3 rounded border">
488
+ <div class="flex justify-between items-start">
489
+ <div>
490
+ <h3 class="text-sm font-medium">PI3K-Akt signaling pathway</h3>
491
+ <p class="text-xs text-gray-500">KEGG:04151</p>
492
+ </div>
493
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">FDR=0.012</span>
494
+ </div>
495
+ <div class="mt-2">
496
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
497
+ <span>3/354 genes</span>
498
+ <span>0.8%</span>
499
+ </div>
500
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
501
+ <div class="bg-yellow-400 h-1.5 rounded-full" style="width: 18%"></div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Data Summary Section -->
510
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
511
+ <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
512
+ <h2 class="text-lg font-semibold text-gray-800 flex items-center">
513
+ <i class="fas fa-chart-pie text-indigo-600 mr-2"></i>
514
+ Data Summary Statistics
515
+ </h2>
516
+ </div>
517
+ <div class="grid grid-cols-1 md:grid-cols-3">
518
+ <div class="p-4 border-b md:border-b-0 md:border-r border-gray-200">
519
+ <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">RNA-seq</h3>
520
+ <div class="grid grid-cols-2 gap-4">
521
+ <div>
522
+ <p class="text-xs text-gray-500">Total Genes</p>
523
+ <p class="text-xl font-mono font-bold">20,345</p>
524
+ </div>
525
+ <div>
526
+ <p class="text-xs text-gray-500">DE Genes (FDR < 0.05)</p>
527
+ <p class="text-xl font-mono font-bold">1,248</p>
528
+ </div>
529
+ <div>
530
+ <p class="text-xs text-gray-500">Upregulated</p>
531
+ <p class="text-xl font-mono font-bold text-blue-600">842</p>
532
+ </div>
533
+ <div>
534
+ <p class="text-xs text-gray-500">Downregulated</p>
535
+ <p class="text-xl font-mono font-bold text-red-600">406</p>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ <div class="p-4 border-b md:border-b-0 md:border-r border-gray-200">
540
+ <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Proteomics</h3>
541
+ <div class="grid grid-cols-2 gap-4">
542
+ <div>
543
+ <p class="text-xs text-gray-500">Total Proteins</p>
544
+ <p class="text-xl font-mono font-bold">6,784</p>
545
+ </div>
546
+ <div>
547
+ <p class="text-xs text-gray-500">DE Proteins (FDR < 0.05)</p>
548
+ <p class="text-xl font-mono font-bold">487</p>
549
+ </div>
550
+ <div>
551
+ <p class="text-xs text-gray-500">Upregulated</p>
552
+ <p class="text-xl font-mono font-bold text-blue-600">312</p>
553
+ </div>
554
+ <div>
555
+ <p class="text-xs text-gray-500">Downregulated</p>
556
+ <p class="text-xl font-mono font-bold text-red-600">175</p>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ <div class="p-4">
561
+ <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Multi-Omics Overlap</h3>
562
+ <div class="grid grid-cols-2 gap-4">
563
+ <div>
564
+ <p class="text-xs text-gray-500">Common DE Features</p>
565
+ <p class="text-xl font-mono font-bold">298</p>
566
+ </div>
567
+ <div>
568
+ <p class="text-xs text-gray-500">Concordant Changes</p>
569
+ <p class="text-xl font-mono font-bold text-green-600">264 (88.6%)</p>
570
+ </div>
571
+ <div>
572
+ <p class="text-xs text-gray-500">Mean Correlation</p>
573
+ <p class="text-xl font-mono font-bold">0.62</p>
574
+ </div>
575
+ <div>
576
+ <p class="text-xs text-gray-500">Significant Pathways</p>
577
+ <p class="text-xl font-mono font-bold">18</p>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <!-- Footer with Data Status -->
585
+ <footer class="flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 py-4 border-t border-gray-200">
586
+ <div class="flex items-center mb-2 md:mb-0">
587
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
588
+ <p>Analysis complete | Last updated: <span id="updateTime" class="font-medium">2023-11-15 15:27:42</span></p>
589
+ </div>
590
+ <div class="flex items-center">
591
+ <i class="fas fa-database mr-1"></i>
592
+ <p>Dataset: <span class="font-medium">CR-2023-0482_RNAseq_Proteomics_v4.1</span> | Size: 2.8 GB | Records: 27,129</p>
593
+ </div>
594
+ </footer>
595
+ </div>
596
+
597
+ <script>
598
+ // Initialize all charts
599
+ document.addEventListener('DOMContentLoaded', function() {
600
+ // Correlation Matrix Chart
601
+ const correlationCtx = document.getElementById('correlationChart').getContext('2d');
602
+
603
+ // Generate correlation data
604
+ const genes = ['MYC', 'TP53', 'CDKN1A', 'BAX', 'BCL2', 'MDM2', 'CCND1', 'RB1'];
605
+ const correlationData = [];
606
+
607
+ for (let i = 0; i < genes.length; i++) {
608
+ for (let j = 0; j < genes.length; j++) {
609
+ if (i === j) {
610
+ correlationData.push({
611
+ x: i,
612
+ y: j,
613
+ v: 1.0
614
+ });
615
+ } else if (i < j) {
616
+ const corr = 0.9 - Math.random() * 0.2;
617
+ correlationData.push({
618
+ x: i,
619
+ y: j,
620
+ v: corr
621
+ });
622
+ correlationData.push({
623
+ x: j,
624
+ y: i,
625
+ v: corr
626
+ });
627
+ }
628
+ }
629
+ }
630
+
631
+ const correlationChart = new Chart(correlationCtx, {
632
+ type: 'bubble',
633
+ data: {
634
+ datasets: [{
635
+ label: 'Correlation',
636
+ data: correlationData,
637
+ backgroundColor: function(context) {
638
+ const value = context.dataset.data[context.dataIndex].v;
639
+ const alpha = Math.abs(value);
640
+ if (value > 0) {
641
+ return `rgba(59, 130, 246, ${alpha})`;
642
+ } else {
643
+ return `rgba(239, 68, 68, ${alpha})`;
644
+ }
645
+ },
646
+ borderColor: function(context) {
647
+ const value = context.dataset.data[context.dataIndex].v;
648
+ if (value > 0) {
649
+ return 'rgba(59, 130, 246, 1)';
650
+ } else {
651
+ return 'rgba(239, 68, 68, 1)';
652
+ }
653
+ },
654
+ borderWidth: 1,
655
+ radius: function(context) {
656
+ const value = context.dataset.data[context.dataIndex].v;
657
+ return Math.abs(value) * 20 + 5;
658
+ }
659
+ }]
660
+ },
661
+ options: {
662
+ responsive: true,
663
+ maintainAspectRatio: false,
664
+ scales: {
665
+ x: {
666
+ title: {
667
+ display: true,
668
+ text: 'Genes/Proteins'
669
+ },
670
+ ticks: {
671
+ callback: function(value) {
672
+ return genes[value];
673
+ }
674
+ },
675
+ grid: {
676
+ display: false
677
+ }
678
+ },
679
+ y: {
680
+ title: {
681
+ display: true,
682
+ text: 'Genes/Proteins'
683
+ },
684
+ ticks: {
685
+ callback: function(value) {
686
+ return genes[value];
687
+ }
688
+ },
689
+ grid: {
690
+ display: false
691
+ }
692
+ }
693
+ },
694
+ plugins: {
695
+ tooltip: {
696
+ callbacks: {
697
+ label: function(context) {
698
+ const xLabel = genes[context.parsed.x];
699
+ const yLabel = genes[context.parsed.y];
700
+ const value = context.dataset.data[context.dataIndex].v;
701
+ return `${xLabel} vs ${yLabel}: r = ${value.toFixed(2)}`;
702
+ }
703
+ }
704
+ },
705
+ legend: {
706
+ display: false
707
+ }
708
+ }
709
+ }
710
+ });
711
+
712
+ // Heatmap Chart
713
+ const heatmapCtx = document.getElementById('heatmapChart').getContext('2d');
714
+
715
+ // Generate heatmap data
716
+ const samples = ['C1', 'C2', 'C3', 'C4', 'A1', 'A2', 'A3', 'A4', 'B1', 'B2', 'B3', 'B4'];
717
+ const heatmapData = [];
718
+
719
+ for (let i = 0; i < genes.length; i++) {
720
+ for (let j = 0; j < samples.length; j++) {
721
+ const value = (Math.random() * 4) - 2; // Z-scores between -2 and 2
722
+ heatmapData.push({
723
+ x: j,
724
+ y: i,
725
+ v: value
726
+ });
727
+ }
728
+ }
729
+
730
+ const heatmapChart = new Chart(heatmapCtx, {
731
+ type: 'bubble',
732
+ data: {
733
+ datasets: [{
734
+ label: 'Expression',
735
+ data: heatmapData,
736
+ backgroundColor: function(context) {
737
+ const value = context.dataset.data[context.dataIndex].v;
738
+ if (value > 1.5) {
739
+ return 'rgba(185, 28, 28, 0.7)'; // dark red
740
+ } else if (value > 0.5) {
741
+ return 'rgba(239, 68, 68, 0.7)'; // red
742
+ } else if (value > -0.5) {
743
+ return 'rgba(255, 255, 255, 0.7)'; // white
744
+ } else if (value > -1.5) {
745
+ return 'rgba(59, 130, 246, 0.7)'; // blue
746
+ } else {
747
+ return 'rgba(29, 78, 216, 0.7)'; // dark blue
748
+ }
749
+ },
750
+ borderColor: function(context) {
751
+ const value = context.dataset.data[context.dataIndex].v;
752
+ if (value > 0) {
753
+ return 'rgba(239, 68, 68, 1)';
754
+ } else {
755
+ return 'rgba(59, 130, 246, 1)';
756
+ }
757
+ },
758
+ borderWidth: 0.5,
759
+ radius: function(context) {
760
+ return 12;
761
+ }
762
+ }]
763
+ },
764
+ options: {
765
+ responsive: true,
766
+ maintainAspectRatio: false,
767
+ scales: {
768
+ x: {
769
+ title: {
770
+ display: true,
771
+ text: 'Samples'
772
+ },
773
+ ticks: {
774
+ callback: function(value) {
775
+ return samples[value];
776
+ }
777
+ },
778
+ grid: {
779
+ display: false
780
+ }
781
+ },
782
+ y: {
783
+ title: {
784
+ display: true,
785
+ text: 'Genes'
786
+ },
787
+ ticks: {
788
+ callback: function(value) {
789
+ return genes[value];
790
+ }
791
+ },
792
+ grid: {
793
+ display: false
794
+ }
795
+ }
796
+ },
797
+ plugins: {
798
+ tooltip: {
799
+ callbacks: {
800
+ label: function(context) {
801
+ const gene = genes[context.parsed.y];
802
+ const sample = samples[context.parsed.x];
803
+ const value = context.dataset.data[context.dataIndex].v;
804
+ return `${gene} in ${sample}: ${value.toFixed(2)}`;
805
+ }
806
+ }
807
+ },
808
+ legend: {
809
+ display: false
810
+ }
811
+ }
812
+ }
813
+ });
814
+
815
+ // Gene Expression Profile Chart
816
+ const geneExpressionCtx = document.getElementById('geneExpressionChart').getContext('2d');
817
+ const geneExpressionChart = new Chart(geneExpressionCtx, {
818
+ type: 'line',
819
+ data: {
820
+ labels: ['Control 1', 'Control 2', 'Control 3', 'Control 4',
821
+ 'Treatment A1', 'Treatment A2', 'Treatment A3', 'Treatment A4',
822
+ 'Treatment B1', 'Treatment B2', 'Treatment B3', 'Treatment B4'],
823
+ datasets: [
824
+ {
825
+ label: 'RNA-seq (TPM)',
826
+ data: [45, 52, 48, 51, 320, 285, 350, 310, 380, 420, 360, 400],
827
+ borderColor: 'rgba(59, 130, 246, 1)',
828
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
829
+ borderWidth: 2,
830
+ tension: 0.1,
831
+ yAxisID: 'y'
832
+ },
833
+ {
834
+ label: 'Protein (LFQ)',
835
+ data: [1200, 1300, 1250, 1350, 8500, 9200, 8800, 9500, 10200, 11000, 10500, 10800],
836
+ borderColor: 'rgba(239, 68, 68, 1)',
837
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
838
+ borderWidth: 2,
839
+ tension: 0.1,
840
+ yAxisID: 'y1'
841
+ }
842
+ ]
843
+ },
844
+ options: {
845
+ responsive: true,
846
+ maintainAspectRatio: false,
847
+ interaction: {
848
+ mode: 'index',
849
+ intersect: false,
850
+ },
851
+ scales: {
852
+ x: {
853
+ grid: {
854
+ display: false
855
+ }
856
+ },
857
+ y: {
858
+ type: 'linear',
859
+ display: true,
860
+ position: 'left',
861
+ title: {
862
+ display: true,
863
+ text: 'RNA-seq (TPM)'
864
+ }
865
+ },
866
+ y1: {
867
+ type: 'linear',
868
+ display: true,
869
+ position: 'right',
870
+ title: {
871
+ display: true,
872
+ text: 'Protein (LFQ)'
873
+ },
874
+ grid: {
875
+ drawOnChartArea: false
876
+ }
877
+ }
878
+ },
879
+ plugins: {
880
+ tooltip: {
881
+ callbacks: {
882
+ label: function(context) {
883
+ let label = context.dataset.label || '';
884
+ if (label) {
885
+ label += ': ';
886
+ }
887
+ if (context.parsed.y !== null) {
888
+ label += context.parsed.y.toLocaleString();
889
+ }
890
+ return label;
891
+ }
892
+ }
893
+ }
894
+ }
895
+ }
896
+ });
897
+
898
+ // Update gene expression chart when gene selection changes
899
+ document.getElementById('geneSelect').addEventListener('change', function() {
900
+ const selectedGene = this.value;
901
+ // In a real app, we would fetch data for the selected gene
902
+ // Here we just simulate some data changes
903
+ geneExpressionChart.data.datasets[0].data = geneExpressionChart.data.datasets[0].data.map(x => x * (0.9 + Math.random() * 0.2));
904
+ geneExpressionChart.data.datasets[1].data = geneExpressionChart.data.datasets[1].data.map(x => x * (0.9 + Math.random() * 0.2));
905
+ geneExpressionChart.update();
906
+ });
907
+
908
+ // Simulate real-time data updates
909
+ function updateData() {
910
+ // Update timestamp
911
+ const now = new Date();
912
+ document.getElementById('updateTime').textContent = now.toISOString().replace('T', ' ').substring(0, 19);
913
+ }
914
+
915
+ // Update every 30 seconds
916
+ setInterval(updateData, 30000);
917
+ });
918
+ </script>
919
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nmtalhp/bio-research-datasheet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
920
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ Realtime Dashboard & Data Analysis: Expert Checklist (Enhanced with Graph Focus) 🔍 8. Graph Design for Dense and Clear Overview Mục tiêu: Truyền tải thông tin dày đặc mà vẫn trực quan, dễ hiểu trong nháy mắt – mô phỏng cách Big 4 tạo executive dashboards. 8.1 Graph Strategy & Layout Use a dashboard layout grid system (e.g., 12-column) to organize graphs tightly but orderly Prioritize high-impact KPIs at the top in summary graphs Use small multiples (trellis layout) to compare multiple dimensions (e.g., per region, per product) Include mini trendlines/sparklines inside KPI cards for temporal context Reserve a section for real-time alerts or anomalies (heatmaps or red/yellow indicators) Maintain consistent X & Y axes across related graphs to allow visual comparison 8.2 Graph Types for Overview Line/Area charts for trends over time (use smooth or step lines for clarity) Bar/Column charts for categorical comparisons (horizontal for rank-style) Stacked bar charts for composition over time (e.g., by segment, region) Heatmaps or matrix charts for correlation/volume (e.g., time vs. activity) Bullet graphs to compare against targets Donut charts sparingly – only for 1–2 key metrics to show proportion Treemaps or sunburst charts for hierarchical overview (optional) 8.3 Visual Enhancement Techniques Add data labels only on critical or outlier points (avoid label clutter) Use soft animations (e.g., Framer Motion or Chart.js transitions) for updates Apply color encoding based on thresholds (e.g., red = critical, green = OK) Use hover tooltips for exact values and context without crowding UI Add trend arrows or % change indicators for instant directional insight Support multi-series toggle (legend click) to allow focus on subsets Group graphs with consistent legends and timestamps 8.4 Interaction & Filtering Enable global filters (date range, geography, user segments) Support brush & zoom interactions for time-series charts Enable cross-filtering: clicking on a graph filters other graphs accordingly Provide graph-level controls: time range, aggregation level, etc. 8.5 Accessibility & Responsiveness Use colorblind-friendly palettes (ColorBrewer, high-contrast themes) Provide textual summaries below charts for accessibility (e.g., key trend highlights) Ensure mobile responsiveness: graphs collapse to scrollable format or stacked cards
2
+ input sample data to make it real
3
+ make more complicated graph, look like laboratory research and self-check the layout suitable
4
+ where the data graph, where data indicator, input references and big sample data to visualization