genomicx.github.io/about.html at main · genomicx/genomicx.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About - GenomicX</title>
  <meta name="description" content="GenomicX is an experiment in compiling established bioinformatics tools to WebAssembly and running them entirely client-side in the browser.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x1f9ec;</text></svg>">
  <script>
    // Prevent FOUC: apply saved theme before first paint
    (function() {
      var t = localStorage.getItem('gx-theme') || 'dark';
      document.documentElement.setAttribute('data-theme', t);
    })();
  </script>
  <script>
    (function (s, e, n, d, er) {
      s['Sender'] = er;
      s[er] = s[er] || function () {
        (s[er].q = s[er].q || []).push(arguments)
      }, s[er].l = 1 * new Date();
      var a = e.createElement(n),
          m = e.getElementsByTagName(n)[0];
      a.async = 1;
      a.src = d;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js', 'sender');
    sender('090517774c7404')
  </script>
</head>
<body>

  <!-- Navigation -->
  <nav class="nav">
    <div class="nav-inner">
      <a href="index.html" class="nav-logo">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--gx-accent)">
          <path d="M2 15c6.667-6 13.333 0 20-6"/>
          <path d="M9 22c1.798-1.998 2.518-3.995 2.807-5.993"/>
          <path d="M15 2c-1.798 1.998-2.518 3.995-2.807 5.993"/>
          <path d="M17 6l-2.5 2.5"/><path d="M14 8l-1 1"/>
          <path d="M7 18l2.5-2.5"/><path d="M3.5 14.5l.5-.5"/>
        </svg>
        <span>GenomicX</span>
      </a>

      <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>

      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html#tools">Tools</a></li>
        <li><a href="roadmap.html">Roadmap</a></li>
        <li><a href="about.html" class="active">About</a></li>
        <li>
          <a href="https://github.com/genomicx" target="_blank" rel="noopener" class="nav-github">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
            GitHub
          </a>
        </li>
        <li>
          <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle theme">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
          </button>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Hero -->
  <header class="about-hero">
    <h1>An experiment in <span class="accent-text">browser-based bioinformatics</span></h1>
    <p>GenomicX explores whether established bioinformatics tools can be compiled to WebAssembly and run entirely client-side, with no servers and no installation.</p>
  </header>

  <!-- Content -->
  <main class="about-content">

    <div class="about-card animate-in">
      <h2>Motivation</h2>
      <p>
        Most bioinformatics tools require command-line experience, specific operating systems, complex dependency chains, or institutional computing resources. This creates a gap between the people who develop analysis tools and the wider community who could benefit from them.
      </p>
      <p>
        WebAssembly offers a way to close that gap. By cross-compiling C/C++ bioinformatics tools with Emscripten, they can run at near-native speed directly in a web browser &mdash; no installation, no server, no data leaving the user's machine.
      </p>
      <p>
        GenomicX is a set of proof-of-concept tools that test this idea across different classes of genomic analysis: pairwise alignment, sequence typing, distance estimation, and sequencing QC. The goal is to understand where browser-based execution works well and where it falls short.
      </p>
    </div>

    <div class="about-card animate-in">
      <h2>Design Decisions</h2>
      <div class="principles-list">
        <div class="principle-item">
          <div class="principle-number">1</div>
          <div>
            <h4>Client-side only</h4>
            <p>Genomic data is sensitive. All GenomicX tools process data locally in the browser. Nothing is uploaded, stored, or transmitted. This is both a privacy decision and a simplicity decision &mdash; no servers to maintain.</p>
          </div>
        </div>
        <div class="principle-item">
          <div class="principle-number">2</div>
          <div>
            <h4>Open source</h4>
            <p>All code is public. The methods are transparent and the tools are free to use. Reproducibility requires openness.</p>
          </div>
        </div>
        <div class="principle-item">
          <div class="principle-number">3</div>
          <div>
            <h4>Reuse established tools</h4>
            <p>We don't reimplement algorithms. We take proven, peer-reviewed C/C++ tools and cross-compile them to WebAssembly using Emscripten. The science is unchanged; only the delivery mechanism is new.</p>
          </div>
        </div>
        <div class="principle-item">
          <div class="principle-number">4</div>
          <div>
            <h4>Minimal interface</h4>
            <p>Each tool should be usable without documentation. Upload files, get results. The interface should not be a barrier.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="about-card animate-in">
      <h2>Who Might Benefit</h2>
      <div class="audience-grid">
        <div class="audience-item">
          <h4>Researchers</h4>
          <p>Quick, one-off analyses without provisioning servers or installing dependencies.</p>
        </div>
        <div class="audience-item">
          <h4>Students</h4>
          <p>Hands-on experience with real bioinformatics tools from any computer, without environment setup.</p>
        </div>
        <div class="audience-item">
          <h4>Clinicians</h4>
          <p>Screening genomic data without sending it to external servers.</p>
        </div>
      </div>
    </div>

    <div class="about-card animate-in">
      <h2>Contributing</h2>
      <p>
        GenomicX is open source. Bug reports, pull requests, and suggestions for new tools to port are all welcome. If you have a favourite command-line bioinformatics tool you'd like to see running in the browser, open an issue.
      </p>
      <div style="margin-top: 1.5rem;">
        <a href="https://github.com/genomicx" target="_blank" rel="noopener" class="btn btn-primary">
          <svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
          View on GitHub
        </a>
      </div>
    </div>

    <div class="about-card animate-in">
      <h2>Stay in the Loop</h2>
      <p>Get occasional updates on new tools, features, and community news. No spam, unsubscribe anytime.</p>
      <div class="sender-form-field" data-sender-form-id="b68ABl"></div>
    </div>

    <div class="about-card animate-in">
      <h2>About the Founder</h2>
      <p>
        GenomicX was started by <strong>Nabil-Fareed Alikhan</strong>, a bioinformatics researcher at the Centre for Genomic Pathogen Surveillance, University of Oxford. His work focuses on microbial genomics, developing open-source tools for prokaryote genome analysis and visualization.
      </p>
      <p>
        He is the co-creator of <a href="https://github.com/happykhan/BRIG" target="_blank" rel="noopener">BRIG</a> (BLAST Ring Image Generator), published in BMC Genomics, and co-hosts the <a href="https://www.microbinfie.com/" target="_blank" rel="noopener">MicroBinfie Podcast</a>. GenomicX grew from a practical question in his research: could the tools he builds for the command line be delivered through the browser instead, and what would the trade-offs be?
      </p>
      <div class="about-links">
        <a href="https://www.happykhan.com/" target="_blank" rel="noopener" class="about-link">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
          Website
        </a>
        <a href="https://github.com/happykhan" target="_blank" rel="noopener" class="about-link">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
          GitHub
        </a>
        <a href="https://mstdn.science/@happykhan" target="_blank" rel="noopener" class="about-link">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054 19.648 19.648 0 0 0 4.636.528c.164 0 .329 0 .494-.003 1.897-.048 3.888-.222 5.715-.779 2.594-.793 4.86-3.202 5.248-6.667.153-1.39.236-2.847.236-4.27 0-.13.006-.54-.002-.54-.004-.032-.004-.08-.004-.144z"/></svg>
          Mastodon
        </a>
        <a href="https://www.linkedin.com/in/nabil-fareed-alikhan/" target="_blank" rel="noopener" class="about-link">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          LinkedIn
        </a>
      </div>
    </div>

  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-inner">
      <span>GenomicX &mdash; an experiment in browser-based bioinformatics</span>
      <ul class="footer-links">
        <li><a href="https://github.com/genomicx" target="_blank" rel="noopener">GitHub</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="https://www.happykhan.com/" target="_blank" rel="noopener">Nabil-Fareed Alikhan</a></li>
      </ul>
    </div>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>